Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Automatically switch app language based on device language. #6587

Closed
wants to merge 7 commits into from

Conversation

auroursa
Copy link
Contributor

@auroursa auroursa commented Nov 21, 2024

Let’s introduce a package react-native-localization-settings to make the app’s language selectable in the device settings(Update: It’s not required, but I think it could improve user experience).

Based on expo-localization, the app language can automatically follow system language. For example, if the device language is set to Japanese, the app will automatically switch to Japanese (instead of English), similar to our web matches the browser language.

To compatibility with Android and iOS language codes, the Chinese language code needs to be modified to follow the IETF-BCP-47 format. I’ve tested it on Android versions 7 to 14, and all app language are working fine.

It should work well on iOS, but I haven't had the opportunity to test it.

example.mp4

@auroursa auroursa marked this pull request as draft November 21, 2024 08:50
Copy link
Contributor Author

@auroursa auroursa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I found an issue, the code works correctly for language codes like "ja" and "ko", but doesn't work when there's a regional variant, such as "zh-CN".

src/locale/i18n.ts Outdated Show resolved Hide resolved
@fobos531
Copy link

@auroursa I believe adding a new dependency is not needed, as the app already depends on expo-localization. You can use the Localization.getLocales() method to get the current language: https://docs.expo.dev/versions/latest/sdk/localization/#localizationgetlocales.

@auroursa
Copy link
Contributor Author

auroursa commented Nov 21, 2024

@auroursa I believe adding a new dependency is not needed, as the app already depends on expo-localization. You can use the Localization.getLocales() method to get the current language: https://docs.expo.dev/versions/latest/sdk/localization/#localizationgetlocales.

Thank you! I've switched to using expo-localization, and it works well with the regional language codes (except for Chinese).

Maybe react-native-localization-settings still has value, as it allows users to switch languages through the system settings.

@auroursa auroursa changed the title Make App language selectable in the device settings Automatically switch app language based on device language. Nov 21, 2024
@auroursa auroursa marked this pull request as ready for review November 21, 2024 13:54
@auroursa
Copy link
Contributor Author

Updated Chinese language code to follow IETF-BCP-47, and now all languages supported by the app are working correctly.

@auroursa auroursa marked this pull request as draft November 21, 2024 14:43
@auroursa
Copy link
Contributor Author

It will break the browser’s automatic language switching behavior. Closing this PR until ready.

@auroursa auroursa closed this Nov 21, 2024
@auroursa auroursa deleted the localization-settings branch November 21, 2024 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants