React Native SDK v4 Installation Guide

This guide provides step-by-step instructions for installing and integrating the WOVN React Native SDK v4 into your application.

Compatibility Note

This guide uses an Expo example project for demonstration purposes. The same installation steps apply to standard React Native projects without Expo.

Integrate SDK

Step 1: Download the SDK Package

SDK Access Required

Please contact our customer support team to receive the SDK download link. Once you have the link, download the SDK package and extract it into your project directory.

Step 2: Install the SDK Package

After downloading the SDK package, install it using npm or yarn by referencing the file path from Step 1:

npm install @wovnio/react-native@file:<path-to-the-file.tgz>
# or
yarn add @wovnio/react-native@file:<path-to-the-file.tgz>

Example:

yarn add @wovnio/react-native@file:dist/wovn-react-native-latest.tgz

Step 3: Initialize WOVN SDK

The Wovn.initWovn method is an asynchronous function that initializes the SDK. It requires two arguments: your Wovn API token and an optional configuration object.

Note:
Call this method before invoking any other Wovn SDK methods. Using await is recommended. Learn more about the Wovn.initWovn method.

import * as Wovn from '@wovnio/react-native';

await Wovn.initWovn('YOUR_TOKEN', {
  enabledDebugLog: true,
  logLevel: 0,
});

Example Implementation

The following example demonstrates how to initialize WOVN SDK in an Expo application's index.js file. You can adapt this pattern to your project structure.

View complete example

index.js

import React, { useState, useEffect } from 'react';
import 'expo-router/entry';
import { registerRootComponent } from 'expo';
import { ExpoRoot } from 'expo-router';
import * as Wovn from '@wovnio/react-native';
import { Text, ActivityIndicator, View, StyleSheet } from 'react-native';

async function initializeApp() {
  try {
    await Wovn.initWovn('YOUR_TOKEN', {
      enabledDebugLog: true,
      logLevel: 0,
    });
  } catch (error) {
    console.error('Initialization failed:', error);
  }
}

function App() {
  const [isInitialized, setIsInitialized] = useState(false);

  useEffect(() => {
    async function init() {
      await initializeApp();
      setIsInitialized(true);
    }
    init();
  }, []);

  if (!isInitialized) {
    return (
      <View style={styles.centeredView}>
        <ActivityIndicator size="large" color="#0000ff" />
        <Text>LOADING...</Text>
      </View>
    );
  }

  return <ExpoRoot context={require.context('./app')} />;
}

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

registerRootComponent(App);

Step 4: Language Switching (Optional)

Wovn provides several methods for managing the app's language:

• Change the language: Use Wovn.changeLang.
• Change to system language: Use Wovn.changeToSystemLang.
• Get the current language: Use Wovn.getCurrentLang.
• Get the list of available languages: Use Wovn.getLanguagesList.

We recommend letting Wovn manage the language settings with Wovn.changeToSystemLang(). For more details, refer to the Wovn APIs.

Example

import * as Wovn from '@wovnio/react-native';

// Initialize Wovn
await Wovn.initWovn('YOUR_TOKEN', {
  enabledDebugLog: true,
  logLevel: 0,
});

// Change to system language
Wovn.changeToSystemLang();

Step 5: Verify Your Integration

1. Run Your App: Build and run your application on an iOS simulator/device or Android emulator/device.
2. Check Console Logs: Verify successful initialization in the logs.

In a successful integration, you should see logs similar to:

INFO  WOVN: DEBUG: Configs: setProjectData: isClientVerified: false, isRunningInDevelopmentMode: false, isAllowedToReport: false, Configs[token: <YOUR_TOKEN>]
      {
  "enableTranslationPreviewMode": false,
  "shouldUseSavedTranslation": false,
  "isRunningInDevelopmentMode": false,
  "projectSettings": {
    "appLocalization": true,
    "cacheExpire": 24,
    "appReportEnabled": true,
    "dynamicValues": true,
    "dynamicLoading": true,
    "errorReportEnabled": true,
    "offlineCacheExpire": 720,
    "offlineMode": false,
    "pageRefreshInterval": 5,
    "reportInterval": 5,
    "reportLotRatio": 1,
    "secondaryLanguage": "zh-CHS",
    "userAnalytics": true,
    "cellularNetworkMode": true,
    "limitedConnection": true,
    "networkTimeout": 5000,
    "skipNormalizeReportedValues": false,
    "screenGroupingByRelationship": true,
    "dataSafetyEnabled": true,
    "appOperatorMode": true,
    "limitReportToOnlyOperator": true,
    "operatorReportInterval": 30,
    "reportPageProfileImage": true,
    "reportAccessLevel": "dev",
    "includeGlossariesInTranslationData": false
  },
  "languageSetting": "LanguageSetting[currentLang: vi; languageList: [\"ja\",\"en-US\",\"en-GB\",\"zh-CHT\",\"zh-CHS\",\"vi\",\"it\",\"nl\"]; secondaryLang: zh-CHS; sourceLang: ja; systemLocale: vi_VN]",
  "jobExecutor": "JobsExecutor[jobs: ]",
  "isReporting": false,
  "reportingInterval": 5,
  "cachedSettings": {
    "token": "<YOUR_TOKEN>",
    "enabledDebugLog": true,
    "auth": "",
    "env": "prod",
    "logLevel": 0,
    "clientID": "d8fada53-1f37-4987-93ee-d50b4e3edf01"
  }
}

Integration Complete

These logs confirm that the WOVN SDK has been successfully installed and initialized.

Next Steps

To enable rapid reporting and instant translation updates, proceed to Activate Development Mode.