React Native SDK

React Native applications can use the same JavaScript SDK and React SDK packages as React web applications.

The React Native guide focuses on mobile-specific concerns: where datafiles come from, how to cache them, how to pass platform context, and how to apply locale direction.

Install#

Command

$ npm install --save @messagevisor/sdk @messagevisor/react

If your runtime lacks some Intl APIs used by your formats, add the appropriate polyfills for your React Native stack.

ICU formatting relies on Intl.NumberFormat, Intl.DateTimeFormat, Intl.PluralRules, and related APIs depending on which helpers you call. See the ICU module for more details.

Provider setup#

React Native

import { useMemo } from "react";
import { Text, View } from "react-native";
import { createMessagevisor } from "@messagevisor/sdk";
import { createICUModule } from "@messagevisor/module-icu";
import { MessagevisorProvider, useTranslation } from "@messagevisor/react";
import datafile from "./datafiles/messagevisor-mobile-en-US.json";
function Welcome() {
  const message = useTranslation("dashboard.welcome", { name: "Ada" });
  return <Text>{message}</Text>;
}
export function App() {
  const m = useMemo(
    () =>
      createMessagevisor({
        datafile,
        context: { platform: "ios" },
        modules: [createICUModule({ ignoreTags: false })],
      }),
    []
  );
  return (
    <MessagevisorProvider instance={m}>
      <View>
        <Welcome />
      </View>
    </MessagevisorProvider>
  );
}

Use React SDK for the full provider and hook reference.

Bundled vs fetched datafiles#

React Native apps usually choose one of two patterns:

bundle a starter datafile with the app for offline-safe startup
fetch newer datafiles from a CDN and store them in app-managed cache

Messagevisor does not prescribe the storage layer. Use whatever your app already uses, such as AsyncStorage, SQLite, secure storage, or a file cache.

React Native

async function refreshDatafile(m, locale) {
  const response = await fetch(
    `https://cdn.yoursite.com/messagevisor/messagevisor-mobile-${locale}.json`
  );
  const datafile = await response.json();
  m.setDatafile(datafile);
  m.setLocale(locale);
  // Persist with your app's preferred storage layer.
}

Platform context#

Use targets to keep datafiles small:

targets/mobile.yml

includeMessages:
  - "*"
locales:
  - en-US
  - nl-NL
context:
  platform: ios

If iOS and Android need different copy from the same datafile, pass platform context:

m.translate("auth.installApp", undefined, {
  context: { platform: Platform.OS },
});

Locale switching#

For locale switching:

fetch or read the locale datafile
call setDatafile(datafile)
call setLocale(locale)

Reactive hooks such as useTranslation(), useLocale(), and useDirection() update after the SDK snapshot changes.

RTL direction#

Locales can define direction: rtl. React Native layout still needs application-level direction handling:

import { I18nManager } from "react-native";
import { useDirection } from "@messagevisor/react";
function DirectionGate({ children }) {
  const direction = useDirection();
  const isRTL = direction === "rtl";
  if (I18nManager.isRTL !== isRTL) {
    I18nManager.allowRTL(isRTL);
    I18nManager.forceRTL(isRTL);
  }
  return children;
}

Some React Native direction changes require an app reload to apply globally. Messagevisor provides the direction metadata; your mobile shell decides how to apply it.

Rich text#

Rich text tag handlers can return React Native elements:

<MessagevisorProvider
  instance={m}
  defaultRichTextElements={{
    strong: (chunks) => <Text style={{ fontWeight: "700" }}>{chunks}</Text>,
  }}
>
  <App />
</MessagevisorProvider>