react-native : multi language support set up, use device locale, react-native-i18n use example

Multi language prepare

.\app\i18n\locales\en.js

export default {
  wcsqa: 'Westminster Shorter Catechism Q&A'
};

.\app\i18n\locales\zh.js

export default {
  wcsqa: '威斯敏斯德小要理问答'
};

.\app\i18n\i18n.js

import I18n from 'react-native-i18n';
import en from './locales/en';
import zh from './locales/zh';

I18n.fallbacks = true;

I18n.translations = {
  en,
  zh
};

export default I18n;

Usage

App.js

import ReactNativeLanguages from 'react-native-languages';
import I18n from './app/i18n/i18n'

ReactNativeLanguages.addEventListener('change', ({ language }) => {
  I18n.locale = language;
});

render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <Text style={styles.title}>
            {I18n.t('wcsqa')}
          </Text>
          ... // other contents
        </View>
        ... // other contents
      </View>
    )
}

No Image, No Truth

Refers

https://github.com/react-community/react-native-languages
https://github.com/AlexanderZaytsev/react-native-i18n
https://errong.win/language-code-for-chinese-should-be-start-with-zh/

❤️ Support This Blog

---

If this post helped you, you can support my writing with a small donation. Thank you for reading.

---

Coffee ☕ Thanks 🙏 Extra Support ❤️