Firework for Developers
One-to-one Virtual ShoppingBusiness Portal
  • Welcome to Firework for Developers
  • Firework Interactive Video and One-to-many Digital Showroom
  • Web
    • Getting Started (Web)
      • Shopify
      • Magento
      • Wordpress (WooCommerce)
      • Salesforce Commerce Cloud
      • BigCommerce
    • Integration Guide for Web
      • Components
        • Hero Unit
        • Carousel / Grid
        • Storyblock (Web)
        • Player (Floating)
        • Storylink
      • Styling
      • Feed Attributes
      • Player
        • Configuration
          • Appearance
      • Video customization
        • Video Factory
        • CTA Button
        • Product cards
      • Events
        • Embed Feed and Storyblock Events
        • Video player events
        • Live stream events
        • Shopping events
      • Shopping Integration (V2)
        • Introduction
        • Shopping APIs
        • Product Hydration
        • Product Factory
        • Cart Sync
        • Tracking
          • Purchase
          • Add to cart
          • Remove from cart
          • Page viewed
        • Shopping Integration FAQ
        • Migrate from V1
      • Web SDK
      • Enhanced Picture-in-Picture
      • Privacy settings
        • Tracking settings
        • Cookies management
        • Content Security Policy
    • Telemetry console
    • Firework Service Domains
    • FAQ & Troubleshooting (Web)
  • Android SDK
    • Integration Guide for Android SDK
      • Getting Started (Android)
      • Video Feed (Android)
        • Video Feed Layouts (Android)
        • Channel Feed (Android)
        • Discover Feed (Android)
        • Playlist Feed (Android)
        • Dynamic Content Feed
        • Channel Hashtags Feed
        • Sku Feed
        • Single Content Feed
        • Configure Video Feed
      • Customization
        • CTA
      • Analytics (Android)
      • Shoppable Videos (Android)
        • Product Hydration
      • Live Stream Support (Android)
      • Video Player (Android)
      • StoryBlock (Android)
      • Share & Video Deep linking
      • Ad Support (Android)
      • Configure Video Advertisements Source (Android)
      • In-app Language Switches
      • Compose support(Android)
    • Sample App (Android)
    • FAQ & Troubleshooting (Android)
    • Changelog (Android)
  • iOS SDK
    • Integration Guide for iOS SDK
      • Getting Started (iOS)
      • ATT compliance (iOS)
      • Video Feed (iOS)
        • Discover Feed(iOS)
        • Channel Feed (iOS)
        • Playlist Feed (iOS)
        • Playlist Group Feed (iOS)
        • Dynamic Content (iOS)
        • Hashtag Playlist (iOS)
        • SKU Playlist (iOS)
        • Video Ads (iOS)
        • Video Feed Layouts (iOS)
      • Story Block (iOS)
      • Customization (iOS)
        • Video feed configurations (iOS)
        • Player configurations (iOS)
        • Shopping configurations (iOS)
          • Customize product card on videos using the custom view (iOS)
        • Customize click behaviors (iOS)
      • Shopping (iOS)
      • Live Stream Support (iOS)
      • Analytics (iOS)
      • Share & Deeplinking(iOS)
      • Ad Support (iOS)
    • Sample App (iOS)
    • FAQ & Troubleshooting (iOS)
    • Changelog (iOS)
  • React Native SDK
    • Integration Guide for React Native SDK V2
      • Getting Started (React Native)
      • ATT compliance React Native (iOS)
      • Video Feed (React Native)
      • Story Block (React Native)
      • Customization (React Native)
        • Video feed configurations (React Native)
        • Player configurations (React Native)
        • Shopping configurations (React Native)
          • Customize product card on videos using the custom view (React Native)
        • Customize click behaviors (React Native)
      • Shopping (React Native)
      • Live Stream Support (React Native)
      • Ad Support (React Native)
      • Analytics (React Native)
      • App-level Language Setting (React Native)
      • Share & Video Deeplinking (React Native)
      • Android Style (React Native)
      • Inject Android Image Loader (React Native)
      • Integrate SDKs in Hybrid React Native and native Apps
      • Reference (React Native)
      • Sample App (React Native)
      • FAQ & Troubleshooting (React Native)
      • Changelog (React Native)
  • Flutter SDK
    • Integration Guide for Flutter SDK V2
      • Getting Started (Flutter)
      • ATT compliance Flutter (iOS)
      • Video Feed (Flutter)
      • Story Block (Flutter)
      • Customization (Flutter)
        • Video feed configurations (Flutter)
        • Player configurations (Flutter)
        • Shopping configurations (Flutter)
          • Customize product card on videos using the custom view (Flutter)
        • Customize click behaviors (Flutter)
      • Live Stream Support (Flutter)
      • Shopping (Flutter)
      • Ad Support (Flutter)
      • Analytics (Flutter)
      • App-level Language Setting (Flutter)
      • Share & Video Deeplinking (Flutter)
      • Inject Android Image Loader (Flutter)
      • Android Style (Flutter)
      • Integrate SDKs in Hybrid Flutter and native Apps
      • Reference (Flutter)
      • Sample App (Flutter)
      • FAQ & Troubleshooting (Flutter)
      • Changelog (Flutter)
  • Help Articles
    • Importing Products to Firework
    • Adding products to a video
    • Displaying product videos on product pages using hashtag filtering(Web)
    • Syncing Carts
    • Encoded IDs
Powered by GitBook
On this page
  • Use API on JS/TS side
  • Call API on JS/TS side
  • Calling sequence
  • Additional setup steps on iOS
  • Additional setup steps on Android
  • Use API on native sides
  • Change app language on iOS native side
  • Change app language on Android native side
  • Language support table

Was this helpful?

  1. React Native SDK
  2. Integration Guide for React Native SDK V2

App-level Language Setting (React Native)

Use API on JS/TS side

Call API on JS/TS side

import FireworkSDK from 'react-native-firework-sdk';

// You should pass language code to this API, such as "en", "ar" and "pt-BR".
FireworkSDK.getInstance().changeAppLanguage('ar');

Generally, the changeAppLanguage API should be called in the following cases:

  1. The App is launched(e.g. in the componentDidMount method of App component).

  2. Users change the app language manually.

  3. Other cases that change app language.

Calling sequence

Currently, FireworkSDK.getInstance().changeAppLanguage will recreate the activity on Android. Therefore, we need to follow the calling sequence.

Generally, you also have codes for switching languages, such as the codes of caching the language.

  1. Please call FireworkSDK.getInstance().changeAppLanguage before RNRestart.Restart

  2. Please call FireworkSDK.getInstance().changeAppLanguage after all your other codes for switching languages, such as the codes of caching the language.

For example:

const language = 'ar';

// Caching language should be called before changeAppLanguage API
await AsyncStorage.setItem('app-language', language);

await FireworkSDK.getInstance().changeAppLanguage(language);

// If you use RNRestart.Restart,
// RNRestart.Restart should be called after changeAppLanguage API
RNRestart.Restart();

Additional setup steps on iOS

Firework SDK widgets are based on native views. Hence, as shown in the screenshot below, you need to add the localizations you want to support to the iOS project, which is required by iOS framework.

Additional setup steps on Android

To be able to use the in-app language feature, the following configuration needs to be added to the app project.

Override the attachBaseContext method in MainActivity.

import com.fireworksdk.bridge.reactnative.FWReactNativeSDK;

public class MainActivity extends ReactActivity {  
  protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(FWReactNativeSDK.INSTANCE.updateBaseContextLocale(newBase));
  }
}

If you need to support RTL, then please add the following configuration to the AndroidManifest.xml

    <application
        ...
        android:supportsRtl="true"
    >
    ...

Use API on native sides

Generally, you should use changeAppLanguage API on JS/TS side. But we also support using this API on native sides directly.

Change app language on iOS native side

import FireworkVideoUI
AppLanguageManager.shared.changeAppLanguage("ar") // such as ar, ar-JO, en, etc.

Generally, the changeAppLanguage API should be called in the following cases:

  1. The App is launched(e.g. in the application(:, didFinishLaunchingWithOptions:) -> Bool method).

  2. Users change the app language manually.

  3. Other cases that change app language.

After calling changeAppLanguage API, we need to recreate FireworkVideo SDK components to update the UI. Such as:

  • Recreate video feed and story block

  • Stop floating player

Additional setup steps on iOS

Firework SDK widgets are based on native views. Hence, as shown in the screenshot below, you need to add the localizations you want to support to the iOS project, which is required by iOS framework.

Change app language on Android native side

Step 1: The following methods need to be prepared

  // Some code
  // change language
  fun changeLanguage(inputLocaleString: String, activity: Activity) {
     // save to sp, or save to application or your app cache system
     sharedPreferences.edit().apply {
        putString(LOCALE_KEY, inputLocaleString)
      }.commit()
     restartActivity(activity)
  }
  
  // update the base context locale
  fun updateBaseContextLocale(baseContext: Context): Context {
    // Read from sp or application. If the language/locale exists in your app, use it directly
    val currentLocaleString = sharedPreferences.getString(LOCALE_KEY, null)
    if (currentLocaleStrinotg.isNullOrBlank()) {
      return baseContext
    }
    
    val localeStrings = currentLocaleString.split("-")
    val locale = if (localeStrings.size > 1) {
      Locale(localeStrings[0], localeStrings[1])
    } else {
      Locale(currentLocaleString)
    }
    
    updateDefaultLocale(locale)
    return updateResourcesLocale(baseContext, locale)
  }
  
  // update the default locale
  private fun updateDefaultLocale(locale: Locale) {
    Locale.setDefault(locale)
  }

  // update the context locale
  private fun updateResourcesLocale(context: Context, locale: Locale): Context {
    val resources = context.resources
    val configuration = resources.configuration
    configuration.setLocale(locale)
    configuration.setLayoutDirection(locale)
    return context.createConfigurationContext(configuration)
  }
  
  // restart activity
  private fun restartActivity(activity: Activity) {
    activity.recreate()
  }

Step 2: Add the following code to all activities

// Some code
class YourActivity: Activity() {

  ...
  override fun attachBaseContext(newBase: Context) {
    super.attachBaseContext(updateBaseContextLocale(newBase))
  }
}

Step 3: Call the change language method where you need

// Some code
// You must call this for all currently live activities
changeLanguage("ar", activity) // "ar-jo", "en-US", "en"

Language support table

Language
Language code
iOS
iOS translation
Android
Android translation

English

en

Supported

100%

Supported

100%

Spanish

es

Supported

76%

Supported

41.1%

Portuguese(Brazil)

pt-BR

Supported

58%

Supported

41.1%

Russian

ru

Supported

52%

Supported

26.3%

Polish

pl

Supported

64%

Supported

41.1%

Japanese

ja

Supported

76%

Supported

43.2%

Arabic

ar

Supported

80%

Supported

85.3%

Persian

fa

Not supported

NA

Supported

86.3%

PreviousAnalytics (React Native)NextShare & Video Deeplinking (React Native)

Last updated 2 months ago

Was this helpful?