Screen navigationOptions: how to use translations

Question

In the code below I have SettingsScreen with translations, which works prefectly. I use Android emulator for developing.

import { View, Text } from 'react-native';
import { HeaderBackButton } from 'react-navigation-stack';
import React, { useContext } from 'react';
import { LocalizationContext } from '../components/Translations';

export const SettingsScreen = () => {

  const {
    translations,
  } = useContext(LocalizationContext);
  initializeAppLanguage();

  return (
    <View>
      <Text>
        {translations['settings.language']}
      </Text>
      <Text>
        {translations['settings.about']}
      </Text>
      <Text>
        {translations['settings.about_content']}
      </Text>
    </View>
  );
};


SettingsScreen.navigationOptions = ({ navigation }) => ({
  title: translations['settings.title'],
  headerLeft: () => <HeaderBackButton onPress={() => navigation.goBack(null)} />,
});

Now I would like to access translations also from SettingsScreen.navigationOptions, but currently I can not:

title: translations['settings.title']

ReferenceError: translations is not defined

How can I manage to use translations also in navigationOptions?

You can extract `translations` outside of `SettingsScreen` function. — random, Jan 29 '20 at 14:56
How? If I define translations outside I will get "Invalid hook call." — ikenator, Jan 29 '20 at 15:02

score 0 · Answer 1 · answered Jan 29 '20 at 15:28

I just have answered a quite similiar question recently: How to use setLocale within i18n-js?

With this solution, you'll be able to do things like this:

import i18n from 'i18n-js'

const defaultNavigationOptions = {
  // some options
}

const SettingsStack = createStackNavigator(
  {
    Settings: {
      screen: SettingsScreen
    }
  },
  {
    ...defaultNavigationOptions,
    navigationOptions: () => {
      return {
        title: i18n.t('settings.title'),
        headerLeft: () => <HeaderBackButton onPress={() => navigation.goBack(null)} />
      }
    }
  }
)

// other stacks

Screen navigationOptions: how to use translations

1 Answers1