Skip to content
Sonenta

React Native and Expo

On mobile, the provider is the same as on the web: @sonenta/react-i18next. What changes is when the translations arrive, and what happens when there is no network.

That is where the gain is: fixing a piece of text takes no new version and no trip through the stores, because bundles load at runtime.

1. Install the SDK

Section titled “1. Install the SDK”

The same package as on the web. No extra native module.

Fenêtre de terminal
npm i @sonenta/react-i18next

Token storage uses the platform secure store.

2. Wire up the provider

Section titled “2. Wire up the provider”
// App.tsx (Expo / React Native)
import { SonentaProvider } from "@sonenta/react-i18next";


export default function App() {
  return (
    <SonentaProvider
      projectUuid="proj_xxx"
      token={process.env.EXPO_PUBLIC_SONENTA_TOKEN}
      defaultLocale="fr"
    >
      {/* your navigation */}
    </SonentaProvider>
  );
}

3. Freeze a set of bundles for the first start

Section titled “3. Freeze a set of bundles for the first start”

A mobile app can start with no network. sonenta snapshot fetches the published bundles at build time and writes them to disk, so the app has something to show before the first CDN load.

Fenêtre de terminal
npx sonenta snapshot --out ./assets/i18n
import snapshot from "./assets/i18n";


<SonentaProvider projectUuid="proj_xxx" snapshot={snapshot} autoStart>
  {/* … */}
</SonentaProvider>

On the next start, the provider refreshes from the CDN and switches to the published version. If the CDN is unreachable, the API serves the same bundles as a fallback.

Known limit: missing-key detection

Section titled “Known limit: missing-key detection”

Automatic reporting of keys called without a translation does not work in zero-network mode: it needs the snapshot path with autoStart: true. If you cut the network entirely, missing keys are not reported to the dashboard, and you have to find them another way.

That is a limit of the transport, not a configuration mistake: with no network, nothing is sent.

Add-ons

Section titled “Add-ons”

The end-user evaluation and in-context editing add-ons have a /native entry point, which plugs into the same provider:

import { feedbackPlugin } from "@sonenta/feedback/native";


<SonentaProvider
  projectUuid="proj_xxx"
  plugins={[ feedbackPlugin({ onReady: (c) => (ctrl = c) }) ]}
>{/* … */}</SonentaProvider>

Next

Section titled “Next”