React Native + React I18next + React Navigation, navigationOptions update issue

Question

I'm using react-i18next and react-navigation.

Currently I wrap all my components with withNamespaces individually, when there's a need. The issue is that I can't keep the title in static navigationOptions up to date. It just doesn't update, no matter how I assign it: as a function or as properties object. The navigation.setParams does not update it as well.

I tried using withNamespaces on Navigators themselves to make use of screenProps, as it's done here, but in this case my dispatched NavigationActions have no effect. The navigation just doesn't happen.

I assume that i18next HOC somehow prevents its children from receiving params update events. Do I need to initialise the i18next in some other way to resolve this? Or is there a way to force the title in navigationOptions to update?

Answer 1

Ok, I came up with a simple way to solve this. I made a component that just returns the required string, and I wrapped it with withNamespaces and put it into title prop of navigationProperties. Works fine.

Here's an example code.

Title Component

import React from 'react'
import PropTypes from 'prop-types'
import { withNamespaces } from 'react-i18next'
import { Text } from 'react-native'

const ScreenTitle = ({ path, t }) => <Text>{t(path)}</Text>

ScreenTitle.propTypes = {
  path: PropTypes.string.isRequired,
  t: PropTypes.func.isRequired,
}

export default withNamespaces()(ScreenTitle)

Usage

static navigationOptions = () => {
  return {
    title: <ScreenTitle path="privacyPolicy:title" />,
  }
}