function not getting passed as part of props in react native

Question

I have following code for a drawer navigator that is being shown from App component. I am trying to pass a property saveUser that points to a local function from App component to the MyDrawer component, but its always undefined in MyDrawer function. However, when I pass a string property userName to MyDrawer then that gets passed.

Question

Why is function not being passed as part of props from App component to MyDrawer function even though userName is getting passed?

App.js snippet

const Drawer = createDrawerNavigator();

function MyDrawer(props) {
   alert("in MyDrawer function : props.saveUser is " + props.saveUser);
   alert("in MyDrawer function : props.userName is " + props.userName);
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home" component={HomeStack} />
      <Drawer.Screen
        name="Create Task"
        component={CreateTaskStack}
        initialParams={{ saveUser: props.saveUser }}
      />
    </Drawer.Navigator>
  );
}

export default function App() {
  const setUser = () => {
    alert('User will be set in this function');
  };
  setUser.bind(this);
  return (
    <NavigationContainer>
      <MyDrawer saveUser={this.setUser} userName="sunil" />
    </NavigationContainer>
  );
}

Answer 1

export default function App() {
  const setUser = () => {
    alert('User will be set in this function');
  };
  return (
    <NavigationContainer>
      <MyDrawer saveUser={setUser} userName="sunil" />
    </NavigationContainer>
  );
}

Since your App component is already a functional component that has the internal function you dont have to bind it and you dont have to call this.setUser. Just call put setUser directly and your function should be passed.