Pass data from screen to other screen using React Native Navigation with Stack Navigator

Question

Hello i'm new here and beginner in react-native i've tried to make a textInput and , i would like to pass the data(text enter by user) in a other screen how can i do it can you help me ? i'm using react navigation StackNavigator

here some of my code my first class with the textinput

export default class ParamScreen extends React.Component {

static navigationOptions = {
    title: ' Covoit Ulg ',
    headerStyle:{ backgroundColor: '#66CDAA'},
    headerTitleStyle:{ color: '#FFF', alignSelf: 'center'},
    titleStyle: {alignSelf: 'center'}
  };



render () {
    const { navigate } = this.props.navigation;

    return (
        <View>
            <InputControl/>
            <Button onPress = {() => navigate('ParamPass',{TextInput: ''})}
                      kind = 'rounded'
                      type = 'danger'
                      style={btnStyle}
                      marginBottom= '10'>pass data ?</Button>
        </View>    
    )
}
}


class InputControl extends React.Component {
constructor(props) {
    super(props)
    this.handleTextInput = this.handleTextInput.bind(this)
    this.state = {textIn: false}
}

handleTextInput() {
    this.setState({textIn: true})
}
render () {
    const textIn = this.state.textIn

    let TextInput = null
    if (textIn) {
        TextInput = <UserInput onSelectionChange={this.handleTextInput}/>
    } 
    return (
        <View>
            <UserInput textIn={textIn}/>
            {TextInput}
        </View>    
    )
}
}
function UserInput(props) {
return <TextInput onSelectionChange={props.onSelectionChange}>
            Test data test data
          </TextInput>  

}

and this is where i want my data

export default class ParamsData extends React.Component {


render (){

    const {state} = this.props.navigation;
    console.log("test test" ,this.props.navigation)
    var textIn = state.params ? state.params.textIn : "<undefined>";

    return (
      <View>
          <Text>Second View: {textIn}</Text>
      </View>
    )
   }
}

thanks for you help and sorry my english not the best but i'm working on it ^^ (better talking then writing)``

export default class ParamScreen extends React.Component {

constructor(props) {
    super(props)
    this.state = { text: 'Test test'}
}

    static navigationOptions = {
        title: ' Covoit Ulg ',
        headerStyle:{ backgroundColor: '#66CDAA'},
        headerTitleStyle:{ color: '#FFF', alignSelf: 'center'},
        titleStyle: {alignSelf: 'center'}
      };

   onSubmit = () => {
       //whatever you want to do on submit
       this.props.navigation.navigate('Parampass', {text: this.state.text})
   }

    render () {
        const { navigate } = this.props.navigation;

        return (
            <View>
                <TextInput style={style.input} 
                            underlineColorAndroid= 'transparent'
                            onChangeText= { (text) => this.setState( {text})}
                            value= {this.state.text}
                            />
                <Button onPress = {() =>this.onSubmit()}
                          kind = 'rounded'
                          type = 'danger'
                          style={btnStyle}
                          marginBottom= '10'>pass data ?</Button>
            </View>    
        )
    }
}

i try it like this in the first screen

export default class ParamsData extends React.Component {

static navigationOptions = ({navigation}) => {
    return {
        title: 'Test /  ${navigation.state.params.text}'
    }
}
constructor (props) {
    super(props)
    this.state = {
        text: this.props.navigation.state.params.text,
        report: null
    }
}

render (){



    return (
      <View>

          <Text>Second View: {text}</Text>
      </View>
    )
}

}

and this is how i receive the data help me please i feel like i'm very close

Answer 1

hi friends my english too not be best this code in this moment is working

the first sreen show, how send parameter with navigation, in this case i use NavigationActions.reset, because i reset routes(avoid button back), but in you case

_navigateToHome = (context, data) => {
        context.navigation.dispatch(NavigationActions.reset(
            {
                index: 0,
                actions: [
                    NavigationActions.navigate({ routeName: 'Home', params: { param: data }, })
                ]
            }));
    }

you should see param: data , that is where pass param

//Home.js

you should get data so:

componentDidMount() {
   console.warn(this.props.navigation.state.params.param)
}