title: How to navigate to new screen when submitting a redux form
body: <p>i'm totally new to react native and i have some screen that have a form and i used redux form to build the form, but i can't navigate to another screen when submitting the form and i'm using 'react-navigation' for navigation please any help.</p>
  
  <p>my react native SignUpScreen.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import {View, Image, TouchableOpacity, StyleSheet, ScrollView, Text} from 'react-native';
  import SignUpForm from './SignUpForm';
  
  import Images from '../../Themes/Images';
  import Styles from './Styles/SignUpStyle';
  import Colors from '../../css/Colors';
  
  export default class SignUpScreen extends Component {
      render() {
          return (
              &lt;ScrollView style={[{backgroundColor:'#fff'}]} removeClippedSubviews={true} keyboardShouldPersistTaps={'always'}&gt;
                  &lt;Image source={Images.signUpBackground} style={Styles.background}/&gt;
                  {/*&lt;Provider store={store}&gt;*/}
                      &lt;SignUpForm /&gt;
                  {/*&lt;/Provider&gt;*/}
                  &lt;View style={[Styles.row, { justifyContent: 'space-between', marginTop:10, marginBottom:10, paddingLeft:24, paddingRight:24}]}&gt;
                      &lt;Text style={{alignSelf:'flex-end'}}&gt;ALREADY HAVE AN ACCOUNT?&lt;/Text&gt;
                      &lt;TouchableOpacity style={{alignSelf:'flex-end'}} onPress={() =&gt; this.props.navigation.navigate('LoginScreen')}&gt;
                          &lt;Text style={{color:Colors.pink}}&gt;SIGN IN&lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
              &lt;/ScrollView&gt;
          );
      }
  }
  </code></pre>
  
  <p>and my redux from SignUpForm.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import {Field, reduxForm} from 'redux-form';
  import {StyleSheet, View, Text, TouchableOpacity, Dimensions} from 'react-native';
  import {MKTextField, MKColor} from 'react-native-material-kit';
  import Styles from './Styles/SignUpStyle';
  import Colors from '../../css/Colors';
  import OverlayButton from "../Helpers/OverlayButton";
  
  const { width, height } = Dimensions.get('window');
  const metrics = {
      screenWidth: width &lt; height ? width : height,
      screenHeight: width &lt; height ? height : width,
  }
  
  //Validation
  const required = value =&gt; value ? undefined : 'Required';
  const maxLength15 = value =&gt; value &amp;&amp; value.length &gt; 15 ? `Must be 15 characters or less` : undefined;
  const isValidEmail = value =&gt; value &amp;&amp; !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? 'Invalid email address' : undefined;
  
  
  const renderField = ({keyboardType, name, placeholder, password = false, style = {},  meta: {touched, error, warning}, input: {onChange, ...restInput}}) =&gt; {
      return (
          &lt;View style={{height:70}}&gt;
              &lt;MKTextField
                  ref={name}
                  floatingLabelEnabled={true}
                  highlightColor={MKColor.Cyan}
                  floatingLabelFont={{fontFamily: "Avenir", fontSize: 12}}
                  textInputStyle={[{textAlign:'center', fontFamily: "Avenir", fontSize: 12, paddingBottom: 0}]}
                  placeholder={placeholder}
                  style={style}
                  keyboardType={keyboardType}
                  password={password}
                  autoCorrect={false}
                  onChangeText={onChange}
                  {...restInput}
              /&gt;
              {touched &amp;&amp; ((error &amp;&amp; &lt;Text style={{ textAlign:'center', color: 'red' , fontSize: 10 }}&gt;{error}&lt;/Text&gt;) ||
              (warning &amp;&amp; &lt;Text style={{ textAlign:'center', color: 'orange' , fontSize: 10 }}&gt;{warning}&lt;/Text&gt;))}
          &lt;/View&gt;);
  };
  
  const submit = values =&gt; {
      //**HOW CAN I NAVIGATE TO ANOTHER SCREEN HERE**
      //alert(`Validation success. Values = ~${JSON.stringify(values)}`);
  }
  
  const SingUpComponent = props =&gt; {
      const {handleSubmit} = props;
  
      return (
          // 575 is the height form the top of the image to the end of the logo
          &lt;View style={{marginTop:(metrics.screenHeight &lt;  575  ? metrics.screenHeight * 0.55 : metrics.screenHeight * 0.5), paddingLeft:24, paddingRight:24}}&gt;
                  &lt;View style={{display:'none'}}&gt;
                      &lt;Field component={renderField} name="forEffect"/&gt;
                  &lt;/View&gt;
                  &lt;Field keyboardType="default" style={[Styles.textfieldWithFloatingLabel]} component={renderField} name="fullname" placeholder="FULL NAME" validate={[required, maxLength15]}/&gt;
                  &lt;Field keyboardType="email-address" style={[Styles.textfieldWithFloatingLabel]} component={renderField} name="email" placeholder="EMAIL" validate={[required, isValidEmail]}/&gt;
                  &lt;Field keyboardType="default" style={[Styles.textfieldWithFloatingLabel]} component={renderField} name="password" placeholder="PASSWORD" validate={[required]} password={true}/&gt;
              {/*&lt;TouchableOpacity onPress={handleSubmit(submit)} style={{height: 56, marginTop:(metrics.screenHeight &lt; 575  ? 21: metrics.screenHeight * 0.1), marginBottom:21, alignItems: 'center', backgroundColor: Colors.pink, borderRadius: 50 }}&gt;*/}
                  {/*&lt;Text style={{color: 'white', fontSize: 16, width:'100%',  textAlign: 'center', padding: 15 }}&gt;DONE&lt;/Text&gt;*/}
              {/*&lt;/TouchableOpacity&gt;*/}
              &lt;OverlayButton
                  clickButton={handleSubmit(submit)}
                  buttonBackgroundColor={Colors.pink}
                  pressBackgroundColor={'transparent'}
                  bordered={true}
                  borderWidth={2}
                  borderColor={Colors.pink}
                  pressTextColor={Colors.pink}
                  extraStyle={{height: 56, marginTop:(metrics.screenHeight &lt; 575  ? 21: metrics.screenHeight * 0.1), marginBottom:21, alignItems: 'center', backgroundColor: Colors.pink, borderRadius: 50 }}
                  buttonTextColor={'#fff'}
                  text="SIGN UP"&gt;&lt;/OverlayButton&gt;
          &lt;/View&gt;
      );
  }
  
  const SingUpForm = reduxForm({
      form: 'signUp', // a unique identifier for this form
  })(SingUpComponent);
  
  export default SingUpForm;
  </code></pre>
  
  <p>please any help on how to to navigate to new screen when submitting the form</p>