Installation

Set up the Lingu React Native SDK in your project.

Prerequisites

Before installing, ensure you have:

• React Native 0.70 or higher
• iOS 13.0+ / Android 5.0+ (API 21+)
• A Lingu account with an API key

Install Dependencies

Using npm:

npm install @lingu/react-native-sdk react-native-webview @react-native-async-storage/async-storage

Using yarn:

yarn add @lingu/react-native-sdk react-native-webview @react-native-async-storage/async-storage

Peer Dependencies

The SDK requires these peer dependencies:

Package	Purpose
react-native-webview	Renders the chat UI
@react-native-async-storage/async-storage	Persists messages locally

iOS Setup

Install Pods

Navigate to your iOS directory and install CocoaPods dependencies:

cd ios && pod install

Info.plist (Optional)

If you plan to use links within the chat, add this to your Info.plist:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>https</string>
  <string>http</string>
</array>

Android Setup

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

Minimum SDK Version

Ensure your android/build.gradle has:

buildscript {
    ext {
        minSdkVersion = 21  // Minimum required
        // ...
    }
}

Expo Setup

For Expo managed projects:

npx expo install react-native-webview @react-native-async-storage/async-storage

Then install the Lingu SDK:

npm install @lingu/react-native-sdk

Expo Go Limitations

The SDK works in Expo Go, but for production, use a development build or EAS Build.

For more Expo-specific details, see our Expo Guide.

Verify Installation

Create a simple test to verify the installation:

// App.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { LinguChat } from '@lingu/react-native-sdk';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>My App</Text>
      
      <LinguChat
        apiKey="your-api-key-here"
        primaryColor="#3b82f6"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Run your app:

# iOS
npx react-native run-ios

# Android
npx react-native run-android

Permissions

No special permissions required!

The SDK does not need:

• Camera access
• Microphone access
• Location access

It only uses:

• Internet connection (automatic)
• Local storage (automatic via AsyncStorage)

Troubleshooting

WebView Not Loading

If the WebView shows a blank screen:

1. Ensure react-native-webview is properly linked
2. For iOS, run pod install again
3. Clear Metro bundler cache: npx react-native start --reset-cache

Module Not Found

If you see "Cannot find module" errors:

# Clear node_modules and reinstall
rm -rf node_modules
npm install

# For iOS
cd ios && pod install

Android Build Failures

Ensure your Gradle version is compatible:

// android/build.gradle
classpath("com.android.tools.build:gradle:7.3.1")

Next Steps

Now that you have the SDK installed, learn how to:

• Use the LinguChat Component
• Understand WebView Integration
• Access the API Reference