CODEWITHSUNDEEP
react-nativereact-navigationstack-navigator
Suv
Suv

Reputation: 21

How to call this.props from a static navigationOptions - react-navigation

I am trying to call a handlelogout() in onPress of button in the header of a stack navigator and then in the handlelogout() I am calling this.props.logout action which will call a navigation reducer to reset to login screen.....but this.props.logout doesnt call an action....nothing happens

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    console.log("navigation", navigation);

    return {
      title: "Profile List",
      gesturesEnabled: false,
      headerLeft: null,
      headerRight: <Button title={"Logout"} onPress={() => params.handlelogout && params.handlelogout({ state: navigation.state })} />
    }
  };

this is my handlelogout function

handlelogout(state) {
    console.log("in handlelogout", this.props.logout, state);
    this.props.logout;
  }

i am attaching the log i printed in the console

here I am binding the logout to mapdispatchprops

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ReduxActions, dispatch);
}

Upvotes: 0

Views: 2570

Answers (1)

DennisFrea
DennisFrea

Reputation: 1122

You can try to put the button inside another element then handle your logout from that element/class.

import ButtonForLogout from './test/buttonforlogout';

...

static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;
    console.log("navigation", navigation);

    return {
      title: "Profile List",
      gesturesEnabled: false,
      headerLeft: null,
      headerRight: <ButtonForLogout />
    }
  };

buttonforlogout.js

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { connect } from 'react-redux';
import { ReduxActions } from './youractions';

class ButtonForLogout extends Component {

   render(){
   return(
      <View>
       <Button title={"Logout"} onPress={this.props.logout} />
      </View>
   );
   }

}

const mapStateToProps = state => ({});

export default connect(mapStateToProps, ReduxActions)(ButtonForLogout);

Something like that.

Upvotes: 1

Related Questions