AutoLocalise React Native/Expo SDK

This is SDK for AutoLocalise.

A lightweight, efficient auto-translation SDK for React Native and Expo applications. This SDK provides seamless integration for automatic content translation with support for offline mode.

You don't need to prepare any translation files, just provide your API key and the SDK will handle the rest.

Features

• React Native, Expo, and Expo Web support
• Automatic string translation
• Dynamic parameter interpolation
• Persist translation tracking
• Offline mode support
• Nested text formatting support
• Lightweight and efficient
• Automatic storage adapter (AsyncStorage for native, localStorage for web)

Installation

For React Native / Expo (Native)

npm install react-native-autolocalise @react-native-async-storage/async-storage
# or
yarn add react-native-autolocalise @react-native-async-storage/async-storage

For Expo Web

npm install react-native-autolocalise
# or
yarn add react-native-autolocalise

Note: The SDK automatically detects the environment and uses the appropriate storage:

• Native platforms (iOS/Android): Uses @react-native-async-storage/async-storage
• Web platforms: Uses browser localStorage

Usage

1. Initialize the SDK

import { TranslationProvider } from "react-native-autolocalise";

const App = () => {
  const config = {
    apiKey: "your-api-key",
    sourceLocale: "fr",
    targetLocale: "en",
  };

  return (
    <TranslationProvider config={config}>
      <YourApp />
    </TranslationProvider>
  );
};

2. Use the Translation Hook

Basic usage:

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

const MyComponent = () => {
  const { t, loading, error } = useAutoTranslate();

  return (
    <View>
      <Text>{t("Welcome to our app!", false)}</Text>
      <Text>{t("This text will be automatically translated")}</Text>
    </View>
  );
};

Use with nested text formatting:

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

const MyComponent = () => {
  return (
    <View>
      <FormattedText>
        <Text>
          Hello, we <Text style={{ color: "red" }}>want</Text> you to be{" "}
          <Text style={{ fontWeight: "bold" }}>happy</Text>!
        </Text>
      </FormattedText>
      <FormattedText persist={false}>
        Hello,
        <Text style={{ color: "red" }}>World</Text>
      </FormattedText>
    </View>
  );
};

Use with params:

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

const MyComponent = () => {
  const { t } = useAutoTranslate();
  const name = "John";

  return (
    <View>
      <Text>
        {t("Welcome, {{1}}!, Nice to meet you. {{2}}.")
          .replace("{{1}}", name)
          .replace("{{2}}", t("Have a great day!"))}
      </Text>
    </View>
  );
};

Locale Format

The locale format follows the ISO 639-1 language code standard, optionally combined with an ISO 3166-1 country code:

• Language code only: 'en', 'fr', 'zh', 'ja', etc.
• Language-Region: 'en-US', 'fr-FR', 'zh-CN', 'pt-BR', etc.

How to get the locale

React Native

In React Native, you can get the device locale using the Localization API:

import * as Localization from "react-native-localization";
// or
import { NativeModules, Platform } from "react-native";

// Using react-native-localization
const deviceLocale = Localization.locale; // e.g., 'en-US'

// Alternative method using native modules
const deviceLanguage =
  Platform.OS === "ios"
    ? NativeModules.SettingsManager.settings.AppleLocale ||
      NativeModules.SettingsManager.settings.AppleLanguages[0]
    : NativeModules.I18nManager.localeIdentifier;

Expo

In Expo, you can use the Localization API from expo-localization:

npm install expo-localization

import * as Localization from "expo-localization";

// Get the device locale
const locale = Localization.getLocales()[0]?.languageCode;
// For more specific locale including region:
const fullLocale = Localization.getLocales()[0]?.languageTag; // e.g., 'en-US'

Note: When running Expo in a web browser, it will use the browser's locale settings automatically.

API Reference

TranslationProvider Props

| Prop | Type | Description | | ------ | ----------------- | ------------------------------------------------ | | config | TranslationConfig | Configuration object for the translation service |

TranslationConfig

| Property | Type | Required | Description | | ------------ | ------ | -------- | ---------------------------------------- | | apiKey | string | Yes | Your API key for the translation service | | sourceLocale | string | Yes | Source locale for translations | | targetLocale | string | Yes | Target locale for translations |

Tips: When sourceLocale === targetLocale no translation requests will be send.

useAutoTranslate Hook

Returns an object with:

• t: Translation function
• loading: Boolean indicating initialization of static translations
• error: Error object if translation loading failed

Persist and Reference for Editing

The persist parameter controls whether the translation will be saved to the database for review and editing in the dashboard.

• persist: true (default) - Translation is persisted and can be reviewed/edited in the dashboard
• persist: false - Translation is not persisted (useful for dynamic content)

import { useAutoTranslate } from "react-native-autolocalise";
const MyComponent = () => {
  const { t } = useAutoTranslate();
  return (
    <div>
      <h1>{t("Welcome to our app!", false)}</h1>
    </div>
  );
};

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT