Error: Rendered fewer hooks than expected when using i18n.changeLanguage

[LucasWilliams2622]

🐛 Bug Report

I got this error
ERROR Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

This error is located at:
in Unknown (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by CardContainer)
in RCTView (created by View)
...

when using i18n.changeLanguage

To Reproduce

Here is my config i18n.ts following https://github.com/i18next/react-i18next/tree/master/example/ReactNativeProject
const resources = {
en: en,
fr: fr,
es: es,
jp: ja,
vi: vi,
zh: zh,
};

const getLanguage = async () => {
try {
const savedLanguage = await mmkvStorage.getItem(LANGUAGE_COUNTRY);

if (savedLanguage) {
  return savedLanguage;
}
const locales = RNLocalize.getLocales();
const deviceLanguage = locales.length > 0 ? locales[0].languageCode : 'en';
return resources[deviceLanguage] ? deviceLanguage : 'en';

} catch (error) {
console.error('Error getting language:', error);
return 'en';
}
};

const initI18n = async () => {
const language = await getLanguage();
console.log('🚀 ~ initI18n ~ language:', language);
i18n
.use(RNLanguageDetector)
.use(initReactI18next)
.init({
compatibilityJSON: 'v3',
supportedLngs: ['en', 'fr', 'es', 'jp', 'vi', 'zh'],
resources,
lng: language,
fallbackLng: 'en',
interpolation: {
escapeValue: false,
},
});
};

initI18n();
export default i18n;

==============| ChangeLanguges Screen |==================
const ChangeLanguges = ({navigation}: {navigation: any}) => {
const {t, i18n} = useTranslation();

const changeLanguage = useCallback(
async (langCode: string, changeCountry = false) => {
try {
if (langCode) {
await i18n.changeLanguage(langCode);
}

    navigation.goBack();
  } catch (error) {
    console.log('🚀 ~ changeLanguage ~ error:', error);
  }
},
[i18n, navigation],

);
return (
<Button
title={t('BUTTON_ONLY_CHANGE_LANGUAGE')}
onPress={() => changeLanguage(selectedLanguage.code, false)}
/>)}
export default ChangeLanguges;

My Environment

System:
OS: macOS 14.6.1
CPU: (10) arm64 Apple M1 Max
Memory: 1.31 GB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 21.7.3
path: ~/.nvm/versions/node/v21.7.3/bin/node
Yarn:
version: 3.6.4
path: ~/Documents/GitHub/EmergencyCall/node_modules/.bin/yarn
npm:
version: 10.8.3
path: ~/.nvm/versions/node/v21.7.3/bin/npm
Watchman:
version: 2024.06.17.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.14.3
path: /Users/lucaswilliams/.rvm/gems/ruby-3.0.5/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.5
- iOS 17.5
- macOS 14.5
- tvOS 17.5
- visionOS 1.2
- watchOS 10.5
Android SDK:
API Levels:
- "33"
- "34"
- "35"
Build Tools:
- 30.0.3
- 33.0.0
- 33.0.1
- 34.0.0
- 35.0.0
System Images:
- android-33 | Google Play ARM 64 v8a
- android-34 | Intel x86_64 Atom
- android-34 | Google APIs Intel x86_64 Atom
- android-34 | Google Play ARM 64 v8a
- android-34 | Google APIs ATD ARM 64
- android-35 | Google APIs ARM 64 v8a
- android-35 | Google APIs Intel x86_64 Atom
- android-35 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2024.1 AI-241.15989.150.2411.11948838
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.11
path: /usr/bin/javac
Ruby:
version: 3.0.5
path: /Users/lucaswilliams/.rvm/rubies/ruby-3.0.5/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 13.6.9
wanted: ^13.6.9
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.8
wanted: 0.73.8
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

[adrai]

Please provide a minimal reproducible example repository - not just code snippets.

[LucasWilliams2622]

Please provide a minimal reproducible example repository - not just code snippets.
I'm so sorry maybe it is a bug related to my project configuration, thanks for the reply