jonathanpalma / react-native-simple-i18n

Small i18n lib for react-native based on react-native-localize, i18n-js and lodash.memoize

react-native-simple-i18n 🌎

Small i18n lib for react-native based on react-native-localize, i18n-js and lodash.memoize

This library was inspired by How to use React Native Localize in React Native apps (written by Aman Mittal) so please go and leave this guy some 👏.

Disclaimer: This library only supports translations, it does NOT support cultural settings (currency, dates, times, etc)

Getting Started

Peer Dependencies

• react: 16.8.0+
• react-native: 0.59.0+
• react-native-localize: 1.3.4+

Installation

npm install -S react-native-simple-i18n

How to use it

App.tsx

import React from 'react';
+ import { I18nProvider, useI18nProvider } from 'react-native-simple-i18n';
import ReduxProvider from 'src/components/ReduxProvider';
import Main from 'src/components/Main';

+ const messages = {
+   en: () => require('src/i18n/en.json'),
+   es: () => require('src/i18n/es.json'),
+   fr: () => require('src/i18n/fr.json'),
+ };

function App() {
+ const i18n = useI18nProvider(messages);
  return (
    <>
      <ReduxProvider>
+       <I18nProvider value={i18n}>
          <Main />
+       </I18nProvider>
      </ReduxProvider>
    </>
  );
}

export default App;

src/i18n/es.json

{
  "active": "Activo",
  "inactive": "Inactivo",
  "unknown": "Desconocido"
}

src/components/Main.tsx

import React from 'react';
import { Text, View } from 'react-native';
+ import { useI18n } from 'react-native-simple-i18n';

function Main() {
+ const { translate } = useI18n();
  return (
    <View>
      <Text>
+        {translate('active')}
      </Text>
    </View>
  );
}

export default Main;

License

MIT © jonathanpalma