expo: [SDK 36] Problem with Intl after upgrade

🐛 Bug Report

Hi, I made an upgrade from SDK 35 to SDK 36 and after it I have error in Android device

Environment

Expo CLI 3.11.1 environment info: System: OS: macOS 10.15.1 Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node Yarn: 1.19.1 - /usr/local/bin/yarn npm: 6.11.3 - ~/.nvm/versions/node/v10.15.0/bin/npm IDEs: Android Studio: 3.5 AI-191.8026.42.35.5977832 Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild npmPackages: @types/react: ^16.9.11 => 16.9.11 @types/react-native: ^0.57.65 => 0.57.65 expo: ^36.0.0 => 36.0.0 react: 16.9.0 => 16.9.0 react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4 react-navigation: ^4.0.10 => 4.0.10 npmGlobalPackages: expo-cli: 3.11.1

Package use for manage translations "react-intl": "^3.2.0",

Error only occurs in Android On IOS device it works

CustomIntlProvider

import { IntlProvider } from 'react-intl';
import { translations } from 'i18n';

export const CustomIntlProvider: React.FC<Props> = ({ children }) => {
  const language = // from store
  const setLocale = // save to store

  useEffect(() => {
    I18nManager.allowRTL(false);

    (async () => {
      const lang = await asyncStorage.getItem(StorageItem.Lang);
      if (lang) {
        setLocale(lang);
      }
    })();
  }, [setLocale]);

  return (
    <IntlProvider locale={language} messages={translations[language]}>
      {children}
    </IntlProvider>
  );
};

I found this topics on github while I was trying to fix this (can be conncted with this issue) https://github.com/formatjs/react-intl/issues/1356 https://github.com/react-native-community/jsc-android-buildscripts#international-variant

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 19 (8 by maintainers)

Most upvoted comments

Found it thanks to your code @shanhuiyang. I was missing installing: intl and expo-localization

yarn add intl expo-localization

Then in the App.tsx in the root folder:

// Need manually add Intl polyfill for react-native app
import "intl";
import { Platform } from "react-native";

if (Platform.OS === "android") {
    // See https://github.com/expo/expo/issues/6536 for this issue.
    if (typeof (Intl as any).__disableRegExpRestore === "function") {
        (Intl as any).__disableRegExpRestore();
    }
}
import "intl/locale-data/jsonp/en";

SebSchwartz on Feb 4, 2020

@Feridum I meet 2 issues after upgrade the expo to 36, the 2nd one is exactly the same as you, thank you for saving my whole day.

import "intl";
import { Platform } from "react-native";

if (Platform.OS === "android") {
    if (typeof (Intl as any).__disableRegExpRestore === "function") {
        (Intl as any).__disableRegExpRestore();
    }
}

The 1st issue I met is ReferenceError: Can't find variable: Intl. This should not happen because I have wrote the following code line,

import "intl";

I moved this line to the top of App.tsx then the 1st issue went away and 2nd issue comes.

shanhuiyang on Jan 16, 2020

@SebSchwartz FYI, your hack looks to work also without expo-localization.

soullivaneuh on Feb 28, 2021

@SebSchwartz Should probably change your solution to use expo install.

nandorojo on Feb 16, 2021

After some research I found that Intl polyfill (https://github.com/andyearnshaw/Intl.js/) causes this error and making Intl.__disableRegExpRestore() help me to get rid of the error.

I still dont know why after upgrade from 35 to 36 cause this error but after fix found I think we can close it.

Feridum on Dec 20, 2019

I saw this library but in my situation, I will have to rewrite the whole application or stay on SDK 35 where react-intl works perfectly 😕. Both of these solutions are bad in the current stage of the project 😦

Feridum on Dec 19, 2019