React Native Firebase Translations

A React Native library for managing translations with Firebase Realtime Database integration. This package provides a simple way to manage and synchronize translations across your React Native applications using Firebase Realtime Database.

Features

• 🔄 Sync translations with Firebase Realtime Database
• 🌐 Support for multiple languages
• 📱 Offline support with AsyncStorage caching
• 🔄 Automatic language detection
• 📦 Easy import/export of translations
• 🧩 Simple React Context API

Installation

npm install react-native-firebase-translations
# or
yarn add react-native-firebase-translations
# or
pnpm add react-native-firebase-translations

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-native @react-native-firebase/app @react-native-firebase/database @react-native-async-storage

Setup

1. Configure Firebase

Make sure you have set up Firebase in your React Native project. If not, follow the official documentation.

2. Create Configuration File

Create a translations-config.json file in your project root:

{
  "serviceAccountKeyPath": "./path-to-your-service-account-key.json",
  "databaseURL": "https://your-firebase-project.firebaseio.com",
  "translationsPath": "translations",
  "locales": ["en", "tr"],
  "defaultLocale": "en"
}

Usage

Provider Setup

Wrap your application with the TranslationsProvider:

import { TranslationsProvider } from 'react-native-firebase-translations';
import translationsConfig from "@/translations-config.json";

const App = () => {
  return (
    <TranslationsProvider {...translationsConfig}>
      <YourApp />
    </TranslationsProvider>
  );
};

Alternatively, you can provide the configuration directly:

import { TranslationsProvider } from 'react-native-firebase-translations';

const App = () => {
  return (
    <TranslationsProvider
      defaultLocale="en"
      fallbackLocale="en"
      databaseURL="https://your-firebase-project.firebaseio.com"
    >
      <YourApp />
    </TranslationsProvider>
  );
};

Using Translations

import { useTranslations } from 'react-native-firebase-translations';

const MyComponent = () => {
  const { t, locale, setLocale, availableLocales } = useTranslations();

  return (
    <View>
      <Text>{t('hello_world')}</Text>
      <Text>Current language: {locale}</Text>
      
      <Dropdown
        value={locale}
        items={availableLocales.map(loc => ({ label: t(`language`, {}, loc), value: loc }))}
        onChange={value => setLocale(value)}
      />
    </View>
  );
};

Import/Export Translations

This package provides CLI tools to import and export translations from/to Firebase.

Import Translations from Firebase

npx firebase-translations-import --config ./translations-config.json --output ./src/translations

Export Translations to Firebase

npx firebase-translations-export --config ./translations-config.json --input ./src/translations

CLI Options

Import Options

| Option | Alias | Description | Default | |--------|-------|-------------|---------| | --config | -c | Path to configuration file | ./translations-config.json | | --output | -o | Path to output directory | ../src/translations | | --format | -f | Output format (typescript or json) | typescript | | --locales | -l | Locales to export (comma-separated list) | All locales in config | | --verbose | -v | Verbose logging | false |

Export Options

| Option | Alias | Description | Default | |--------|-------|-------------|---------| | --config | -c | Path to configuration file | ./translations-config.json | | --input | -i | Path to input directory containing translation files | ../src/translations | | --format | -f | Input format (typescript or json) | typescript | | --locales | -l | Locales to import (comma-separated list) | All locales in config | | --verbose | -v | Verbose logging | false | | --dry-run | -d | Dry run (don't update Firebase) | false | | --yes | -y | Skip confirmation prompt | false |

API Reference

TranslationsProvider Props

| Prop | Type | Description | Default | |------|------|-------------|---------| | defaultLocale | string | Default locale to use | "tr" | | fallbackLocale | string | Fallback locale when translation is missing | "en" | | translations | object | Initial translations object | Built-in translations | | storageKey | string | AsyncStorage key for storing locale | "@translations:locale" | | translationsPath | string | Firebase path for translations | "translations" | | translationsVersionPath | string | Firebase path for translations version | "translations_version" | | disableFirebaseSync | boolean | Disable Firebase synchronization | false | | databaseURL | string | Firebase database URL | Required if Firebase sync is enabled |

useTranslations Hook

| Property | Type | Description | |----------|------|-------------| | t | function | Translation function | | locale | string | Current locale | | setLocale | function | Function to change locale | | availableLocales | string[] | List of available locales | | isLoading | boolean | Loading state | | translationsVersion | number | Current translations version |

License

MIT