CODEWITHSUNDEEP
javascriptreact-nativereact-reduxreact-navigation
Zennichimaro
Zennichimaro

Reputation: 5306

react-native with react-navigation and redux [transfer state across screen]

I am new to react-native and all its libraries.

I am trying to get my InputText's content across to the next screen using react-redux, but I am not sure how to do it properly. The documentations are too verbose but just explain the theories with nothing practical.

I have 2 screens in my StackNavigator as follows:

const StackNav = StackNavigator({
  SignName: { screen: SignNameScreen},
  SignBday: { screen: SignBdayScreen}
})

each of the SignNameScreen and SignBdayScreen just has TextInput and I just want to get the user input across the screen.

class SignNameScreen extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  handleNext() {
    Alert.alert("handle button next pressed")
//     navigate("SignBday")
  }
  handleOnPress() {
    Alert.alert("handle button login pressed")
  }
  submitFunc = () => {
    const payload = {
      email: this.email,
      password: this.password
    }
    console.log(payload)
    Alert.alert("hello: " + payload.email)
  }
  render() {
    return (
      <View style={{flex: 1, flexDirection: 'column', justifyContent: 
'space-around'}}>
        <TextInput placeholder="first name"
          onChangeText={(text) => this.firstname = text}/>
        <TextInput placeholder="last name"
          onChangeText={(text) => this.lastname = text}/>
      <Button 
        title="Next"
//         onPress={this.handleNext} // this doesnt work, the function cannot access props
        onPress={() => {this.props.navigation.navigate("SignBday")}}
      />
      </View>
    );
  }
}

I tried various methods like creating reducer, export the class using connect etc, but everything just breaks the code. Would anyone point me in the right direction, please?

I have tried numerous sample project from github but they are either unbuildable or unrunnable because of various node problems.. sorry, javascript is my weak point too.

Thanks a lot for your help.

The screenshot

Upvotes: 3

Views: 250

Answers (2)

Vorathep Sumetphong
Vorathep Sumetphong

Reputation: 944

It really depends on the app, if it is a simple app with less states, then you probably don't need to use Redux.

Without redux. You would need to pass it like this.

this.props.navigation.navigate('NewPage',{ paramKey: paramValue })

And retrieve it on the other other page like

const {params} = this.props.navigation.state;

Also make sure that you are having navigation access at that given component.

With Redux is a little more complicated.

You would need a some setup and an action and reducer, something like what is done here and here.

Goodluck!

Upvotes: 1

Paras Watts
Paras Watts

Reputation: 2665

Navigate like this 

onPress={() => this.props.navigation.navigate('SignBday', { 'Param_Name': 'Param_Value' })}

Then get the param in another screen like this

const { params } = this.props.navigation.state;

To get the value of parameter in next screen use 

params.Param_Name

Upvotes: 2

Related Questions