How to pass custom props when using React Navigation version 5?

Question

I have upgraded to React Navigation v5 in my app. I am using watermelondb in my app. While using ReactNavigationv4, I used to pass the database props as follows

export const createNavigation = props =>

But in v5 do something as

const Stack = createStackNavigator({database});

throws an error saying

Does any one know how to pass props for v5?

Answer 1

You should use React context API to pass your database to all screens: https://reactjs.org/docs/context.html

<DatabaseContext.Provider value={database}>
  <NavigationContainer>
    {/* ... */}
  </NavigationContainer>
</DatabaseContext.Provider>

And then in your screens where you need the database, use:

const database = React.useContext(DatabaseContext);

Or for class components: https://reactjs.org/docs/context.html#classcontexttype