App-level Language Setting (React Native)
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
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');
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.
Please call FireworkSDK.getInstance().changeAppLanguage
before RNRestart.Restart
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();
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.
To be able to use the in-app language feature, the following configuration needs to be added to the app project.
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));
}
}
AndroidManifest.xml
<application
...
android:supportsRtl="true"
>
...
Generally, you should use changeAppLanguage API on JS/TS side. But we also support using this API on native sides directly.
import FireworkVideoUI
AppLanguageManager.shared.changeAppLanguage("ar") // such as ar, ar-JO, en, etc.
Generally, the changeAppLanguage
API should be called in the following cases:
The App is launched(e.g. in the application(:, didFinishLaunchingWithOptions:) -> Bool
method).
Users change the app language manually.
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
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.
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"
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%