Package Exports

react-native-simple-i18n

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-simple-i18n) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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;