Search code examples
react-nativereact-native-router-flux

i need to pass a data to the scene and display what i put in the input to the next screen


I am trying to get the the data I filled in the input to the chat screen but I am getting the key scene name of that screen. How can I fix it?

Heading

 <Router>
    <Scene key="root" style={{paddingTop:Platform.OS==='ios'? 64:54}}> 
     <Scene key="Login" component={Login} hideNavBar={true} hideTabBar={true} />

      <Scene key="tabbar" tabs={true} tabBarStyle={{backgroundColor:'#fff'}} hideNavBar={true} 
   >
      <Scene key="Home" component={CardList} title="Home" iconName="ios-home" icon={TabIcon}/>
     <Scene key="contacts" component={Contacts} iconName="ios-contacts" icon={TabIcon} /> 
     
      <Scene key='chat' component={Chat} hideTabBar={true} title='Chat'iconName="ios-chatbubbles" icon={TabIcon} />
      <
  
     </Scene>
    </Scene>
  </Router>

 <View style={style.container}>
      <Text> hello{this.props.name}</Text>
 </View>

contract

state={ name:'',}; 
render() { return ( 
<View style={style.container}> 
<Text> Enter your name </Text> 
<TextInput style={style.textInput} onChangeText={(text)=>{ this.setState({ name: text, }); }} value={this.state.name} />
 <TouchableOpacity onPress={()=>{ Actions.chat({ name: this.state.name, }) }} > 
<Text> Next </Text> 
</TouchableOpacity>

chat


Solution

  • This was a matter of name. Name was saving the name of the router. That's why you have to change the parameter name.

    You can use this to turn over the data. If you want pass data in chat

    Actions.chat({passname: this.state.name})
    

    You can recover your data in chat Screen like this:

         <TextInput
            style={{height: 40, borderColor: 'gray', borderWidth: 1}}
            value={this.props.passname}
    

    Example I created