Skip to main content

React Native

This section shows the project setup mode in React Native. As you might expect, many sections are shared between React Native and React.

info

Before proceeding, note that the code you'll see in this section has already been implemented in the examples/react-native folder of the GitHub repo. Click here to find out more.

Setup#

caution

The tutorial assumes that the React Native environment is already configured. If it isn't, you can configure the environment by following the official documentation.

Initialize a React Native Project with Typescript by launching the following command:

npx react-native init AwesomeTSProject --template react-native-template-typescript

Install React Native Text Localizer#

In order to install text-localizer in react-native, run:

npm install react-native-text-localizer

If you're on iOS, make sure also to run:

cd ios && pod install

Strings#

Before proceeding with the usage of react-native-text-localizer, it's necessary to create the translation files.

This section is identical for React and React Native.

Context Definition#

Once the translation files have been created, it's essential to create a React Context that allows access to all of them.

This section is identical for React and React Native.

Usage#

To be able to use react-native-text-localizer it is needed to:

Below is the code, which is mainly an adaptation of the code used for React:

src/App.tsx
import React from 'react';import { StyleSheet, Text, View } from 'react-native';import {  TranslationsProvider,  useTranslations,  useTranslationsState,} from 'react-native-text-localizer';import { translationsContext } from './l10n';
const MainScreen: React.FC = () => {  const { welcome } = useTranslations(translationsContext);  const { isLoading } = useTranslationsState(translationsContext);
  if (isLoading) {    return null;  }
  return (    <View style={styles.container}>      <Text>{welcome}</Text>    </View>  );};
const App = () => {  return (    <TranslationsProvider context={translationsContext} language={'us'}>      <MainScreen />    </TranslationsProvider>  );};
const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',  },});
export default App;