Can´t use navigation && props in React-Native?

user_13369863 0
Viewed 44

I am working on a React-Native Project and found an issue..

Everything is working fine except my HomeStackScreen, i want to pass data via props, but also want to navigate to open a drawer

const HomeStackScreen = (props, navigation) => (


  console.log("HOME STACK:   " + props.studentData),

  <HomeStack.Navigator headerMode="screen" studentData={props.studentData}>
    <HomeStack.Screen name = "Home" children={() => <HomeScreen studentData={props.studentData} />} options={{
      title:'Home',
      headerStyle: {
        backgroundColor: '#e67e22',
        

      },
      headerRight: () => (
        <Icon.Button name="build" size={30} 
        backgroundColor="#e67e22" color="white" paddingLeft= {15} onPress= {() => navigation.
        openDrawer()}></Icon.Button>
      )
    }}/>
  </HomeStack.Navigator>

);

Here is my code, but when I write

const HomeStackScreen = (props) => (

or

const HomeStackScreen = ({navigation}) => (

everything works, but when I want to use both I get an error, telling me one of them is not a function

react-native reactjs
2 Answers

You should use them like this :

const HomeStackScreen = (props) => {
  const {navigation,studentData} =  props ;
  return ...

}
user_126087140

Pass props as an object and:

const HomeStackScreen = ({navigation, studentData}) => (


  console.log("HOME STACK:   " + studentData),

  <HomeStack.Navigator headerMode="screen" >
    <HomeStack.Screen name = "Home" children={() => <HomeScreen studentData={studentData} />} options={{
      title:'Home',
      headerStyle: {
        backgroundColor: '#e67e22',
        
      },
      headerRight: () => (
        <Icon.Button name="build" size={30} 
        backgroundColor="#e67e22" color="white" paddingLeft= {15} onPress= {() => navigation.
        openDrawer()}></Icon.Button>
      )
    }}/>
  </HomeStack.Navigator>

);
user_56691200
Related