I'm trying to pass some props to class component from function component via navigation.

At Function component I'm writing:

export default function StartScreen() {
    const navigation = useNavigation();

    function onButtonPress(){
       navigation.navigate("Main",{'test':'Test'});
   }
   
   return(
    <>
      <AnimatedTouchable onPress={onButtonPress}></AnimatedTouchable>
    </>
   )
}

At Class component I'm trying to access it at constructor but do not see any props:

    constructor(props) {
        super(props);
        console.log(this.props);
        console.log(this.props.test);
}

But the consol log is always: Object {}

My App.js Looks like:

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{
        headerShown: false
      }}>
        <Stack.Screen name="Start" component={StartScreen} />    //this is function component
        <Stack.Screen name="Main" children={() => <Main />} />   //this is class component
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Does anybody can explain me what I'm missing?

CodePudding user response：

the data your are passing is navigation params not props, they will live on the route prop on your screen do this to console them, also I would check the docs but I don't think you can access them in the constructor,

log then in component did mount

componentDidMount(){
 console.log(this.props.route.params.test);
}
   

CodePudding user response：

Ok, the problem is much easier than I thought. I just missed sending props

So, for anybody who may stumble over a similar problem, just check if you do not forget to add props to the component.

In my case I just changed code in App.js from:

<Stack.Screen name="Main" children={() => <Main />} />

to:

<Stack.Screen name="Main" children={(props) => <Main {...props} />} />