Question 34783 in React native Question posted in
The official React Native documentation can be found here.

Why I do not see any props in React Native?

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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} />} />

  2. 0

    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);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search