GetTranslated React Native SDK

A comprehensive React Native SDK for the GetTranslated translation management platform, providing real-time, AI-powered translations for React Native applications.

🚀 Quick Start

Get up and running in under 5 minutes with our Quick Start Guide.

📚 Documentation

• Complete Integration Guide - Comprehensive documentation with examples and best practices
• Quick Start Guide - Get started in 5 minutes
• Developer Resources - All developer documentation and resources

🎯 Key Features

• Real-time Translation: Get translations on-demand with automatic caching
• Anonymous User Support: Automatic user ID generation with seamless login transition
• Language Management: Automatic language detection with override support
• Offline Caching: Persistent translation cache using AsyncStorage
• TypeScript Support: Full TypeScript definitions included
• Cross-platform: Works on both iOS and Android
• React Integration: Hooks and providers for easy React integration

📦 Installation

npm install @gettranslated/react-native-sdk
# or
yarn add @gettranslated/react-native-sdk

# iOS setup
cd ios && pod install

🔧 Basic Usage

The SDK provides two translation methods:

• t() - For bundled/extracted resources (strings known at build time) - Primary method
• getDynamicTranslation() - For dynamic strings (server-side messages, user-generated content, etc.)

Option 1: TranslationProvider (Recommended)

Use t() with extracted translation resources for your UI strings:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { TranslationProvider, useTranslation } from '@gettranslated/react-native-sdk';

// Load your extracted translation resources (generated by CLI)
import enTranslations from './locales/en.json';
import esTranslations from './locales/es.json';
import frTranslations from './locales/fr.json';

const resources = {
  en: { translation: enTranslations },
  es: { translation: esTranslations },
  fr: { translation: frTranslations },
};

export default function App() {
  return (
    <TranslationProvider apiKey="your-api-key" resources={resources}>
      <MainScreen />
    </TranslationProvider>
  );
}

function MainScreen() {
  const { t, changeLanguage, currentLanguage } = useTranslation();

  return (
    <View>
      <Text>{t('Welcome')}</Text>
      <Text>{t('Hello, {{name}}!', { name: 'John' })}</Text>
      <Button title={t('Switch Language')} onPress={() => changeLanguage('es')} />
    </View>
  );
}

Dynamic Translations (Advanced)

For strings not known at build time (e.g., server error messages):

function ErrorScreen({ errorMessage }) {
  const { getDynamicTranslation } = useTranslation();
  const [translatedError, setTranslatedError] = React.useState(errorMessage);

  React.useEffect(() => {
    const translateError = async () => {
      // Translate server-side error message
      const translation = await getDynamicTranslation(errorMessage);
      setTranslatedError(translation);
    };
    translateError();
  }, [errorMessage]);

  return <Text>{translatedError}</Text>;
}

Option 2: withTranslations HOC

For class components:

import React from 'react';
import { withTranslations, TranslationProvider } from '@gettranslated/react-native-sdk';

class MyComponent extends React.Component<{t: (key: string) => string}> {
  render() {
    return <Text>{this.props.t('Hello, World!')}</Text>;
  }
}

export default withTranslations(MyComponent);

Option 3: Static Methods

import GetTranslated from '@gettranslated/react-native-sdk';

// Initialize with resources
const resources = {
  en: { translation: { 'Welcome': 'Welcome' } },
  es: { translation: { 'Welcome': 'Bienvenido' } }
};
await GetTranslated.init('your-api-key', undefined, undefined, resources);

// In React components - use t() from hook (preferred)
function MyComponent() {
  const { t } = useTranslation();
  return <Text>{t('Welcome')}</Text>;
}

// Static method (for utility functions outside components)
const greeting = GetTranslated.t('Welcome');

// Use getDynamicTranslation() for dynamic strings (async)
const serverError = await GetTranslated.getDynamicTranslation('Connection timeout');

📋 Requirements

• React Native 0.60+
• iOS 10.0+ / Android API 21+
• Node.js 14+

🔗 Links

• NPM Package
• Developer Documentation
• Support

🔄 Migration from react-i18next

The GetTranslated SDK is designed as a drop-in replacement for react-i18next. The t() function and most APIs work identically, requiring minimal code changes.

What stays the same:

• ✅ The t() function works identically
• ✅ Interpolation syntax: t('Hello, {{name}}!', { name: 'John' })
• ✅ Pluralization with structured objects: t('item_count', { count: 5 })
• ✅ Component usage remains unchanged

What changes:

• Replace i18n.init() with <TranslationProvider>
• Update imports from react-i18next to @gettranslated/react-native-sdk

See our complete migration guide for step-by-step instructions.

📄 License

MIT

Ready to get started? Check out our Quick Start Guide or dive into the Complete Integration Guide for detailed documentation and examples.