How do I use the useTranslation() hook with a static configuration?

[GaylordP]

Hello and thank you for your amazing library! :)

I am exclusively using the static configuration (React Navigation 7) because automatic TypeScript detection is important to me.

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import RoomScreen from '_screens/exchange/RoomScreen';
import ExchangeTopTabStackNavigator from './ExchangeTopTabStackNavigator';

export default createNativeStackNavigator({
  initialRouteName: 'ExchangeTopTab',
  screens: {
    ExchangeTopTab: {
      screen: ExchangeTopTabStackNavigator,
    },
    Room: {
      screen: RoomScreen,
    },
  },
});

However, to my knowledge, it's not possible to use a hook like useTranslation with a static configuration, and this is a significant issue for me.

I "hacked" a workaround, but it doesn't seem great to me:

Navigator :

import {createNativeStackNavigator} from '@react-navigation/native-stack';
import RoomScreen from '_screens/exchange/RoomScreen';
import ExchangeTopTabStackNavigator from './ExchangeTopTabStackNavigator';

export default createNativeStackNavigator({
  initialRouteName: 'ExchangeTopTab',
  screens: {
    ExchangeTopTab: {
      screen: ExchangeTopTabStackNavigator,
      options: {
        title: 'title.exchanges',
      },
    },
    Room: {
      screen: RoomScreen,
      options: {
        title: 'title.exchanges',
      },
    },
  },
  screenOptions: {
    headerTitle: props => <HeaderTitle {...props} />
  },
});

HeaderTitle with useTranslation() hook :

import React from 'react';
import {NativeStackNavigationOptions} from '@react-navigation/native-stack';
import {useTranslation} from 'react-i18next';
import {CustomTypeOptions} from 'i18next';
import BodyTitleText from '_basics/text/BodyTitleText';

type FunctionHeaderTitleProps = Parameters<
  Exclude<NonNullable<NativeStackNavigationOptions['headerTitle']>, string>
>[0];

const HeaderTitle = ({children}: FunctionHeaderTitleProps) => {
  const {t} = useTranslation();

  if (children !== '') {
    return (
      <BodyTitleText>
        {t(children as keyof CustomTypeOptions['resources']['app'])}
      </BodyTitleText>
    );
  }
};

export default HeaderTitle;

Do you have a better solution to manage this?
Thank you very much in advance! :)

[satya164]

The plan is to use https://react.dev/reference/react/use to read context. However React 19 has been delayed for quite long time so I'm waiting for the release until I can properly test it.

If you need more than context, then specifying components is the only way.

[GaylordP]

Thank you very much for your response :)