How to pass parameter while navigating to previous screen?

Question

I am navigating from screen A to screen B.. And then navigation back to screen A using

this.props.navigation.goBack(null);

I want to know how can we pass parameter while doing this?

here is my code

 import React, { Component } from 'react';
 import { View, Text, TextInput, ScrollView } from 'react-native';
 import Card from './Card';
 import CardSection from './CardSection';
 import MyButton from './MyButton';


 class Settings extends Component{
 constructor(props){
 super(props);
 this.state = {
   ip:'',
   port:''
 };
}

onSaveClick() {
 console.log('Button clicked');
 this.props.navigation.goBack();
}
render(){
const { input, container } = styles;
return(
  <View style = {container}>
  <Card>
  <CardSection>
    <TextInput 
      style = {input}
      onChangeText = {(ip) => this.setState({ip})}
      placeholder = "IP Address"
      autoCapitalize = "none"
      autoCorrect = {false}
      keyboardType = "numeric"
    />
    </CardSection>
    <CardSection>
      <TextInput
      style={styles.input}
      onChangeText={(port) => this.setState({port})}
      placeholder="Port Number"
      autoCapitalize="none"
      autoCorrect={false}
      keyboardType = "numeric"
    />
    </CardSection>
    <CardSection>
      <MyButton onPress ={this.onSaveClick.bind(this)}>
        Save
      </MyButton>
    </CardSection>
    <View>
    </View>
   </Card> 
  </View>
);
}
}

So how can I manage to access state of this component in the previous component. Can we pass state as a parameter ?

Answer 1

You should follow the Redux methodology

Because passing state / information back from child component to parent component (second screen to first screen) is a bad design pattern as this creates multiple paths of data flow in application which makes it hard to Debug .

How redux helps is

1. When click of submit you push the data onto a global store .(Basically dispatch an action and use reducer to update global redux store)

2. Navigate back to the previous screen .

3. List to these changes in previous page via connect( from react -redux package) and reflect the changes .

You can use the node package react-redux .

And follow up the example from here -> http://redux.js.org/docs/basics/ExampleTodoList.html

More helpful examples here .