Use localizations and locale codes in React Native SDK

Why this is important

Locale codes come into play when Adapty picks the localization for a flow or an onboarding, and when you read a remote config for a custom paywall.

Locale codes are complicated and can vary from platform to platform, so Adapty relies on one internal standard across every platform it supports. Understanding that standard helps you predict which localization a user receives.

Locale code standard at Adapty

For locale codes, Adapty uses a slightly modified BCP 47 standard: every code consists of lowercase subtags, separated by hyphens. Some examples: en (English), pt-br (Portuguese (Brazil)), zh (Simplified Chinese), zh-hant (Traditional Chinese).

Locale code matching

In SDK v4, flows and onboardings match locale codes differently: flows are localized by the SDK on the device, onboardings by the Adapty server.

Flows and Paywall Builder paywalls

A paywall built in the Paywall Builder is delivered as a flow in SDK v4, so the rule below covers both.

The match is exact. The SDK compares the code you pass with the localization codes of the flow character by character: it doesn’t change the case, doesn’t replace underscores (_) with hyphens (-), and doesn’t fall back to the language subtag. For a flow with a pt-br localization, only pt-br matches: pt-BR, pt_BR, and pt-PT all miss.

When the code matches no localization, the flow silently renders in its default locale — the SDK doesn’t return an error and doesn’t log a warning.

When the code matches, Adapty merges the localization with the default one: the strings and assets that the matched localization doesn’t define come from the default localization.

Omitting the locale code is not the same as asking for the flow’s default localization: the SDK substitutes a fixed en. A flow whose default locale is de still renders in en when it has an en localization, and falls back to de only when it doesn’t.

Onboardings

Onboardings are localized on the server, and the server rules tolerate other formats. When you pass a locale to getOnboarding:

1. The locale string is converted to lowercase and all the underscores (_) are replaced with hyphens (-)
2. Adapty looks for the localization with the fully matching locale code
3. If no match is found, Adapty takes the substring before the first hyphen (pt for pt-br) and looks for the matching localization
4. If no match is found again, Adapty returns the content for the onboarding’s default locale

This way pt_BR, pt-BR, and pt-br all resolve to the same onboarding localization.

Implementing localizations

In SDK v4, you don’t pass a locale code when you fetch a flow — getFlow returns the flow with all of its localizations, and Adapty applies one when the flow view is built.

• Flows built in the builder: the SDK doesn’t read the device locale, so resolve it in your app and pass it as the locale parameter of createFlowView, or in the params prop of the embedded AdaptyFlowView component. It’s optional — omit it and the flow renders in en, or in its default locale when the flow has no en localization.

  import { createFlowView } from 'react-native-adapty';
  
  const view = await createFlowView(flow, { locale: 'es' });

  view.locale reports the localization the view was actually built with — the locale you requested when that localization exists, and the flow’s default otherwise. Both the locale parameter and view.locale require React Native SDK 4.0.2 or later, and view.locale is undefined on earlier versions.

  The embedded AdaptyFlowView component creates its own view, so there is nothing for your code to read locale from. Take the localization from the object that its onAppeared handler receives instead:

  <AdaptyFlowView
    flow={flow}
    params={{ locale: 'es' }}
    onAppeared={(view) => setScreenLocale(view.locale)}
  />

  The onAppeared argument requires React Native SDK 4.0.3 or later.

• Custom (remote config) paywalls: getFlow returns every configured localization in flow.remoteConfigs. Each entry has a lang code and a data object. Select the entry that matches the user, with your own fallback:

import { adapty } from 'react-native-adapty';

const flow = await adapty.getFlow('placement_id');
const config = flow.remoteConfigs?.find((c) => c.lang === 'en') ?? flow.remoteConfigs?.[0];
// read your values from config?.data

Adapty stores those lang codes in the format described in Locale code standard at Adapty. The SDK doesn’t match remote configs against a locale, so which entry to apply is up to your app.

Why this is important

There are a few scenarios when locale codes come into play — for example, when you’re trying to fetch the correct paywall for the current localization of your app.

As locale codes are complicated and can vary from platform to platform, we rely on an internal standard for all the platforms we support. However, because these codes are complicated, it is really important for you to understand what exactly are you sending to our server to get the correct localization, and what happens next — so you will always receive what you expect.

Locale code standard at Adapty

For locale codes, Adapty uses a slightly modified BCP 47 standard: every code consists of lowercase subtags, separated by hyphens. Some examples: en (English), pt-br (Portuguese (Brazil)), zh (Simplified Chinese), zh-hant (Traditional Chinese).

Locale code matching

When Adapty receives a call from the client-side SDK with the locale code and starts looking for a corresponding localization of a paywall, the following happens:

1. The incoming locale string is converted to lowercase and all the underscores (_) are replaced with hyphens (-)
2. We then look for the localization with the fully matching locale code
3. If no match was found, we take the substring before the first hyphen (pt for pt-br) and look for the matching localization
4. If no match was found again, we return the content for the paywall’s default locale

This way an iOS device that sent 'pt_BR', an Android device that sent pt-BR, and another device that sent pt-br will get the same result.

Implementing localizations: recommended way

If you’re wondering about localizations, chances are you’re already dealing with the localized string files in your project. If that’s the case, we recommend placing some key-value with the intended Adapty locale code in each of your files for the corresponding localizations. And then extract the value for this key when calling our SDK, like so:

// 1. Modify your localization files (e.g., using react-i18next)

/*
en.json
*/
{
  "adapty_paywalls_locale": "en"
}

/*
es.json
*/
{
  "adapty_paywalls_locale": "es"
}

/*
pt-BR.json
*/
{
  "adapty_paywalls_locale": "pt-br"
}

// 2. Extract and use the locale code
import { useTranslation } from 'react-i18next';
import { adapty } from 'react-native-adapty';

const MyComponent = () => {
  const { t } = useTranslation();
  
  const fetchPaywall = async () => {
    const locale = t('adapty_paywalls_locale');
    // pass locale code to adapty.getPaywall or adapty.getPaywallForDefaultAudience method
    const paywall = await adapty.getPaywallForDefaultAudience('placement_id', locale);
  };
};

That way you can ensure you’re in full control of what localization will be retrieved for every user of your app.

Implementing localizations: the other way

You can get similar (but not identical) results without explicitly defining locale codes for every localization. That would mean extracting a locale code from the device, for example via react-native-localize:

import * as RNLocalize from 'react-native-localize';
import { adapty } from 'react-native-adapty';

const fetchPaywall = async () => {
  // getLocales() returns the user's preferred locales in BCP-47 format (e.g., 'en-US', 'pt-BR')
  const locale = RNLocalize.getLocales()[0].languageTag;
  // pass locale code to adapty.getPaywall or adapty.getPaywallForDefaultAudience method
  const paywall = await adapty.getPaywallForDefaultAudience('placement_id', locale);
};

Note that we don’t recommend this approach due to few reasons:

1. On iOS, preferred languages and the current regional locale are not identical. If you want the localization to be picked correctly, you’ll have to either rely on Apple’s resolution logic — which works out of the box when you use the recommended approach with localized string files — or re-create it yourself.
2. The device locale may not match any localization you’ve configured in Adapty. In that case the SDK falls back to the first-subtag match or, ultimately, to en — which may not be the language you’d want to default to for that user.

Should you decide to use this approach anyway — make sure you’ve covered all the relevant use cases.