AutoLocalise Logo

React Native & Expo Setup

This guide covers React Native and Expo integration with offline-first caching and native performance optimization.

Prerequisites

npm install react-native-autolocalise @react-native-async-storage/async-storage

Note: @react-native-async-storage/async-storage is required for offline caching functionality.

1. Initialize the SDK

Wrap your application with the TranslationProvider:

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

const App = () => {
  const config = {
    apiKey: "your-api-key",
    sourceLocale: "en", // Your app's original language
    targetLocale: "es", // Language to translate to
    // cacheTTL: 24, // Cache validity in hours (optional, defaults to 24)
  };

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

2. Basic Translation

Use the useAutoTranslate hook in your components:

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

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

  if (loading) {
    // Optional
    return (
      <View style={styles.loading}>
        <Text>Loading translations...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{t("Welcome to our app!")}</Text>
      <Text style={styles.description}>
        {t("This text will be automatically translated")}
      </Text>
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>{t("Get Started")}</Text>
      </TouchableOpacity>
    </View>
  );
};

3. Advanced Features

Dynamic Content with Variables

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

const UserProfile = ({ userName, score }) => {
  const { t } = useAutoTranslate();

  return (
    <View>
      <Text style={styles.greeting}>
        {t("Hello, {{1}}!").replace("{{1}}", userName)}
      </Text>
      <Text style={styles.score}>
        {t("Your score: {{1}} points").replace("{{1}}", score.toString())}
      </Text>
    </View>
  );
};

Nested Text Formatting

For complex text formatting that needs to be preserved:

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

const FormattedComponent = () => {
  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}>
        <Text>
          This is <Text style={{ fontStyle: "italic" }}>dynamic content</Text>
        </Text>
      </FormattedText>
    </View>
  );
};

4. Expo Integration

Getting Device Locale

Use Expo's localization API to detect user's preferred language:

import * as Localization from "expo-localization";
import { useState, useEffect } from "react";
import { TranslationProvider } from "react-native-autolocalise";

const ExpoApp = () => {
  const [locale, setLocale] = useState("en");

  useEffect(() => {
    // Get the device locale
    const deviceLocale = Localization.getLocales()[0]?.languageCode || "en";
    setLocale(deviceLocale);
  }, []);

  const config = {
    apiKey: "your-api-key",
    sourceLocale: "en",
    targetLocale: locale,
  };

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

Locale Switching

import { useState } from "react";
import { View, Text } from "react-native";
import { Picker } from "@react-native-picker/picker";
import { useAutoTranslate } from "react-native-autolocalise";

const LanguageSwitcher = ({ onLanguageChange }) => {
  const { t } = useAutoTranslate();
  const [selectedLanguage, setSelectedLanguage] = useState("en");

  const handleLanguageChange = (languageCode) => {
    setSelectedLanguage(languageCode);
    onLanguageChange(languageCode);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.label}>{t("Select Language:")}</Text>
      <Picker
        selectedValue={selectedLanguage}
        onValueChange={handleLanguageChange}
        style={styles.picker}
      >
        <Picker.Item label={t("English")} value="en" />
        <Picker.Item label={t("Spanish")} value="es" />
        <Picker.Item label={t("French")} value="fr" />
        <Picker.Item label={t("German")} value="de" />
        <Picker.Item label={t("Chinese")} value="zh" />
      </Picker>
    </View>
  );
};

5. Offline Support

AutoLocalise automatically caches translations using AsyncStorage for offline functionality:

import { useAutoTranslate } from "react-native-autolocalise";
import { View, Text } from "react-native";
import NetInfo from "@react-native-netinfo/netinfo";
import { useState, useEffect } from "react";

const OfflineAwareComponent = () => {
  const { t, loading, error } = useAutoTranslate();
  const [isConnected, setIsConnected] = useState(true);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      setIsConnected(state.isConnected);
    });

    return unsubscribe;
  }, []);

  return (
    <View>
      {!isConnected && (
        <View style={styles.offlineBanner}>
          <Text style={styles.offlineText}>
            {t("You're offline. Using cached translations.")}
          </Text>
        </View>
      )}

      <Text style={styles.content}>
        {t("This content works online and offline!")}
      </Text>
    </View>
  );
};

6. Best Practices

User Experience

  • Loading states: Always show loading indicators
  • Offline support: Inform users when offline with cached content
  • Language switching: Provide clear language selection UI
  • Text expansion: Account for different text lengths across languages

Development Tips

  • Test offline: Verify functionality without network
  • Multiple devices: Test on different screen sizes and OS versions
  • Error boundaries: Implement error boundaries for translation failures
  • Performance monitoring: Monitor translation loading times

Next Steps