How to pop view with parameters/callback in ReactNative

Question

I am trying to push a view in Navigation with passProps/paramters in ReactNative. That I could with some googling and other things.

Below is my code to push a view in navigator.

    export default class LoginScreen extends Component {
      constructor() {
          super()
          this.state = {
             email: '',
             password: ''
          }
       }

         render() {
          return (
            <View style={{flex:1, flexDirection:'column',  justifyContent: 'center'}}>
                  <View  style={{flexDirection:'column'}}>
                  <TextInput
                    style = {styles.input}
                    placeholder = 'Email'
                    autoCapitalize = 'none'
                    onChangeText = { (email) => {alert(this.state.email); this.setState({email})}}
                 />
                      <TextInput
                        style = {styles.input}
                        placeholder = 'Password'
                        autoCapitalize = 'none'
                        onChangeText = { () => this.updatePassword()} 
                     />
                  </View>
                  <View style={{ marginTop:20, alignItems: 'center'}}>
                    <TouchableOpacity style={{alignItems: 'center',  justifyContent: 'center', borderWidth:1, width:100, height:40}}
                                    onPress={ () => this._onPressButton() } >
                    <Text >Login</Text>
                  </TouchableOpacity>
                  </View>
              </View>
          );
       }

       _onPressButton() {
         this.props.navigator.push({
             name: 'Home',
             title: 'Home',
             passProps: {
             userName: this.state.email, 
           }
callback: this._callbackFun(''),
          });
       }

       updateEmail = (text) => {
          this.setState({email: text})
          alert(text)
       }
       updatePassword = (text) => {
          this.setState({password: text})
          alert(this.state.password)
       }
   _callbackFun = (text) => {
     alert(text)
   }

I want to know how to pop view with passProps/parameters in Navigation so that any screen1 can update the view based on activity happened on screen2.

Below is my code to pop a view.

export default class HomeScreen extends Component {
  constructor(props) {
      super(props)
    }
  render() {
     return (
       <View style={{flex:1, flexDirection:'column', alignItems: 'center', justifyContent: 'center'}}>
          <Text>Login Successfully {this.props.userName}!!</Text>
          <TouchableOpacity style={{alignItems: 'center',  justifyContent: 'center', marginTop:20, borderWidth:1, width:100, height:40}}
              onPress={ () => this._onPressButton1('button1') }>
              <Text >Button1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={{alignItems: 'center',  justifyContent: 'center', marginTop:20, borderWidth:1, width:100, height:40}}
            onPress={ () => this._onPressButton1('button2') }>
            <Text >Button2</Text>
      </TouchableOpacity>
      </View>
     )
}

_onPressButton1(buttonName) {
  if(buttonName == 'button1')
  {
      this.props.navigator.pop();
  }
  else if (buttonName == 'button2') {
    this.props.callback();
  }
}

But it is showing me error like callback function is undefined.

Any help to pass parameter or setting callback function will be appreciated.!!!

Answer 1

try following

_onPressButton1(buttonName) {
  if(buttonName == 'button1')
  {
      this.props.route.callback(args);
      this.props.navigator.pop();
  }