Undefined Function OnClick In ContentComponent

Im trying to access a function inside a button on contentComponent that is inside a createDrawerNavigator. The problem is that the 'props' passed to the contentComponent does not h

Solution 1:

The props are basically the "arguments" that you pass to a component, so let's say you have

<Component something="abcd" anotherThing="efg"></Component>

inside that component if you access to this.props you would have this

{
    something: "abcd",
    anotherThing: "efg",
}

so you could do this.props.something or this.props.anotherThing and you could access these values.

You could also do something like this in your method

const { something, anotherThing} = this.props;

console.log(something);
console.log(anotherThing);

So what it's wrong with your code is that you are not passing logoutCurrentUser function as a prop.

you need to pass it to the component

const MainDrawer = createDrawerNavigator(
  {
    Home: {
    screen: HomeScreen,
  },
  }, {
    contentComponent: (props) => (
      <View style={{ flex: 1 }}>
        <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
          <DrawerItems {...props} />
          <Button
            color='red'
            title='Logout'
            onPress={() => { props.logoutCurrentUser() }}
          />
        </SafeAreaView>
      </View>
    ),
})

class AppNavigation extends Component {
  constructor(props) {
    super(props);
  }

  logoutCurrentUser = () => {
    console.log("LOGOUT PRESSED")
  }

  render() {
    return <MainDrawer logoutCurrentUser={this.logoutCurrentUser} />
  }
}

If you want pass a prop using a HOC just pass the prop to the HOC, an HOC it's like for example a stacknavigator

const SomeStack = createStackNavigator({
  // config
});

<SomeStack
  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>

Solution 2:

class AppNavigation extends Component {
  constructor(props) {
    super(props);
    this.logoutCurrentUser = this.logoutCurrentUser.bind(this);
  }

  logoutCurrentUser = () => {
    console.log("LOGOUT PRESSED")
  }

  render() {
    return <MainDrawer logoutCurrentUser={this.logoutCurrentUser}/>
  }
}

Solution 3:

So I managed a workaround, I added a mapDispatchToProps with the function that I want to call when clicking the button:

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch,
    logoutCurrentUser: () => {
      console.log("LOGOUT PRESSED")
    }
  }
}

Then on my class AppNavigation i did this:

render() {
  return <RootNavigator screenProps={this.props} />
}

And my MainDrawer I changed to this

const MainDrawer = createDrawerNavigator(
{
  Home: { screen: HomeScreen },
}, {
  contentComponent: (props) => (
    <View style={{ flex: 1 }}>
      <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
        <DrawerItems {...props} />
        <Button
          color='red'
          title='Logout'
          onPress={() => { props.screenProps.logoutCurrentUser() }}
        />
      </SafeAreaView>
    </View>
  ),
})

Leaving the answer here in case someone else also have the same problem.