Skip to main content

Installation

Get started with the LiveI18n Expo SDK in your Expo application.

Prerequisites​

  • Expo SDK 47+
  • Node.js 16+ and npm/yarn
  • LiveI18n account with API credentials

Package Installation​

npx expo install @livei18n/react-native-expo-sdk expo-localization @react-native-async-storage/async-storage

npm​

npm install @livei18n/react-native-expo-sdk expo-localization @react-native-async-storage/async-storage

yarn​

yarn add @livei18n/react-native-expo-sdk expo-localization @react-native-async-storage/async-storage

Dependencies​

The following packages are required for full functionality:

  • expo-localization - For automatic locale detection and RTL support
  • @react-native-async-storage/async-storage - For persistent caching

Account Setup​

1. Create Account​

Sign up at dashboard.livei18n.com and create your account.

2. Get API Credentials​

  1. Navigate to your dashboard
  2. Go to API Keys section
  3. Click Generate New Key
  4. Copy your API Key and Customer ID

3. Environment Variables​

Create a .env.local file in your project root:

# LiveI18n Configuration
EXPO_PUBLIC_LIVEI18N_API_KEY=your-api-key-here
EXPO_PUBLIC_LIVEI18N_CUSTOMER_ID=your-customer-id-here

Security Note: Use EXPO_PUBLIC_ prefix for Expo projects to ensure proper bundling while keeping credentials secure in production.

Basic Configuration​

Wrap Your App with the Provider​

Wrap your main App component with the LiveI18nProvider:

import React from 'react';
import { LiveI18nProvider } from '@livei18n/react-native-expo-sdk';
import YourApp from './YourApp';

export default function App() {
  return (
    <LiveI18nProvider config={{
      apiKey: process.env.EXPO_PUBLIC_LIVEI18N_API_KEY!,
      customerId: process.env.EXPO_PUBLIC_LIVEI18N_CUSTOMER_ID!
    }}>
      <YourApp />
    </LiveI18nProvider>
  );
}

Advanced Configuration​

import React from 'react';
import { LiveI18nProvider } from '@livei18n/react-native-expo-sdk';
import YourApp from './YourApp';

export default function App() {
  return (
    <LiveI18nProvider config={{
      apiKey: process.env.EXPO_PUBLIC_LIVEI18N_API_KEY!,
      customerId: process.env.EXPO_PUBLIC_LIVEI18N_CUSTOMER_ID!,
      
      // Optional configuration
      cache: {
        entrySize: 1000,      // Number of cached entries (default: 500)
        ttlHours: 24,         // Cache TTL in hours (default: 1)
        persistent: true,     // Use AsyncStorage (default: true)
        preload: true         // Preload cache on startup (default: false)
      },
      
      defaultLanguage: 'en-US'              // Default language (optional)
    }}>
      <YourApp />
    </LiveI18nProvider>
  );
}

Verification​

Test your setup with a simple component inside your app (which is wrapped by the provider):

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

export default function TestComponent() {
  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 16, marginBottom: 10 }}>
        <LiveText>Hello World!</LiveText>
      </Text>
      <Text style={{ fontSize: 16 }}>
        <LiveText context="greeting">Welcome to our app</LiveText>
      </Text>
    </View>
  );
}
info

Remember that LiveText components must be used inside the LiveI18nProvider. If you get an error, make sure your TestComponent is rendered within your app that's wrapped by the provider.

If you see the text displayed (even in English initially), the SDK is working correctly.

Platform-Specific Setup​

Expo Managed Workflow​

No additional setup required. The SDK works out of the box.

Expo Bare Workflow​

The SDK should work without additional configuration. AsyncStorage is handled automatically.

Troubleshooting​

Common Issues​

"Unable to resolve '@livei18n/react-native-expo-sdk'"

  • Ensure you've run npm install or yarn install
  • Clear node_modules and package-lock.json, then reinstall
  • Check that you're using the correct package name

"Invalid API key or customer ID"

  • Verify your credentials in the LiveI18n dashboard
  • Check that environment variables are properly set
  • Ensure you're using the correct variable names with EXPO_PUBLIC_ prefix

Metro bundler issues

  • Clear Metro cache: npx expo start --clear

Getting Help​

If you encounter issues:

  1. Check the console for error messages
  2. Verify your API credentials in the dashboard
  3. Try the basic example above
  4. Check our best practices guide
  5. Contact support or join our Discord

Next Steps​

Now that you have the SDK installed and configured:

  1. Learn Basic Usage - Start translating text
  2. Try the Expo demo - Complete working example
  3. Configure Caching - Optimize performance