Js-lingui: Android bug with NumberFormat : Can't find variable Intl

[guillaumeLamanda]

Describe the bug
I have a bug with number formating on Android (React-Native). I have the following error : Can't find variable Intl.
I have tried react component (NumberFormat) and js way i18n.number.

Expected behavior
Formatted number on Android, like it work on iOS. 📱

I made a minimal snack reproduction of this here : https://snack.expo.io/@glamanda/lingui-android-bug-on-rn

The lingui project is verry nice, thanks for your work 👏

[vonovak]

hi! this is a problem with your react native environment, check out the Note in the docs: https://lingui.js.org/tutorials/react-native.html

[tricoder42]

@guillaumeLamanda Please let me know if the Note in docs by @vonovak doesn't work for you. I'm closing this otherwise.

Cheers 👍

[guillaumeLamanda]

Hi all, and thanks for the help !
I have read the note, unfortunally, I was not able to use a custom javascript core because I use standelone app with expo.
Anyway, I made it work using intl, so I am able to use latest release of lingui. 💯
I updated my snack if someone is struggling on it like I was. 😄
https://snack.expo.io/@glamanda/lingui-android-with-intl-polyfill

[lucasriondel]

@guillaumeLamanda you saved my day. works like a charm, I was having issues with react-intl in my react-native app, but it's all gone now !

[yzalvov]

The most straightforward way found

npm install intl

import 'intl';
import 'intl/locale-data/jsonp/en'; // or any other locale you need

Thanks to hfossli (source)

[fbaralle]

The most straightforward way found

npm install intl

import 'intl';
import 'intl/locale-data/jsonp/en'; // or any other locale you need

Thanks to hfossli (source)

Thanks a lot!! It works just fine with this simple import.

[alexalannunes]

The most straightforward way found

npm install intl

import 'intl';
import 'intl/locale-data/jsonp/en'; // or any other locale you need

Thanks to hfossli (source)

Wowwwwwwww
!Thanks!!!

[gregdburns]

It seems like this code could be improved by only loading intl if the Intl object doesn't exist:

if (typeof Intl === 'undefined') {
    require('intl')  
    require('intl/locale-data/jsonp/en')  
}

I'd be curious if anyone sees any potential issues with this. In this case, it would avoid performance overhead if the Intl object did exist (i.e. iOS).

I tested it on Android and iOS with a React Native / Expo app and it works fine.

[tricoder42]

@gregdburns Sounds reasonable. Would you like to send a PR to documentation so others can easily find it? react-native tutorial might be a good place

[gryzzly]

We were able to solve this by updating android/app/build.gradle like this:

// commented out:
// def jscFlavor = 'org.webkit:android-jsc:+'
// added:
def jscFlavor = 'org.webkit:android-jsc-intl:+'

[SrBrahma]

We were able to solve this by updating android/app/build.gradle like this:

// commented out:
// def jscFlavor = 'org.webkit:android-jsc:+'
// added:
def jscFlavor = 'org.webkit:android-jsc-intl:+'

This works, but adds 6MiB to the app size (but have all the languages). Does the import option have a smaller app size? I really believe that it does, but just want a confirmation.

[SrBrahma]

The most straightforward way found

npm install intl

import 'intl';
import 'intl/locale-data/jsonp/en'; // or any other locale you need

Thanks to hfossli (source)

Wowwwwwwww
!Thanks!!!

This intl lib is discontinued, and its last update was on 2016. I think I will stick to the jscFlavor solution.

[istvan-szilagyi]

If you don't want to install any package, there is jscFlavor variable in the app/build.gradle, change that to the following from:

def jscFlavor = 'org.webkit:android-jsc:+'

to:

def jscFlavor = 'org.webkit:android-jsc-intl:+'

This way Intl will be included in the JSC.