send child component's state to another component as props via tab navigator in react native

Question

This question seems a bit complex but i am sure there must be a solution. I think with using redux i can handle this but i am curious about other solutions.

This is my App.js

<Tab.Navigator>
        <Tab.Screen name='Home' component={HomeScreen} />
        <Tab.Screen name='Favourites' children={()=><Favourites favItems={propValue}/>} />
        <Tab.Screen name='Order' children={()=><Order orders={propValue}/>} />
</Tab.Navigator>

The problem is the propValues that i wanna pass are inside HomeScreen component as a state value. I need to reach them in App.js and send them to Favourites and Order components as a prop. Without using redux is there any solution for that ?

Answer 1

Lift up state: Define the state in App and pass it in props to HomeScreen and the other components.

Redux would help with this insofar as Redux’s state is always right up at the top of the tree. But it wouldn’t do anything special that you can’t achieve with vanilla state located in the same place.

In general you cannot access state above where it’s defined. That’s part of react’s design and working around it is usually a bad idea.