Skip to main content

Expo SDK

The LiveI18n Expo SDK provides seamless integration with Expo applications, featuring optimized mobile caching with AsyncStorage persistence and automatic locale detection.

Overview​

The Expo SDK is designed specifically for Expo applications with features tailored to the Expo ecosystem:

Key Features​

  • 🚀 Hybrid Caching: Fast in-memory LRU cache + AsyncStorage persistence
  • 📱 Mobile Optimized: Automatic locale detection using device settings
  • ⚡ Zero Config: Works out of the box with sensible defaults
  • 🔧 TypeScript: Full TypeScript support with complete type definitions
  • 🌍 Expo Compatible: Fully compatible with Expo managed and bare workflows
  • 💾 Offline Ready: Persistent cache survives app restarts

Performance​

  • Memory Cache: < 1ms response time for cached translations
  • AsyncStorage Cache: ~5ms response time for persistent cache hits
  • Network Requests: 100-500ms for new translations
  • Cache Size: 500 entries by default (customizable), 1-hour TTL by default (customizable)
  • Preload: Up to 50 cached entries loaded on app startup

Quick Start​

Installation​

npm install @livei18n/react-native-expo-sdk

Basic Setup​

import React from 'react';
import { View, Text, Button } from 'react-native';
import { LiveText, LiveI18nProvider, useLiveI18n } from '@livei18n/react-native-expo-sdk';

function DemoContent() {
  const { updateDefaultLanguage } = useLiveI18n();

  const changeLanguage = (language: string) => {
    updateDefaultLanguage(language);
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Text style={{ fontSize: 24, marginBottom: 20 }}>
        <LiveText context="greeting" tone="friendly">
          Welcome to our Expo app!
        </LiveText>
      </Text>
      
      <Button title="Español" onPress={() => changeLanguage('es-ES')} />
      <Button title="Français" onPress={() => changeLanguage('fr-FR')} />
      <Button title="English" onPress={() => changeLanguage('en-US')} />
    </View>
  );
}

export default function App() {
  return (
    <LiveI18nProvider config={{
      apiKey: 'your-api-key',
      customerId: 'your-customer-id'
    }}>
      <DemoContent />
    </LiveI18nProvider>
  );
}

Core Concepts​

LiveText Component​

The <LiveText> component automatically translates its children:

<LiveText>Hello World</LiveText>
<LiveText context="navigation">Home</LiveText>
<LiveText tone="formal" context="business">Welcome</LiveText>

Global Language Management​

Update the default language for the entire app using the hook:

import { useLiveI18n } from '@livei18n/react-native-expo-sdk';

function LanguageSettings() {
  const { updateDefaultLanguage, defaultLanguage } = useLiveI18n();

  // Change language globally
  const changeLanguage = (language: string) => {
    updateDefaultLanguage(language);
  };

  return (
    <Text>Current language: {defaultLanguage}</Text>
  );
}

Architecture​

The Expo SDK uses a hybrid caching architecture optimized for Expo applications:

┌─────────────────────────────────────┐
│             Expo App                │
│                                     │
│   ┌─────────────────────────────┐   │
│   │        LiveText             │   │
│   │      Components             │   │
│   └─────────────────────────────┘   │
│                │                    │
│                ▼                    │
│   ┌─────────────────────────────┐   │
│   │      LiveI18n SDK           │   │
│   │                             │   │
│   │  Memory Cache (LRU)         │   │
│   │  ├─ 500 entries             │   │
│   │  ├─ 1-hour TTL              │   │
│   │  └─ < 1ms access            │   │
│   │                             │   │
│   │  AsyncStorage Cache         │   │
│   │  ├─ Persistent storage      │   │
│   │  ├─ Survives app restart    │   │
│   │  ├─ ~5ms access             │   │
│   │  └─ Auto-sync with memory   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘
                │
                ▼ HTTPS
┌─────────────────────────────────────┐
│         LiveI18n API                │
│                                     │
│  Redis Cache (24-hour TTL)          │
│  AI Translation Service             │
└─────────────────────────────────────┘

Next Steps​

Need Help?​