RNLocalize gets an undefined object on RNLocalize.initialContants

[QuentinNev]

Hello !

We used react-native-languages with i18n-js in our app to easly manage the translations. Now that it has been updated and that we've done the migration, we faced a strange exception as described below.

Describe your environment

• react-native-localize v 1.0.1
• react-native v 0.57.7
• Target platform: both
• Device : Android Virtual Device
• OS version: Android 6.0
• DevTools: Android Studio v 3.1.4 with build tools v 27.0.3

How to repeat issue and example

Before the update to RNLocalize, everything worked fine, I did nothing more than copying the example. After the update, I followed the steps described here.

1. Unlink then uninstall react-native-languages with npm
2. Install then link react-native-localize
3. Edited my i18n.js file to be the exact same as in the link above
4. react-native run-android now instantly throws me this exception undefined is not an object (evaluating 'RNLocalize.initialContants') even in the console it's the only thing printed.

I'm not really confident with react-native and I don't have any clue about what's happening.
I created a new project with only react-native-localize and i18n-js installed, but I got the same result except the value was nulland not undefined.

Basically just using import * as RNLocalize from 'react-native-localize throws this exception.
Have you any clues about what could cause this issue ?

[svenjens]

+1

[zoontek]

@QuentinNev Is this RNLocalize.initialContants or RNLocalize.initialConstants (with an S - it would be really weird without)?

Could you provides me the content of your android/settings.gradle, android/app/build.gradle and android/app/src/main/java/com/YOURAPPNAME/MainApplication files? That will help me a lot to fix your issue, thanks! 🙂

[FransTwisk]

I'm experiencing the same issue, making at least our jest tests fail:

● Test suite failed to run

    TypeError: Cannot read property 'initialConstants' of undefined

    > 1 | import * as RNLocalize from 'react-native-localize';
        |                                                     ^
      2 | import I18n from 'i18n-js';
      3 | 
      4 | import en from '/src/locales/en';

      at Object.<anonymous> (node_modules/react-native-localize/index.js:19:28)
      at Object.<anonymous> (src/config/i18n.js:1:341)
      ...

[zoontek]

@FransTwisk Could you provides your module mock?

[FransTwisk]

Ignore it, you're right, I forgot to update the mock file :) Works for me now.

[nigel-smk]

I experienced the same problem and downgrading to 1.0.0 solves it. Seems to be an issue with the most recent release.

[zoontek]

@nigel-smk In the same conditions (on Android) ? Because the only change between 1.0.0 and 1.0.1 is the source files included in the Pod: 6f1222e

[nigel-smk]

I was experiencing it on iOS. I did not test Android. I'll test it out tomorrow and report back.

[zoontek]

@nigel-smk Do you use CocoaPods?

[abaart]

I experience this same error in the iOS simulator. RN version 0.57.8. Downgrading to 1.0.0 did not fix.

[zoontek]

I just tried using:

react-native init TestRNLocalize && cd TestRNLocalize
yarn add react-native-localize
react-native link react-native-localize
react-native run-ios
react-native run-android

import * as RNLocalize from "react-native-localize";

console.log(RNLocalize.getLocales());

Without any issues. It's probably due to react-native link, which version of react-native-cli and react-native do you use? Do a react-native -v in your project and give me the output please 🙂

[abaart]

Thanks for helping us out with this!
Here is the output:
react-native-cli: 2.0.1 react-native: 0.57.8

Running the commands you posted also works without issues here. Maybe it is a react-native version issue?

[zoontek]

I need to investigate. react-native link is such a blackbox, it's quite painful.

EDIT: Could you check that the linking went OK using manual instructions? https://github.com/react-native-community/react-native-localize#manual-ios

[nigel-smk]

Just to update on my side:

1. I don't use cocoapods
2. I went back up to 1.0.1 and tested on Android and iOS and non longer experience this problem...
   Sadly, I cannot identify any meaningful steps that I took that might give a clue as to how the problem was resolved.

[zoontek]

@nigel-smk Maybe metro bundler cache invalidation?

[abaart]

I've upgraded my app to the latest react-native version (use react-native-git-upgrade!), solving many issues that popped up along the way. These issues may be related to some other issue in my project that I am not aware of, but just in case someone else encounters these problems as well, I will share my experiences and the solution that worked in my case.

Building on iOS requires some changing of a script that installs third-party elements (see this issue and this issue). Fix the path of glogs in the ios-install-third-party.sh script to: "\"../../$SCRIPTDIR/ios-configure-glog.sh\"" (for more info see my comment)

Anyway, returning to this issue: after upgrading and solving all the other issues, this error disappeared. I do not know what exactly fixed the issue, but upgrading to the latest react-native version seems to do the trick.

[roy-law]

No solution from above works for me, so I just used the following to bypass it like the following:
jest.mock('react-native-localize', {})

[tu55eladd]

+1

Could not get it to work with react-native link so used the manual method

Works on virtual device but not on physical device

• "react-native": "^0.57.8"
• "react-native-localize": "^1.0.2"

[smeevil]

I did have the same errors on iOS. (did not test android yet).
Manual linking did work, adding the RNLocalize.xcodeproj to the libraries on the project navigator AND (missing in the docs) adding libRNLocalize.a in the linked frameworks and libraries in the general tab of the target app.

So it seems the automatic linking is not working as advertised.

[kristijantomic]

@smeevil, could you please tell me which version of react-native you use?
I did manual linking, but still get RNLocalize.initialContants evaluating to null :(.
On Android all seem to be fine.

I have installed:
react-native-cli: 2.0.1
react-native: 0.59.0
react-native-localize: 1.1.0

Thx

[smeevil]

The same except for :

"react-native": "0.59.0-rc.3",

[wazzupex]

Same issue here, only tested in iOS so far.
I get the error only by having the import statement:
import * as RNLocalize from "react-native-localize";

If I comment it out, no error is shown.

I've tried "react-native-localize": "^1.1.0" as well as 1.0.0.

Environment:
  OS: macOS 10.14.3
  Node: 11.9.0
  Yarn: 1.13.0
  npm: 6.9.0
  Watchman: 4.9.0
  Xcode: Xcode 10.1 Build version 10B61
  Android Studio: Not Found

Packages: (wanted => installed)
  react: ^16.6.1 => 16.8.4
  react-native: ^0.54.2 => 0.54.4

[mikehardy]

I just integrated react-native-localize into my project, including with a jest test and I looked at it on iOS (deployed it to users actually!) and did not encounter this problem. Every version I am using is current as of today (RN 0.59.3, latest release of localize etc etc.)

I am using the jest file from here, but with getBestAvailableLanguage added - in my mocks folder: #24 (comment)

[hesyar]

+1

[ghost]

I solved it by adding RNLocalize.xcodeproj to Libraries manually.

[MakhouT]

I had this issue on android. It's because the linking didn't happen correctly in the MainApplication.java.
I am using react-native-navigation, where I had to change my MainApplication.java
So key to the solution is to manually link it.

[nwalla]

I had this issue on android. It's because the linking didn't happen correctly in the MainApplication.java.
I am using react-native-navigation, where I had to change my MainApplication.java
So key to the solution is to manually link it.

can you please give an example of how you changed this?

[MakhouT]

I had this issue on android. It's because the linking didn't happen correctly in the MainApplication.java.
I am using react-native-navigation, where I had to change my MainApplication.java
So key to the solution is to manually link it.

can you please give an example of how you changed this?

Sure,
It is documented here on how to do it manually: https://github.com/react-native-community/react-native-localize#manual-android

[dmacan23]

I'm having the same issues with 0.60-rc1 version on iOS. Android works fine

[troyam]

I'm having the same issues too... Android

[zoontek]

@dmacan23 Could you post your Podfile?

@troyamtec Which RN version?

[plahteenlahti]

Having the same problem with my project on React Native version 0.60 and iOS. I have tried both manual linking by adding the Xcode project to the workspace (just in case) as well as through CocoaPods. Upgraded fromreact-native-languages, could there some step I'm missing?

[zoontek]

@plahteenlahti On React Native 0.60, you have nothing more to do than yarn add react-native localize and pod install. Autolinking will do the rest. Check https://github.com/react-native-community/react-native-localize/tree/master/example

[duluong]

I'm experiencing the same issue on my expo project.
Here is my environment.

 Expo CLI 2.21.2 environment info:
    System:
      OS: macOS 10.14.5
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.16.0 - /usr/local/bin/node
      Yarn: 1.10.1 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^33.0.0 => 33.0.7 
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz => 0.59.8 
    npmGlobalPackages:
      expo-cli: 2.21.2

did some researches but not resolve yet.

[duluong]

I've just done the quick fix by remove react-native-localize.
Because my app just used it to let user change their display language.
So I've changed to use i18n-js only to handle it.

locales/i18n.js

import I18n from "i18n-js";
import en from './en.json';
import ja from './ja.json';

I18n.translations = {
	en: en,
	ja: ja 
};

I18n.defaultLocale = "en";

// The method we'll use instead of a regular string
export function strings(name, params = {}) {
  return I18n.t(name, params);
};

export default I18n;

In the components

import { I18n, strings } from '../../locales/i18n.js';

// usage sample
<Text > {strings('login.login')} </Text>

//  sample of code when user change language
I18n.locale = "ja";

I think this solution does not cover all the cases. For example for the right to left languages do not work well. It just work well in my case with the particular languages.
Waiting for the complete solution from the update of react-native-localize.

Cheers

[zoontek]

@duluong This package will not works with Expo (you can't install native packages in Expo without exjecting to Expokit). Check the Expo documentation to achieve the same effect: https://docs.expo.io/versions/v33.0.0/sdk/localization/

[duluong]

@zoontek Thanks for your feedback.

[kevinetore]

I'm having the same issue on Android devices. Is there a known fix? I tried both the manual configuration and react-native link.

[luucv]

+1

[zoontek]

I'm closing this since a lot of the issues are often related to bad installation / linking. More infos here if you struggle with Cocoapods: #63

[JiboStore]

I just need to rebuild native module and then it works

[crramirez]

I just need to rebuild native module and then it works

Sorry, how did you do that I am stuck in this error after migrating from RN 0.59.10 to 0.60.0

[dggcoding]

just link the package with project... autolink is not working for this package.

react-native link react-native-localize

(root) -> cd .\android\ -> .\gradlew clean -> cd.. -> react-native run-android

[BSBMteam]

@duluong This package will not works with Expo (you can't install native packages in Expo without exjecting to Expokit). Check the Expo documentation to achieve the same effect: https://docs.expo.io/versions/v33.0.0/sdk/localization/

Oh my god, thank you so much for clarifying this! I've tried for hours to solve this unsolvable problem because I was trying to use it with my managed Expo project...

There's a react native example called RocketChat: https://github.com/RocketChat/Rocket.Chat.ReactNative
This example uses both i18n and React-Native-Localize, but they have an iOS and android folder, which means they ejected their project or something? How does this work and how could I make my expo project compatible with react-native-localize?