DEV Community: Mike Hamilton

React native (+expo): Automatic machine translation

Mike Hamilton — Tue, 07 Feb 2023 15:48:51 +0000

We are going to setup a simple machine translation pipeline for an expo-based React Native app. I am currently playing around with expo-router, so this will be based on using expo, but the steps are exactly the same if you were using a regular, react-native init based project.

First, we are going to add some dependencies. The actual internationalization package we are going to use is i18next and it's react counterpart, react-i18next. Although the new(ish) Hermes JS engine now supports Intl on both Android and iOS, unfortunately the support isn't complete. To make matters worse, the old JS engine's (JSC) Intl support differs between iOS and Android. That being said, all we need to do is load a few Intl polyfills that satisfy i18next.



yarn add i18next react-i18next @formatjs/intl-locale @formatjs/intl-pluralrules @formatjs/intl-displaynames

Now that we have those installed, we need to create a directory and a json file for each of our target languages. In the root of your project, create a locales folder, and inside that a folder for each language you are going to translate your app into. These need to be named using standard language codes. In this tutorial we'll use English (en) and Spanish (es), so we need to make locales/en and locales/es.

As for the json files, they'll be named locales/en/translation.json and locales/es/translation.json.

Next, in index.js we need to initialize i18next and load the polyfills. Note that I am using getLocales from expo-localization, but this could really be anything that returns the language code for the users default language preference.



npx expo install expo-localization



import { Platform } from "react-native";

const isAndroid = Platform.OS === "android";
const isHermes = !!global.HermesInternal;

if (isAndroid || isHermes) {
  require("@formatjs/intl-locale/polyfill");

  require("@formatjs/intl-pluralrules/polyfill");
  require("@formatjs/intl-pluralrules/locale-data/en");
  require("@formatjs/intl-pluralrules/locale-data/es");

  require("@formatjs/intl-displaynames/polyfill");
  require("@formatjs/intl-displaynames/locale-data/en");
  require("@formatjs/intl-displaynames/locale-data/es");
}

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// Could be anything that returns default preferred language
import { getLocales } from "expo-localization";

// Import all the languages you want here
import en from "./locales/en/translation.json";
import es from "./locales/es/translation.json";

i18n.use(initReactI18next).init({
  // Add any imported languages here
  resources: {
    en: {
      translation: en,
    },
    es: {
      translation: es,
    }
  },
  lng: getLocales()[0].languageCode,
  fallbackLng: "en",  // This is the default language if none of the users preffered languages are available
  interpolation: {
    escapeValue: false, // https://www.i18next.com/translation-function/interpolation#unescape
  },
  returnNull: false,
});

Now we have that setup, let's actually use them. Any time you have a string you want translated, you just wrap it in the t function that comes from the useTranslation hook. Here's an example component that just has the text "Hello!" (or "Hola!") in it. We might as well add some buttons to switch languages, but obviously this is just for the demo and you'll need to add something similar into your app's preferences somewhere.



import {View, Text, Button} from 'react-native'

import { useTranslation } from "react-i18next";

const Hello = () => {
  const { t, i18n } = useTranslation();

  return (
    <View>
      <Text>{t("Hello!")}</Text>
      <Button title="Yo hablo Español" onPress={() => i18n.changeLanguage('es') />
      <Button title="I speak English" onPress={() => i18n.changeLanguage('en') />
    </View>
  )
}

export default Hello

Then, back in our translation.json files, we need to add an entry for "Hello!". The key for each translation is going to be the English string, so all key/value pairs in locales/en/translation.json are just going to be the same, where as in locales/es/translation.json the key is the English string and the value is the translation.

locales/en/translation.json



{
  "Hello!": "Hello!"
}

locales/es/translation.json



{
  "Hello!": "Hola!"
}

And now back in our app if you hit the buttons the language should change.

Automate it! 🚀🚀

That was nice and easy, but obviously keeping the translation files up to date by hand will be a pain, so let's automate that! We are going to use a babel plugin that scans all our code for those t("Im a string") functions and extracts them into our english translation.json file for us.

Step one is to remove what we already added to both our translation.json files and make them empty objects ({}). Then, add the development dependency.



yarn add -D babel-plugin-i18next-extract

and in babel.config.js we need to configure the i18next-extract plugin.



    plugins: [
      [
        "i18next-extract",
        {
          locales: ["en"],
          outputPath: "locales/{{locale}}/{{ns}}.json",
          keyAsDefaultValue: ["en"],
          keySeparator: null,
          nsSeparator: null,
        },
      ],
      // ...other plugins here
    ],

Now, restart the dev server and magically the english translation file should be populated. Notice we are only doing the english locale, this is on purpose, the next step will populate and translate the other languages.

Next (and final!) step is to automatically translate our translation json files. We are going to use a package named json-autotranslate to do that. json-autotranslate supports a number of translation providers but we are going to be using the DeepL-free provider. Head on over to their web site and get an api key to use.



yarn add -D json-autotranslate

and in package.json in the script section add add:



"translate": "json-autotranslate -i locales -m i18next -s deepl-free -c paste-api-key-here

Now, every time we add a new string to our app, the babel plugin will automatically populate the english translation file with it. Then, all we have to do is run yarn translate and json-autotranslate will take care of populating the spanish file and translating it using one of the providers.

Some pointers

Want to add another language? All you have to do is add the folder and translation.json file and import it in index.js. You will have to update the polyfill requires in index.js as well.

Lets say I wanted to add German, I would mkdir -p locales/de and create the file locales/de/translation.json with the content of {}. I'd import that file into index.js and make sure to remember to add it to the resources: { .. } object and I'd add the required polyfill requires in index.js. Then all I'd have to do is run yarn translate and that would be it!

Not using English as the default language?
in babel.config.js change the locales and keyAsDefaultValue values to which ever language code you want as the default language. Then in index.js change fallbackLng to that language code as well.

Bonus

Here's a component that gets a list of all the languages you've translated your app into and allows the user to switch between them. It retrieves the proper name of the language using the Intl api.

If you are using expo:



npx expo install @react-native-picker/picker

If you are using react native



yarn add @react-native-picker/picker
npx pod-install



import { useState } from "react";
import { View, Text } from "react-native";

import { useTranslation } from "react-i18next";

import { Picker } from "@react-native-picker/picker";

export default function LanguagePicker() {
  const [selectedLanguage, setSelectedLanguage] = useState("en");
  const { t, i18n } = useTranslation();

  return (
    <View>
      <Text>{t("Choose a language")}</Text>
      <Picker
        style={{ flex: 1 }}
        selectedValue={selectedLanguage}
        onValueChange={(itemValue) => {
          setSelectedLanguage(itemValue);
          i18n.changeLanguage(itemValue);
        }}
      >
        {Object.keys(i18n.options.resources || [])
          .sort()
          .map((lang) => {
            const nameGenerator = new Intl.DisplayNames(lang, {
              type: "language",
            });
            const displayName = nameGenerator.of(lang);

            return <Picker.Item key={lang} label={displayName} value={lang} />;
          })}
      </Picker>
    </View>
  );
}

Adding web support to a React Native project in 2023

Mike Hamilton — Wed, 11 Jan 2023 20:36:46 +0000

Adding web support to React Native in 2023

Hi! I'm going to go through the process of adding web support to a React Native project in 2023. The year doesn't really matter, but there's a lot of older information out there so having a reference in time can help. My goal is to remain as close as possible to the structure of a bare React Native project created with the standard react-native init command. I am also going to try and "touch" as few files as possible from the React Native project so that it's easier to use the React Native Upgrade Helper in the future to upgrade React Native versions.

There are two obvious paths to go down to accomplish adding web support. The first option is to use a package named react-scripts. This is what the create-react-app command that is widely used in the React world uses under the hood. It bundles up webpack and the entire build and packaging pipeline and hides it behind a few nice scripts. While it works pretty great out of the box, unfortunately when it comes time to change the webpack or babel configs, for example, it makes it really hard to do so. And trust me, there will come a time when you'll need to do that and then you'll be kicking yourself for going with this option.

The other downside is that react-scripts expects all your app's source code to be in a src/ folder, and by default that's not how a React Native project is setup. It's not too hard to make the changes to keep react-scripts happy, but it involves moving a ton of files around, and when it comes time to upgrade React Native, that's going to cause tears.

Soo....we are going to roll our own setup. It's really pretty straight forward.

Create a new project

It's always easier to do surgery on a brand new project, but these instructions should work for any React Native project. I chose to use the typescript template, but if you're not into types, feel free to use plain javascript. Oh, and don't forget to replace myproject with a name of your choosing!

Update
As of React Native 0.71, typescript is the default for new projects. You don't need to add the --template react-native-template-typescript flag anymore.

Typescript:

npx react-native init myproject

Javascript:
There's no default template that uses Javascript anymore. The default typescript template is configured to continue working with Javascript, so just renamed any .tsx files to .jsx (for example, App.tsx -> App.jsx).

Add the dependencies

We only need to add two dependencies (and a whole bunch of dev dependencies). The react-dom dependency's version should match the version of the react version that react-native init chose for us. Open up package.json and check what version is being used. As of the writing of this blog and using React Native 0.71.0, the version of React is 18.1.0.

yarn add react-native-web react-dom@18.1.0

And now for the dev dependences

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin react-refresh @pmmmwh/react-refresh-webpack-plugin file-loader url-loader babel-loader babel-plugin-react-native-web @types/react-dom

I'm not a big fan of adding random dependencies copied out of a blog post, so I'm going to go through each one and explain what it does.

react-native-web the magical dependency that allows us to use the React Native API on the web.
react-dom this adds support for "webpages" to React. Since we scaffolded out a project with react-native init, we need to add this.
webpack This is a Javascript bundler. It's going to take the dozens/hundreds/thousands of individual javascript files and bundle them up into a nice set of files. It does a ton of other stuff too. React Native uses the metro bundler to accomplish the same thing on the native side. We'll end up with two bundlers working their magic in our project (metro for iOS/Android, and webpack for the web).
webpack-cli This is a CLI for webpack, used so it's possible to call webpack from package.json scripts (more on this later).
webpack-dev-server This is a plugin for webpack that starts up a web server so we can see the output of the code as it's being worked on. This works in conjunction with react-refresh.
html-webpack-plugin This injects the javascript bundle (that webpack creates) into a script tag in the index.html file
react-refresh This reacts to changes in our code and "recompiles" it on the fly so we get to nearly instantly see the changes as soon as save is hit.
@pmmmwh/react-refresh-webpack-plugin Plugin for webpack so react-refresh and webpack know how to play nicely together
file-loader url-loader babel-loader These three dependencies are "loaders" for webpack. A loader lets webpack know how to handle certain types of files as well as use other utilities (such as babel) as a build step
babel-plugin-react-native-web This is a babel plugin that will help keep the bundle size down by stripping out unused react-native-web components. It's also going to create an alias from 'react-native' to 'react-native-web' so we can still import react-native components like normal on the web
@types/react-dom This is just types for react-dom and is option if not using typescript

Create some directories and files

In a React Native project, you have ios and android folders to hold the native specific files and configurations. Guess what? We're going to make a web folder (and a public subfolder)!

mkdir -p web/public

Web support in index.js

In a React Native project, index.js is the entry file. This means the bundler (webpack or metro) will open this file first, and work it's way through the tree of imports until the app is completely bundled.

The way metro (React Native's bundler for native platforms) and webpack (bundler for the web) work are a bit different, so we need to add some web specific code to index.js. In React (for web), you will have a html file, usually index.html, that has something like <div id="root" /> in it. React will find that <div> with the specific id (in this case "root") and replace it with our app.

NOTE: React recently changed how to initialize the root element (for React version 18.0.0 and higher). If you are using React 17.x, it's going to be a bit different.

For React > 18.0.0

Somewhere near the top of index.js, add these imports:

import {createRoot} from 'react-dom/client';
import {Platform} from 'react-native';

and then at the bottom of the file, after the AppRegistry.registerComponent(appName, () => App); line, add this block. This will check if the platform is web, and then tell it which element id React should look for in the index.html file and then to render our app where that <div> is.

if (Platform.OS === 'web') {
  const root = createRoot(document.getElementById('root'));
  root.render(<App />);
}

For React < 18 (17.x.x and below)

Somewhere near the top of index.js, place the following:

import {Platform} from 'react-native';

At the bottom of index.js, place the following:

if (Platform.OS === 'web') {
  AppRegistry.runApplication('App', {
    rootTag: document.getElementById('root'),
  });
}

Create the index file in web/public/index.html

As I mentioned above, React (on the web) needs an index.html file that contains an element with a specific id. React will replace that element with our rendered app. All it technically needs is the <div id="root" /> tag as well as the small CSS in the <head> tag that lets react-native-web be "full screen".

In web/public/index.html place the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>React Native Web</title>
    <meta name="description" content="Your app description" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link
      rel="alternate icon"
      href="/favicon.ico"
      type="image/png"
      sizes="16x16" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
    <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
    <meta name="theme-color" content="#ffffff" />
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        overflow: hidden;
      }
      #root {
        display: flex;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

Webpack config

Now we just need to create the webpack config in web/webpack.config.js. Webpack can be difficult (or impossible!) to master, but there are a few key concepts that can make reasoning about it much easier. Webpack is a bundler, so it takes a bunch of code, images and files from different sources and concatenates it all into one file (which can then be split into chunks to keep the size managable). It accomplishes this by using loaders, which are sort of like a plugin that's designed to manage different file types. In the config below we have three loaders, a babel loader, an url loader and a file loader. The url loader is setup to handle images, the file loader is handling fonts, and the babel loader is handing all javascript/typescript code. A loader can simply copy a file from one place to another (such as the loader handling fonts below) or it can transform that asset before handing it back to webpack to bundle. In the case of the babel loader, it's actually transpiling our code into a format we have defined in babel.config.js. In an effort to keep the build systems of the native side (metro) and the webside (webpack) in sync, the babel loader is actually importing babel.config.js but adding in the react-native-web babel plugin. This means that if you add a babel plugin to babel.config.js, both the native and web build systems will pick it up.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const appDirectory = path.resolve(__dirname, '../');

const babelConfig = require('../babel.config');

// Babel loader configuration
const babelLoaderConfiguration = {
  test: /\.(tsx|jsx|ts|js)?$/,
  exclude: [
    {
      and: [
        // babel will exclude these from transpling
        path.resolve(appDirectory, 'node_modules'),
        path.resolve(appDirectory, 'ios'),
        path.resolve(appDirectory, 'android'),
      ],
      // whitelisted modules to be transpiled by babel
      not: [],
    },
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // Presets and plugins imported from main babel.config.js in root dir
      presets: babelConfig.presets,
      plugins: ['react-native-web', ...(babelConfig.plugins || [])],
    },
  },
};

// Image loader configuration
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
      esModule: false,
    },
  },
};

// File loader configuration
const fileLoaderConfiguration = {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/',
      },
    },
  ],
};

module.exports = argv => {
  return {
    entry: path.resolve(appDirectory, 'index'),
    output: {
      clean: true,
      path: path.resolve(appDirectory, 'web/dist'),
      filename: '[name].[chunkhash].js',
      sourceMapFilename: '[name].[chunkhash].map',
      chunkFilename: '[id].[chunkhash].js',
    },
    resolve: {
      extensions: [
        '.web.js',
        '.js',
        '.web.ts',
        '.ts',
        '.web.jsx',
        '.jsx',
        '.web.tsx',
        '.tsx',
      ],
    },
    module: {
      rules: [
        babelLoaderConfiguration,
        imageLoaderConfiguration,
        fileLoaderConfiguration,
      ],
    },
    plugins: [
      // Fast refresh plugin
      new ReactRefreshWebpackPlugin(),

      // Plugin that takes public/index.html and injects script tags with the built bundles
      new HtmlWebpackPlugin({
        template: path.resolve(appDirectory, 'web/public/index.html'),
      }),

      // Defines __DEV__ and process.env as not being null
      new webpack.DefinePlugin({
        __DEV__: argv.mode !== 'production' || true,
        process: {env: {}},
      }),
    ],
    optimization: {
      // Split into vendor and main js files
      splitChunks: {
        cacheGroups: {
          commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'initial',
          },
        },
      },
    },
  };
};

Add some package.json scripts

Add these scripts to the scripts section of package.json. Running yarn web will start up the dev server and running yarn web:build will build a production version and place it into web/dist.

"web": "webpack-dev-server --config ./web/webpack.config.js --mode development",
"web:build": "webpack --config ./web/webpack.config.js --mode production",

Replace App.tsx (or App.js) with something

By default, React Native will give you a App.tsx (or App.js) that has a "demo" page in it. There are some components not supported on the web. This is going to contain your app eventually, so just go ahead and replace the entire default App.[tsx/jsx] file's contents with something like below.

import React from 'react';
import {View, Text} from 'react-native';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'purple',
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
};

export default App;

Tada!

That's it! We added some dependencies, created a web folder with some files in it but ended up only modifying two already existing files, index.js and package.json. This means when it comes time to upgrade version of React Native, it's going to be much, much simpler.

If you haven't upgraded before, the process is basically looking at a diff between your current project's version and the version you are upgrading to. You then upgrade all the differences by hand. Since we've only slightly modified two files from the default project, this process is going to be as painless as possible.

Go and run yarn web and the dev server should start up on http://localhost:8080. Make some changes and see the react-refresh server in action. For extra fun, run yarn web, yarn ios, and yarn android all together and see how cool it is to make a change and see it update on all three platforms at once! I'm not responsible if your computer starts on fire, though!