React native: useTranslation() causes Unhandled JS Exception: TypeError: Cannot read property 'length' of undefined

[tothvoj-gl]

🐛 Bug Report

useTranslation() causes Unhandled JS Exception: TypeError: Cannot read property 'length' of undefined.

To Reproduce

Crash happens on startup, but not with every launch, instead around 75% of app launches. Here is the stacktarce:

Unhandled JS Exception: TypeError: Cannot read property 'length' of undefined This error is located at: at RootStack (/Users/vojtech.toth/Library/Developer/Xcode/DerivedD..., stack: areHookInputsEqual@4588:32 updateCallback@5121:43 anonymous@13946:45 useMemoizedT@76455:34 useTranslation@76489:31 RootStack@49593:77 renderWithHooks@4599:31 updateFunctionComponent@5825:31 beginWork@6228:38 performUnitOfWork@7955:24 workLoopSync@7860:54 renderRootSync@7845:18 performWorkOnRoot@7636:55 performSyncWorkOnRoot@3904:21 flushSyncWorkAcrossRoots_impl@3830:332 processRootScheduleInMicrotask@3846:33 anonymous@3908:161 Error: ExceptionsManager.reportException raised an exception: Unhandled JS Exception: TypeError: Cannot read property 'length' of undefined This error is located at: at RootStack (/Users/vojtech.toth/Library/Developer/Xcode/DerivedD..., stack: areHookInputsEqual@4588:32 updateCallback@5121:43 anonymous@13946:45 useMemoizedT@76455:34 useTranslation@76489:31 RootStack@49593:77 renderWithHooks@4599:31 updateFunctionComponent@5825:31 beginWork@6228:38 performUnitOfWork@7955:24 workLoopSync@7860:54 renderRootSync@7845:18 performWorkOnRoot@7636:55 performSyncWorkOnRoot@3904:21 flushSyncWorkAcrossRoots_impl@3830:332 processRootScheduleInMicrotask@3846:33 anonymous@3908:161

Here is the code which triggers it:

const Stack = createNativeStackNavigator();
function RootStack() {
  useFetchRemoteConfig();
  useSubscribeToUserChanges();
  const {t} = useTranslation('screenNames');
  const {isPending, data: user} = useCurrentUser();

  if (isPending) {
    return (
      <View style={styles.splash}>
        <LoadingSpinner />
      </View>
    );
  }

  return (
    <Stack.Navigator>
      {!user ? (
        <>
          <Stack.Screen name={t('Login')} component={LoginScreen} />
          <Stack.Screen name={t('Register')} component={RegisterScreen} />
        </>
      ) : (
        <>
          <Stack.Screen
            name={'Home'}
            component={HomeTabs}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name={t('AddFinanceInfo')}
            component={AddFinanceInfoScreen}
          />
        </>
      )}
    </Stack.Navigator>
  );
}

Expected behavior

Here is the code which works fine without any crash:

const Stack = createNativeStackNavigator();
function RootStack() {
  useFetchRemoteConfig();
  useSubscribeToUserChanges();
  const {isPending, data: user} = useCurrentUser();

  if (isPending) {
    return (
      <View style={styles.splash}>
        <LoadingSpinner />
      </View>
    );
  }

  return (
    <Stack.Navigator>
      {!user ? (
        <>
          <Stack.Screen
            name={i18n.getResource(i18n.language, 'screenNames', 'Login')}
            component={LoginScreen}
          />
          <Stack.Screen
            name={i18n.getResource(i18n.language, 'screenNames', 'Register')}
            component={RegisterScreen}
          />
        </>
      ) : (
        <>
          <Stack.Screen
            name={'Home'}
            component={HomeTabs}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name={i18n.getResource(
              i18n.language,
              'screenNames',
              'AddFinanceInfoScreen',
            )}
            component={AddFinanceInfoScreen}
          />
        </>
      )}
    </Stack.Navigator>
  );
}

Your Environment

Device: iPhone 14, OS 18.5

"@hookform/resolvers": "4.1.3",
"@lodev09/react-native-true-sheet": "2.0.5",
"@react-native-async-storage/async-storage": "2.1.2",
"@react-native-community/slider": "4.5.6",
"@react-native-firebase/analytics": "21.7.1",
"@react-native-firebase/app": "21.7.1",
"@react-native-firebase/auth": "21.7.1",
"@react-native-firebase/crashlytics": "21.7.1",
"@react-native-firebase/firestore": "21.7.1",
"@react-native-firebase/remote-config": "21.7.1",
"@react-navigation/bottom-tabs": "7.2.0",
"@react-navigation/native": "7.0.14",
"@react-navigation/native-stack": "7.2.0",
"@tanstack/react-query": "5.66.11",
"date-fns": "4.1.0",
"eslint-plugin-ft-flow": "3.0.11",
"i18next": "24.2.3",
"react": "19.0.0",
"react-hook-form": "7.54.2",
"react-i18next": "15.5.2",
"react-native": "0.79.0",
"react-native-date-picker": "5.0.12",
"react-native-edge-to-edge": "1.4.3",
"react-native-email-link": "1.16.1",
"react-native-linear-gradient": "2.8.3",
"react-native-localize": "3.4.1",
"react-native-nitro-modules": "0.24.1",
"react-native-progress": "5.0.1",
"react-native-safe-area-context": "5.4.1",
"react-native-screens": "4.10.0",
"react-native-toast-message": "2.3.0",
"react-native-unistyles": "3.0.0-rc.4",
"react-native-uuid": "2.0.3",
"zod": "3.24.2"

[adrai]

Based on the error I don't think this is related on i18next. Also try to reproduce it with this example: https://github.com/i18next/react-i18next/tree/master/example/ReactNativeProject

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.