React Native (runtime only)

Load translations in React Native apps without a WebView overlay.

Scope

Supported	Not supported
Manifest + CDN bundle load	In-context overlay (DOM required)
t() + ICU via useTranslation()	Edit launcher / ?translation_edit=1
setLocale / isReady	Production overlay

Use admin or staging overlay on your web app for copy editing; ship strings to native via the same keys and publish path.

Install

pnpm add @stringpush/react-native @stringpush/runtime-core react react-native

Current npm release: @stringpush/react-native@0.7.0 (lockstep with @stringpush/sdk).

Setup

import { TranslationProvider, useTranslation } from "@stringpush/react-native";
import { Text, View } from "react-native";

export function App() {
  return (
    <TranslationProvider
      applicationId="<uuid from admin>"
      environment="staging"
      locale="en"
      apiKey="trt_…"
      apiBaseUrl="https://api.platform.stringpush.com"
    >
      <Greeting />
    </TranslationProvider>
  );
}

function Greeting() {
  const { t, isReady, locale, setLocale } = useTranslation();

  if (!isReady) {
    return <Text>Loading translations…</Text>;
  }

  return (
    <View>
      <Text>{t("common.greeting")}</Text>
      <Text onPress={() => void setLocale("fr")}>Locale: {locale}</Text>
    </View>
  );
}

Admin checklist

1. Create project + application in admin (same as web).
2. Issue a runtime API key for TranslationProvider — native HTTP clients load manifest + bundles directly (no browser origin allowlist).
3. WebView screens only: if you embed @stringpush/sdk in react-native-webview, add allowed origins for that Web host and follow Staging overlay for in-context editing there.
4. Publish staging, validate copy, then promote and publish production when ready — see Environment release.

Related

• Integration hub — web adapters
• Getting started — admin setup
• Package README on npm — API details