Search code examples
react-nativereact-reduxreact-navigationredux-thunkreact-navigation-stack

Method is not being invoked when i press the button


I am using react navigation and have added a button on the right to signout from my app using default navigation options as shown below :

const otherApp = createStackNavigator({
  Welcome : { 
    screen : WelcomeScreen
  }
},
{
  defaultNavigationOptions : ({navigation}) => ({
    title : 'Welcome',
    headerStyle: {
      backgroundColor: '#29434e',
      shadowColor: 'transparent',
      elevation: 0
    },
    headerRight: (
      <TouchableOpacity
        style={{ backgroundColor: '#DDDDDD', padding: 5 }}
        onPress={() => navigation.getParam('logout')}>
        <Text
          style={{
            fontSize: 10,
          }}>
          Logout
        </Text>
      </TouchableOpacity>
    ),
  })
});

And i am binding the method to be invoked as follows :

_Logout() {
    this.props.signOut();
  }
  componentDidMount(){
    this.props.navigation.setParams({ logout : this._Logout.bind(this) })
  }

Function is maped to props using the redux

const mapDispatchToProps = (dispatch) => {
  return {
    Signout : ()=> dispatch(Signout())
  }
}

But the problem is when i press the button, it does not invoke the method !


Solution

  • I got the solution, what i was doing wrong that i wasn't passing a call back in the onPress of the button !

    logoutFromFirebase = () => {
        this.props.Signout();
        this.props.navigation.navigate(this.props.user.uid ? 'App' : 'Auth')
      }
      componentDidMount(){
        this.props.navigation.setParams({ logout : this.logoutFromFirebase })
      }
    

    And default navigation

    defaultNavigationOptions : ({navigation}) => ({
        title : 'Welcome',
        headerStyle: {
          backgroundColor: '#29434e',
          shadowColor: 'transparent',
          elevation: 0
        },
        headerRight: (
          <TouchableOpacity
            style={{ backgroundColor: '#DDDDDD', padding: 5 }}
            onPress={navigation.getParam('logout' , () => Reactotron.log('Logout not callled'))}>
            <Text
              style={{
                fontSize: 10,
              }}>
              Logout
            </Text>
          </TouchableOpacity>
        ),
      })
    

    And now it is working fine !