stefalda / reactnativelocalization Goto Github PK

Since December version
react-native team introduce a breaking change that affects third party modules.
I'm quoting here the message from the release notes. It would be great if you could upgrade the package 🎉 Thanks !

iOS native headers moved

This change affects all native modules and application code on iOS that refer to react native .h files
After e1577df, Native code on iOS must refer to headers out of the react namespace. Previously the following would work:

#import "RCTUtils.h"

But now all headers have been moved:

#import <React/RCTUtils.h>

This means that all iOS native libraries need a major version bump for RN 0.40. We attempt to minimize changes of this magnitude, and we apologize for any inconvenience caused.

EDIT : Consider also using the macro suggested in the following article, to support 0.40 and keep compatibility with previous versions.
https://medium.com/@thisismissem/how-to-upgrade-react-native-modules-in-a-backwards-compatible-manner-a5b5c48d590c#.vh7nbtd26

Hi,

thanks for publishing the lib.

I was trying to take screenshots using snapshot but the app keeps using the default locale.
And if I manually change the device language, everything works just fine.

Do you have any hints on how to make it work with snapshot?

Thanks,
Pavel

A problem occurred configuring project ':ReactNativeLocalization'.

failed to find Build Tools revision 23.0.1

I am using zh_TW, but it returns zh only

zh could be zh_CN or zh_TW.

Let's have this code:

import LocalizedStrings from 'react-native-localization';
let strings = new LocalizedStrings({
  en:{
    how:"How do you want your egg today?",
    boiledEgg:"Boiled egg",
    softBoiledEgg:"Soft-boiled egg",
    choice:"How to choose the egg"
  },
  it: {
    how:"Come vuoi il tuo uovo oggi?",
    boiledEgg:"Uovo sodo",
    softBoiledEgg:"Uovo alla coque",
   // notice missing 'choice'
  }
});

If I use IT language and pick strings.choice, then now I get undefined object. It should return choice string from en (which is first language - thus default). This is also default behavior in Android native projects.

Please fix this.

Hello,

Coming from the iOS world, when a localized string does not exist, we get the key itself as default value. I was wondering if this kind of feature would be considered/accepted in the ReactNativeLocalization library ?

Basically, in #23 example,

import LocalizedStrings from 'react-native-localization';
let strings = new LocalizedStrings({
  en:{
    how:"How do you want your egg today?",
    boiledEgg:"Boiled egg",
    softBoiledEgg:"Soft-boiled egg",
    // choice:"How to choose the egg" remove choice here as well
  },
  it: {
    how:"Come vuoi il tuo uovo oggi?",
    boiledEgg:"Uovo sodo",
    softBoiledEgg:"Uovo alla coque",
   // notice missing 'choice'
  }
});

strings.choice would print choice because it could not have been found.

The language matching function just cuts straight to the language tag and ignores any other relevant identifying tags. For example, zh-Hans-CN goes straight to zh instead of to zh-Hans.

Pull request here: #18

v0.1.22 works fine but v0.1.24 get this error:
ReactLocalization.m:37:63
"property 'languageCode' not found on object of type 'NSLocale *'

Hello,

When the Live reload and Hot reloading are enabled on my virtual device I get the error A WeakMap cannot have a non-object key.

This error occur when I save a file where I've imported and used my Translation service or when I save my translation json.

Here is the error screen:

The File with translations:

import LocalizedStrings from 'react-native-localization';

let Translate = new LocalizedStrings({
  en:{
    // Errors
    errorNetworkRequest: 'An error occurred while making a network request',
   ...
  },
  it: {
    ...
  }
});

export default Translate;

Then I import my translation file with import Translate from 'MyProject/src/lib/utils/Translate'; or user it from props

Thanks in advance

I installed the this library after I run react-native link ReactNativeLocalization. the I build my app but it fails . Can you help me t fix this issue.

After going trhough the setps i get error:

* What went wrong:
A problem occurred configuring project ':app'.
> A problem occurred configuring project ':react-native-localization'.
   > Could not resolve all dependencies for configuration ':react-native-localization:_debugCompile'.
      > Could not find com.android.support:appcompat-v7:22.2.0.
        Searched in the following locations:
            file:/Users/karliscudars/.m2/repository/com/android/support/appcompat-v7/22.2.0/appcompat-v7-22.2.0.pom
            file:/Users/karliscudars/.m2/repository/com/android/support/appcompat-v7/22.2.0/appcompat-v7-22.2.0.jar
            https://jcenter.bintray.com/com/android/support/appcompat-v7/22.2.0/appcompat-v7-22.2.0.pom
            https://jcenter.bintray.com/com/android/support/appcompat-v7/22.2.0/appcompat-v7-22.2.0.jar
            file:/Users/karliscudars/Projects/Youbip/szymon/szymon-mobile/node_modules/react-native/android/com/android/support/appcompat-v7/22.2.0/appcompat-v7-22.2.0.pom
            file:/Users/karliscudars/Projects/Youbip/szymon/szymon-mobile/node_modules/react-native/android/com/android/support/appcompat-v7/22.2.0/appcompat-v7-22.2.0.jar
        Required by:
            StarterKit:react-native-localization:unspecified > com.facebook.react:react-native:0.11.0
      > Could not find com.android.support:support-v4:21.0.3.
        Searched in the following locations:
            file:/Users/karliscudars/.m2/repository/com/android/support/support-v4/21.0.3/support-v4-21.0.3.pom
            file:/Users/karliscudars/.m2/repository/com/android/support/support-v4/21.0.3/support-v4-21.0.3.jar
            https://jcenter.bintray.com/com/android/support/support-v4/21.0.3/support-v4-21.0.3.pom
            https://jcenter.bintray.com/com/android/support/support-v4/21.0.3/support-v4-21.0.3.jar
            file:/Users/karliscudars/Projects/Youbip/szymon/szymon-mobile/node_modules/react-native/android/com/android/support/support-v4/21.0.3/support-v4-21.0.3.pom
            file:/Users/karliscudars/Projects/Youbip/szymon/szymon-mobile/node_modules/react-native/android/com/android/support/support-v4/21.0.3/support-v4-21.0.3.jar
        Required by:
            StarterKit:react-native-localization:unspecified > com.facebook.react:react-native:0.11.0 > com.facebook.fresco:fresco:0.6.1 > com.facebook.fresco:drawee:0.6.1
            StarterKit:react-native-localization:unspecified > com.facebook.react:react-native:0.11.0 > com.facebook.fresco:fresco:0.6.1 > com.facebook.fresco:imagepipeline:0.6.1

On other developers computer it works. I tryed broth win snake case and camel case.

How to resolve this, thanks!

Hi,

Is there a way to set all the LocalizedStrings created to a specific language without going to each of them and doing this strings.setLanguage('it')?

Thank You!

Hi,

I got this error when trying to clean/rebuild project in Android Studio.

Error:Execution failed for task ':ReactNativeLocalization:clean'.
Unable to delete directory: /Users/username/WebstormProjects/app/node_modules/react-native-localization/android/build/generated/assets/shaders/release

Happens only in Android as iOS kills any application when language is changed.
Steps to reproduce:

1. Run the application
2. Put the app in the background, change the language.
3. Go back to the application.
4. Notice that localization is still the old one, even after you re-render the page by detecting app resume using AppState.

I have noticed that in your LocalizedStrings.js file you retrieve the language using
require('react-native').NativeModules.ReactLocalization.language.replace(/_/g,'-')
So I tried putting this inside the constructor instead and ensured new instance of LocalizedStrings is used everytime my application resumes from paused state.
However, this will still give me the old localized string, indicating that localization in the native side is cached.
I also tried to use require('react-native').NativeModules.ReactLocalization.getLanguage((language)=> { })

However language is null.

Correct localization is retrieved after app is restarted, which is not ideal.

Let me know if there is a workaround for this.

Thanks!

When first integrating your library at version 0.1.22 in October, localization worked flawlessly (eg en-US, en-UK, etc). Thank you for that!

But for some reason, at some time in the past month, it no longer is setting the appropriate language for localization purposes, it simply seems to set the language based on the lowest-indexed en- key in the localizedStrings dictionary which is provided on initialization.

For instance, the following works properly for it, but always sets the language to en even when the application language is English (US).

import LocalizedStrings from 'react-native-localization'

const localizedStrings = new LocalizedStrings({
    'en': {
        bookmarkButtonActive: 'Favourited',
        bookmarkButtonInactive: 'Favourite',
    },
    'en-US': {
        bookmarkButtonActive: 'Favorited',
        bookmarkButtonInactive: 'Favorite',
    },
    'it': {
        bookmarkButtonActive: 'Italianoed',
        bookmarkButtonInactive: 'Italiano',
    },
})

export default localizedStrings

I have tried upgrading to the latest 0.1.25, but still seeing the same issue. It does, however, work properly for internationalization... perhaps something broke in one of your downstream localization deps? Haven't had a chance to debug the source code yet.

Application Scheme

!This is not an issue.

Does this lib have caching implemented? Native or Javascript? So it's a smooth experience across the app once the app opens and while you're switching between Scenes/Screens/Activities.
If not, can you drop some info on the performance?

is this expected?

Hello! I am trying to test some of my js classes dependent on LocalizedStrings and I fail to do so.
I got the following output:

TypeError: Cannot read property 'language' of undefined

  at Object.<anonymous> (node_modules/react-native-localization/LocalizedStrings.js:21:35)
  at Object.<anonymous> (js/DemoTest.js:1:214)
  at Object.<anonymous> (__tests__/model/loctest.js:1:104)

Here is the DemoTest.js:

`import LocalizedStrings from 'react-native-localization';

const i18n = new LocalizedStrings({
de: {
active: 'active',
}
});

export const checkMyLocalization = () => {
console.log('Active = ' + i18n.de.active);
};`

And loctest.js:

`
import { checkMyLocalization } from '../../js/DemoTest';

test('Loc result', () => {
checkMyLocalization();
});
`

What am I supposed to do to make the test work?

Hi!

I am trying to install your ReactNativeLocalization library on my project and I had success to install it to iOS. But I don´t know how can I install it on Android. When I was trying to modify my MainActivity.java I saw my file is different than yours.

This is my MainActivity.java:

package com.booksearch;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "BookSearch";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

   /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage());
    }
}

I am using React Native 0.18

Hi there :)
Is it possible to set the language in one screen for the hole application? I have the problem that I manually force set the language in a settings screen with setLanguage(), but this only applies to the current screen. So when I change to another screen, the language falls back to the default language. Thank you for any help!

Steps taken:

1 . install react-native-localization
2. rnpm link react-native-localization
3. Compile android successful and installed to device.

Error:

undefined is not an object ( evaluating 'localization.language' )

loadModuleImplementation
require.js: 122

Currently the structure to create a LocalizedString object is the following:

langage: {
  label: 'value'
},
langage-2: {
  label: 'value'
}

But as a develop is more likely that i'll delete and edit labels instead of deleting/editing languages. To fix this inefficiency I'd recommend allowing devs to define LocalizedString using the following format:

label: {
  langage-1: 'value',
  langage-2: 'value'
}

Hello, I don't know if it's done specially, but string keys are not supported. Wouldn't it be more logical to write:

Hello {title}, you have ${amount} on your balance

and then

strings.formatString(strings.foo, {title : 'Mr', amount: 10000000})

?

Hi, I created a React-Native project yesterday, and I just installed your library.

I ran the installation commands as specified:

npm install react-native-localization --save
react-native link

My application in the simulator now displays this error:

I killed the simulator, killed the terminal launched by react-native run-ios and reran `react-native run-ios`` but I still got the error.

Any help would be appreciated, thanks :)

Our project is now using ReactNativeLocalization. It supports English (en) and Simplified Chinese (zh-Hans). When i changed the localization of my iPhone to Chinese, Traditional (Hang Kong) i found it doesn't display English nor Simplified Chinese.

After i carefully read LocalizedStrings.js i found _getBestMatchingLanguage didn't return the first item in props as it expected. In addition, in setLanguage:

var localizedStrings = this.props[language];

Should be this?

var localizedStrings = this.props[this.language];

or this ?

var localizedStrings = this.props[bestLanguage];

is there podfile support?

I'm finding a way to do localization in the same way across react-native and browser based react for better consistency.
It turns out that by simply replacing the lines in LocalizedStrings.js

var localization = require('react-native').NativeModules.ReactLocalization;
var interfaceLanguage = localization.language;

with

let interfaceLanguage = (navigator.language || navigator.userLanguage);

the class will work just fine in browser.

So as a suggestion, I think the class itself could be made as a platform independent library.
For 'react-native' and browser, provide a wrapper module to pass in the correct device locale automatically.
Then we can have the same way to do localization across all react apps.

/Users/xxx/www/letsgout/public_html/test/node_modules/react-native-localization/ReactLocalization.m:39:67: error: property 'languageCode' not found on object of type 'NSLocale *'
return [NSString stringWithFormat:@"%@-%@", currentLocale.languageCode, currentLocale.countryCode];

Why?

How can I update a key for all the languages, e.g.:

let strings = new LocalizedStrings({
  en:{
    city:"original city in en",
    area:"original area in en",
  },
  ar: {
    city:"original city in ar",  
    area:"original area in ar",
  }
});

Now, how to update a particular key, like city, in this.

Ran through your installation steps, all worked fine - added the 2 files to the project:

Note, I am getting this warning about RCT_EXPORT:

In my index.ios.js, I added:
var LocalizedStrings = require('./node_modules/react-native-localization/LocalizedStrings');

I run project through Xcode and get this:

I'm changing the app language during runtime (see screenshot).
Once in a certain language a string is missing the default language should be used ('en' in my case, which is the first localization in the Strings.js file).

Instead, the 'last used' language is being displayed..

See attached screenshots. In both the Italian language is currently selected but for one screenshot the Chinese language was used prior to the Italian.

After restarting the app it works as intended (for missing italian strings the 'en' strings are being used)

When app loads:

After changing to Chinese and changing back to Italian

Hi,

Your library is really useful, thanks.
I'm an iOS dev but had to integrate your library with both platforms and hit a problem with Android:

On running ./gradlew lintDebug I get an error

Correctness InvalidPackage: Package not included in Android <path stuff>/okio-1.5.0.jar: Invalid package reference in library; not included in Android: java.nio.file. Referenced from okio.Okio.

Googling brought me to square/okio#58 and I used that and adapted the workaround at http://stackoverflow.com/a/25149514 to find a solution for me that didn't involve editing your library's code because we install it as a node module during our CI job.

To help others who might hit the same issue I suggest you add a lintOptions to your gradle file like https://github.com/oblador/react-native-vector-icons/blob/master/android/build.gradle#L23

Regards
Donnie

In your package.json file you specifed react-native as dependency causing npm to install it twice. Having upgraded react-native to version 0.7.1 your dependency caused some serious issues making my application unexecutable. Having removed the dependency and deleted the react-native folder in your module's module folder solved this. So please remove this dependency, as your great project works fine without it too.

Hey stelfalda!

I ran into an issue when using your repo. In my android emulator (im using Windows OS), when running the code, i get an error;
"undefined is not an object (evaluating 'localization.language').
Is this an exception that is familiar to you? The problem seems to be located in LocalizedStrings.js
I did the installation exactly as described.

Thanks in advance,

Martin

As far as I can tell, this library does not yet support formatting localization. Do plan to support that?

ie: format(strings['This is a {$1} dog'], strings['big']) should return This is a big dog for en, but Este es un perro grande for es

It's something I'm sorely missing in React Native so far, with the React integration of Format.js not yet supporting React Native.

Hi,
I've glanced over the code. Looks like this package is compatible with new import logic introduced in RN25. Although the code looks OK opening this issue anyway so we can track this.

Starting in RN 25 React Native imports wil change:

Requiring React API from react-native will be deprecated:
https://github.com/facebook/react-native/releases/tag/v0.25.1

Instead of:

import React, { Component, View } from 'react-native';

you should now:

import React, { Component } from 'react';
import { View } from 'react-native';

You can also try this codemod built by the community to automatically rewrite all the imports.
https://github.com/sibeliusseraphini/codemod-RN24-to-RN25

Trying to deploy on Iphone 6 now, i get nasty error:

I tryed to reinstall with rnpm install ... command, still no luck.

I want to get current language and i'm using: LocalizedStrings.getLanguage() but it show an error: undefined is not funtion?
How to fix it?
Thank.

It may be useful to grab a string but in a different language without having to call setLanguage twice.
e.g.

LocalizedStrings.getString(key, language);

Hi,

I use your package in my app.
I work on windows with a device and it works. I try to work on Mac with Genymotion and I have a problem : undefined is not an object (evaluating 'localization.language')
The problem is on LocalizedStrings.js line 17.

I think it doesn't find the language ?

Both ReactNativeLocalization and ReactNativeLocalizationPackage are declared in the incorrect package. It should be com.babisoft instead of com.babisoft.ReactNativeLocalization.

Most react-native npm packages do this; eases and standardizes the installation process. Some examples: react-native-video, react-native-linear-gradient, react-native-activity-view.

Is there a way to make code completion work using rn-localization?

Hi stefalda,

Thanks for this great app that we're currently using. Our team decided to move to a single translation file to leverage PhraseApp.

Because of that, we use namespacing to keep things organized. This works great until we look at fall back.

// Using 'it'; translations.homepage.mottoSmall; //fails
{
  en: {
    homepage: {
      mottoSmall: "THIS IS A MOTTO SMALL",
      mottoLarge: "LARGE MOTTO",
    },
  },
  it: {
    homepage: {
      mottoLarge: "LARGE MOTTO IT",
    }
  }
}

// Using 'it'; translations.homepage.mottoSmall; // works
{
  en: {
    homepage: {
      mottoSmall: "THIS IS A MOTTO SMALL",
      mottoLarge: "LARGE MOTTO",
    },
  },
}

Fallbacks only work at 1 level deep (I'm sure that's how it was designed).

iOS supports a number of locales. Most locale identifiers use _ to separate language, country and locale variant.

As of now I'm unable to use this module to specify anything beyond the language, which becomes problematic for localizations where different countries or localities speak the same language or variants of a language thereof.

Reproducing this issue:

Force the locale in Xcode:

  [[NSUserDefaults standardUserDefaults] setObject:[NSArray arrayWithObjects:@"zh_Hans", nil] forKey:@"AppleLanguages"];

Run the project and access the key:

let localizedStatus = new LocalizedStrings({
  en: {
    playing: "Now playing commercial-free!",
    paused: "Tap above to continue listening.",
    stopped: "Tap above to tune in.",
    buffering: "Buffering... Hang tight.",
    error: "Long-press above to restart stream.",
    disconnected: "Connect to the Internet to listen."
  },
  zh_Hans: {
    playing: "现正播放无广告时段！",
    paused: "按上面来继续收听。",
    stopped: "按上面来切换电台。",
    buffering: "正在缓冲...请稍候。",
    error: "长按上面来重新开始播放。",
    disconnected: "收听电台需要连接到因特网。"
  }
});

The actual result is English is output. The expected result is that Simplified Han is output. The same issue occurs for en_US and en_GB locales. As a workaround I've chopped off the country and variant parts of the locale identifier, leaving only the language, i.e. zh.

Now that React Android has been released, will you be supporting that as well?

Is there possibility to add region support to language tags (en-US, en-GB... zh-HK, zh-TW)

More details about this standard can be found here - https://en.wikipedia.org/wiki/IETF_language_tag#ISO_3166-1_and_UN_M.49

Hello. Any ideas how can i do this?

It just would be super useful to load a couple of dictionaries by default, so we have a default translation for single words. E.g:

LocalizedStrings.translate('monday') // returns 'lunes' if user locale is Spanish