New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Localization #2349

Closed
axelg12 opened this Issue Aug 16, 2015 · 31 comments

Comments

Projects
None yet
@axelg12
Copy link

axelg12 commented Aug 16, 2015

I've been developing a react-native app with great success but now I need to make it available in different languages based on phone settings. I've come across this library https://github.com/stefalda/ReactNativeLocalization which looks promising but my question is, do you have any official tool to expose the IOS NSLocalizedString or any plan to expose it later ?

@jozan

This comment has been minimized.

Copy link
Contributor

jozan commented Aug 16, 2015

I too have a need to localize my app. ReactNativeLocalization looks good but I'd like to have that feature supported in core.

@axelg12

This comment has been minimized.

Copy link

axelg12 commented Aug 17, 2015

@gudmundurmar

This comment has been minimized.

Copy link

gudmundurmar commented Aug 17, 2015

+1

1 similar comment
@varmab

This comment has been minimized.

Copy link

varmab commented Aug 17, 2015

+1

@vjeux

This comment has been minimized.

Copy link
Contributor

vjeux commented Aug 18, 2015

We use a localization library and pipeline that's very custom to Facebook and that is not easy to extract out. So don't expect much from us in the near term.

I would love if there was a pure-js library that does translations that we could just npm install instead of having it part of react native. Translations is a problem that everyone faces and not tied to react-native.

@ide

This comment has been minimized.

Copy link
Collaborator

ide commented Aug 18, 2015

Just an idea but perhaps a Babel plugin could address this. Since the packager loads .babelrc automatically, you could have the plugin do the i18n transform during packaging. This works on Android for free then too.

@MattFoley

This comment has been minimized.

Copy link
Contributor

MattFoley commented Aug 18, 2015

We've been looking at the possibility of using Intl.js of Format.js.

There's an open issue for the React integration that seems to suggest that the changes required would not be scary. yahoo/react-intl#119

@miracle2k

This comment has been minimized.

Copy link

miracle2k commented Sep 14, 2015

There is also the issue of RTL layouts. I would love for react-native support a flexbox/CSS extension for this, in a similar way to how Android or iOS auto layout implement this, with properties such as paddingStart (instead of paddingLeft) .

@vjeux

This comment has been minimized.

Copy link
Contributor

vjeux commented Sep 14, 2015

@miracle2k: I actually want to get it auto-swapped by default instead of having the developer write paddingStart as very few people do. Would love a pull request!

@ide

This comment has been minimized.

Copy link
Collaborator

ide commented Sep 14, 2015

@vjeux what do you think about generalized StyleSheet plugins? For example you could inject StyleSheet.addTransformer(new RtlStyleSheetPlugin) which flips directional style props. (Basically middleware but I think that's just not a good word.)

Also it is sometimes useful to distinguish left/right from start/end. For example if you build a layout for left-handed people you don't always want to flip that just because they speak Hebrew.

@vjeux

This comment has been minimized.

Copy link
Contributor

vjeux commented Sep 14, 2015

I like the middleware idea, but unclear if it should be inside of StyleSheet.create. If you use inline styles outside of StyleSheet.create (we do it all the time for dynamic values) then you won't get it and your app will feel broken.

This also come up a lot with browser pre-fixing

cc @sebmarkbage who is thinking a lot about this specific issue.

@vjeux

This comment has been minimized.

Copy link
Contributor

vjeux commented Sep 14, 2015

We just implemented a differ and compute functions for specific props. Helps with color pre-processing and transforms

@ide

This comment has been minimized.

Copy link
Collaborator

ide commented Sep 14, 2015

Great point about inline styles. Two things I'd like to see with an i18n system are to be able to customize it (middleware) and for it to be available on npm for awhile so it can evolve and eventually converge on a few solutions.

@alvaromb

This comment has been minimized.

Copy link
Contributor

alvaromb commented Sep 21, 2015

I have a broader question related more with the React philosophy. Should the i18n strings live with each component or all the localised strings in a separate file?

@grabbou

This comment has been minimized.

Copy link
Collaborator

grabbou commented Oct 11, 2015

BTW, how about navigator.language and navigator.languages? Looks like we can easily follow the specification in this case. In my current project, I am successfully using intl (https://github.com/andyearnshaw/Intl.js) that does the job just fine, but I kinda miss the current language value working out-of-the-box.

Linked module works fine, but there's no point in using custom parsers over standards, e.g: https://github.com/stefalda/ReactNativeLocalization/blob/master/LocalizedStrings.js#L88-L94
since with intl, we can just do:

var string = "Hey {firstName}, how's going?"
console.log(format(string, userObject)); // Hey Mike, how's going?

format basically creates IntlMessageFormat instance, removed for the sake of example.

@vjeux

This comment has been minimized.

Copy link
Contributor

vjeux commented Oct 11, 2015

@grabbou if we can get Intl.js working on-top of react native that would be great indeed

@grabbou

This comment has been minimized.

Copy link
Collaborator

grabbou commented Oct 11, 2015

I can tell you that this:

import './node_modules/intl/index.js';
import './node_modules/intl/locale-data/jsonp/en.js';

works just fine (have to tell, it was a big surprise)

@leeight

This comment has been minimized.

Copy link
Contributor

leeight commented Nov 21, 2015

+1

@alfonsodev

This comment has been minimized.

Copy link

alfonsodev commented Dec 3, 2015

@miracle2k @vjeux +1 for automatic approach, similar to css direction that you can apply to html element to mirror everything.
I read apple is supporting right to left languages but how does it fit into the react-native View system ?
Could you throw some light on this ?

@asaf

This comment has been minimized.

Copy link

asaf commented Feb 29, 2016

For right alignment, on container level, I define alignItems: 'flex-end', works pretty good with hebrew.

@miracle2k

This comment has been minimized.

Copy link

miracle2k commented Mar 15, 2016

For RTL, it seems that css-layout already has some support for a direction attribute (

typedef enum {
), and I was taken by surprise how well supported the CSS Logical Properties spec is (http://caniuse.com/#search=logical).

Supporting these two things in react-native would get us a long way, and it seems a sensible and standards-supported approach.

@necolas

This comment has been minimized.

Copy link
Contributor

necolas commented Mar 18, 2016

I was thinking about this for react-native-web too, because it blocks us from the possibility of using it in production at Twitter.

Our existing CSS tooling auto-flips padding-left, background positions, etc. Probably more than is practically necessary. But we also have a special syntax to avoid flipping specific declarations (for example, the @username is styled to always be presented LTR). And whatever your writing direction we always present RTL text right-to-left and LTR text left-to-right. So we need to be able to say "flip all horizontal padding/margin/border/textAlign except for these cases".

Using properties like paddingStart supports that use case, because you can expect paddingLeft to always set padding on the left and there's no babel transform required. It would be fairly easy to build into web's StyleSheet. It does mean that its easier for people to build layouts that don't properly adjust to RTL, but in our experience, without the ability to prevent certain props/values from being auto-flipped you can't produce a good RTL experience.

What are some ways that would support the use case described?

@vjeux

This comment has been minimized.

Copy link
Contributor

vjeux commented Mar 18, 2016

At fb, this is also something that we need to solve in order to be able to use inline style on our main website. The way we enable disabling the autoflip is via a comment /* @noflip */ above the rule.

I've been thinking a lot about this for react native and I'm convinced that paddingStart instead of paddingLeft is a mistake. You're going to face a never ending battle to get developers to switch their existing behavior. And the worse is that it'll work doing left, so you'll have a ton of mixed code in your codebase.

The best way imo is to convert paddingLeft to right in rtl and provide another property to force left like paddingLeftRTL (we can bikeshed on the exact naming).

@necolas

This comment has been minimized.

Copy link
Contributor

necolas commented Mar 18, 2016

We use something very similar at Twitter. I agree with the drawback of relying on paddingStart, etc., style props. That would not be viable for us either, and all the OSS RN components would need changing.

Inventing new style props excluded from flipping would work. I can try prototyping it for Web in the next few weeks

@necolas necolas referenced this issue Mar 20, 2016

Closed

Investigate RTL support #31

1 of 2 tasks complete
@kevinresol

This comment has been minimized.

Copy link
Contributor

kevinresol commented Apr 1, 2016

If not having a full-blown localization support, can we at least have the API to extract the device locale information, e.g. navigator.language?

@grabbou

This comment has been minimized.

Copy link
Collaborator

grabbou commented Apr 2, 2016

I am thinking we could add a JS module similar to Dimensions that exposes these properties, also include language & languages as per spec (attach to window.navigator) to support web i18n modules. I got that working on iOS, can submit a PR if that works.

@necolas

This comment has been minimized.

Copy link
Contributor

necolas commented Apr 3, 2016

For Web, we can only reliably infer the language on the server.

@lacker

This comment has been minimized.

Copy link
Contributor

lacker commented Oct 20, 2016

Since this issue is "for discussion" and there hasn't been any discussion in the past few months, I'm closing it. It would be great if there was some library that made this better, but nobody seems to have any plans to work on it at this time. If someone does have such plans in the future, I suggest opening a new issue as an "RFC" with some specifics about how they'd build this.

@lacker lacker closed this Oct 20, 2016

@jonrh

This comment has been minimized.

Copy link

jonrh commented May 2, 2017

Just in case anybody stumbles upon this issue looking for what @axelg12 was originally asking about, a way to retrieve the language locale strings (en, fr, etc) from the device.

If you just want the strings without extra libraries

import {NativeModules} from 'react-native'
let locale_ios = NativeModules.SettingsManager.settings.AppleLocale; // en_US
let locale_android = NativeModules.I18nManager.localeIdentifier;

This is the approach that I took. Requires a bit of extra work. I created a custom function that essentially extracts the first two letters if they exists and some domain specific things for my app. From this StackOverflow answer.

By using a library

https://github.com/rebeccahughes/react-native-device-info

If you are using fnando/i18n

https://github.com/AlexanderZaytsev/react-native-i18n

@xareelee

This comment has been minimized.

Copy link

xareelee commented Jun 20, 2017

@how to add attributes (bold, color, etc.) to words in a i18n string?

// en.js
{
  "hello": "<b>Greeting, {{name}}.</b> I'm JARVIS."
}

// React Native
<Text>I18n.t("hello", { name: "Xavier" })</Text>
  • What I got: <b>Greeting, Xavier.</b> I'm JARVIS.
  • Expected: Greeting, Xavier. I'm JARVIS.
@lavarajallu

This comment has been minimized.

Copy link

lavarajallu commented Jul 4, 2017

Please Provide Telugu Language ,This is Very Popular in India Country, and Please Make it Telugu, Hindi & Tamil Etc.

@facebook facebook locked as resolved and limited conversation to collaborators Jul 21, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.