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

<Componentsomething="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

constMainDrawer = createDrawerNavigator(
  {
    Home: {
    screen: HomeScreen,
  },
  }, {
    contentComponent: (props) => (
      <Viewstyle={{flex:1 }}><SafeAreaViewforceInset={{top: 'always', horizontal: 'never' }}><DrawerItems {...props} /><Buttoncolor='red'title='Logout'onPress={() => { props.logoutCurrentUser() }}
          />
        </SafeAreaView></View>
    ),
})

classAppNavigationextendsComponent {
  constructor(props) {
    super(props);
  }

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

  render() {
    return<MainDrawerlogoutCurrentUser={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:

classAppNavigationextendsComponent {
  constructor(props) {
    super(props);
    this.logoutCurrentUser = this.logoutCurrentUser.bind(this);
  }

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

  render() {
    return<MainDrawerlogoutCurrentUser={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:

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

Then on my class AppNavigation i did this:

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

And my MainDrawer I changed to this

constMainDrawer = createDrawerNavigator(
{
  Home: { screen: HomeScreen },
}, {
  contentComponent: (props) => (
    <Viewstyle={{flex:1 }}><SafeAreaViewforceInset={{top: 'always', horizontal: 'never' }}><DrawerItems {...props} /><Buttoncolor='red'title='Logout'onPress={() => { props.screenProps.logoutCurrentUser() }}
        />
      </SafeAreaView></View>
  ),
})

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