English is only one of many languages people speak around the world (thanks a lot, Tower of Babel) and it's polite and sometimes even necessary to translate our app to the languages our users speak. Let's look at one way we can do this in React Navigation - it's not the only way but it'll do the trick. Similar to themes, we will use
screenProps. You may also want to use React's context API as demonstrated in the themes guide in order to make it easier to access the translate function from a variety of components.
Setting up a localization library
We'll need to use some kind of library to store our translations and provide a function that gives us access to them, along with handling fallbacks when we don't have a particular language defined. Localization and internationalization (i18n) are often used interchangeably, as in the example below where we get the current
expo-localization and use the
i18n-js library for managing translations, for no particular reason other than it was available - use whatever you like.
Wiring up your localization library to navigation
Next let's store our
locale in the state of our root app component and then thread it through
screenProps to make it available throughout React Navigation.
Now in our screens we can use these
screenProps as follows:
You can run this example in this Snack. Again, you may want to go further than just passing this through
screenProps if you want to make it easier to access the
t function or the other
screenProps from any React component (and not just screen components that are rendered by React Navigation). Refer to themes and the React documentation on context for help with that.