npm package: @gettranslated/react-native-sdk
Description: React Native SDK for GetTranslated translation management platform
Author: GetTranslated
Latest version: 1.2.0

# GetTranslated React Native SDK

A comprehensive React Native SDK for the [GetTranslated](https://www.gettranslated.ai) 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](https://www.gettranslated.ai/developers/react-native-quickstart/).

## 📚 Documentation

- **[Complete Integration Guide](https://www.gettranslated.ai/developers/react-native-integration/)** - Comprehensive documentation with examples and best practices
- **[Quick Start Guide](https://www.gettranslated.ai/developers/react-native-quickstart/)** - Get started in 5 minutes
- **[Developer Resources](https://www.gettranslated.ai/developers/)** - 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

```bash
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:

```tsx
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):

```tsx
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:

```tsx
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

```tsx
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](https://www.npmjs.com/package/@gettranslated/react-native-sdk)**
- **[Developer Documentation](https://www.gettranslated.ai/developers)**
- **[Support](mailto:support@gettranslated.com)**

## 🔄 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](https://www.gettranslated.ai/developers/react-native-integration/#migration-guides) for step-by-step instructions.

## 📄 License

MIT

---

**Ready to get started?** Check out our [Quick Start Guide](https://www.gettranslated.ai/developers/react-native-quickstart/) or dive into the [Complete Integration Guide](https://www.gettranslated.ai/developers/react-native-integration/) for detailed documentation and examples.