Support React Native easily

[steida]

The only problem with usage in React Native is span inside components. React Native needs Text. We can fix it easily. Add textElement into intlConfigPropTypes.

// In React Native
<IntlProvider
  textElement={Text}
  // ...
/>

Then all components can use textElement from the context if available.

[jrylan]

100% agree with this approach.

[ericf]

Sure, want to PR this? also s/Element/Component/

[ericf]

The other thing this approach can help with is using the <Formatted*> components within SVGs. Since a nested <IntlProvider> inherits from its parent, it would be a cheap easy way to solve the issue of <span>s not being allowed in SVGs.

[steida]

It's safe to write only <IntlProvider textElement={Foo} />?

[steida]

There are two another issues for universal react-intl:

• All components must accept style prop to allow inline styles. Why? That's because style inheritance is not safe nor explicit, so style prop is the must.
• All components must provide setNativeProps method http://facebook.github.io/react-native/releases/0.31/docs/direct-manipulation.html React Native can be runtime detected very cheaply. It's the must Formatted* do not work with TouchableHighlight este/este#1046

Can I send it in one pull request?

[ericf]

That's because style inheritance is not safe nor explicit, so style prop is the must.

This sort of sucks as it breaks the abstraction.

All components must provide setNativeProps method

Can it just be a function that forwards the call onto the <Text> child?

[steida]

Which abstraction it breaks?
Yes, it's just a forward https://github.com/este/este/blob/master/src/native/app/components/Text.react.js#L34

[steida]

As for style inheritance. I think I was wrong. A browser can inherit them and the Text component in React Native inherits as well. http://facebook.github.io/react-native/releases/0.31/docs/text.html#nested-text

I had some issues with that, but I need to investigate it more.

[ericf]

Which abstraction it breaks?

Sebastian has a good talk on this: https://www.youtube.com/watch?v=Zemce4Y1Y-A

A browser can inherit them and the Text component in React Native inherits as well.

Okay that's much better and matches what I remember about React Native. I don't want to introduce a style prop on all of the React Intl components.

[steida]

I see, still, the text styles seem to be universal among React and React native. But you are right, it could be abstracted. Have you read this awesome article?

Notice how none of the elements have a className or style prop. Using className or style props at this level could be considered a code smell.

http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/

I think we can reconsider style attribute later, if we will need it.

[steida]

Btw, I asked Sebastian Markbåge about that and he promised to respond after a weekend vacation.

[AlessandroCorradini]

@ericf You could detect if is react-native or not like so:
https://github.com/erikras/redux-form/blob/master/src/isReactNative.js

if is react-native, set the "defaultComponent" to <Text>, else to <span>.

[jrylan]

@AlessandroCorradini that's a decent approach, but we still end up with the issue of needing to specify the use of <text> within an SVG element. <span> does not work within an SVG.

[AlessandroCorradini]

<Text> is the react-native component, it doesn't need a SVG element

[jrylan]

@AlessandroCorradini <text> (lowercase t) is for SVG:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text

<Text> (uppercase T) is for react-native.

[AlessandroCorradini]

It's my mistake sorry :D I was in a hurry to write. I meant Text component.

[AlessandroCorradini]

I thought..my approach need dependency with react-native and this isn't good for react (not react-native) users.
Instead, you could add a component prop (not required). If it is provided, render this component like so, else render a regular span:

<Component {...this.props}>{this.props.value}</Component>
I don't know the exact prop than contains the translated value, this.props.value is "placeholder"

[jrylan]

@AlessandroCorradini I don't believe the prop idea is a good approach, because if you intend to create universal apps (using something like react-native-web), you would need to specify the prop every single time you used a react-intl component. It's really best to define the text element to use at the IntlProvider level.

The approach that @steida outlined in the first post is the perfect solution, and can easily be adjusted to accommodate SVGs as well, you would just wrap an SVG in another instance of IntlProvider, with textElement='text' or something along those lines.

[AlessandroCorradini]

I'm agree with you. Now I'm using this custom component to use this library into react-native. It's display a warning but works:

C:\testApp\node_modules\react-native\Libraries\JavaScriptAppEngine\Initialization\ExceptionsM…:76Warning: Failed prop type: Invalid proptagNameof typefunctionsupplied toFormattedMessage, expectedstring.

TranslateText.js (Component)

'use strict';

import React from 'react';
import {Text} from 'react-native';
import {FormattedMessage} from 'react-intl';

class TranslateText extends React.Component {
    render() {
        return(
            <FormattedMessage tagName={Text} {...this.props} />
        )
    }
}

export default TranslateText;

Terms.js (Route)

'use strict';

import React from 'react';
import {Text, View} from 'react-native';
import Container from '../../components/Container';
import TranslateText from '../../components/TranslateText';

class TermsPage extends React.Component {
  render() {
    return (
        <Container>
          <TranslateText id="hello" defaultMessage="hello"/>
          </Container>
    );
  }
}



export default TermsPage;

[steida]

@AlessandroCorradini Remember that browser code can import anything from Native and vice versa. And no, require isn't a solution because dependencies must be statically analyzable.

[mschipperheyn]

+1 @steida

[mschipperheyn]

To augment my +1: it's preferable to NOT detect RN vs ReactJS and automatically decide on the tag to use. RN Docs state that Text formatting is not passed through the tree like in HTML/css and recommends using a customized Text component to guarantee your fonts etc are correct. So, it might be preferable to create AText component that renders the Text with your font preferences, in which case you want AText to be the rendering component for react-intl.

[mschipperheyn]

Any ETA on this one? Is it on the radar or one of those "maybe, if we find some spare time, but probably not"

[antoinerousseau]

You can already use it very easily in React Native, as explained in #119 (comment)

[ericf]

@brentvatne React Fiber should allow a component's render() method to return a string, not sure how React Native will handle this, but it would be ideal for React Intl to use.

[mschipperheyn]

I wonder why we're veering of into conceptual idea territory when the initial post in this thread offers a perfect solution.

[ericf]

@mschipperheyn if you're eager to get the short-term solution in, would you mind opening a PR for it?

[mschipperheyn]

Hi @ericf , I don't have a lot of time but I'll give it a go and see where I end up

[mschipperheyn]

Ok, have a look and tell me what you think: https://github.com/mschipperheyn/react-intl
It would still need some tests for react-native. But I made the changes and updated the README. I'm not sure yet if everything will work on React-Native, but I just want some feedback to hear if this is the right track

[ericf]

@mschipperheyn can you open a PR, even if it's a WIP one?

[mschipperheyn]

#739

[mschipperheyn]

Can someone help me test this? Should I deploy as tmp on npm to facilitate?

[mschipperheyn]

I haven't had the time to test this in RN yet and write specific tests for it yet, (I prob will have time over the holidays) but since the changes make the react-intl more generically applicable (not depending on span), without requiring code changes, would it be better if I remove the React Native specific documentation updates, so it can be merged and as such can receive some testing in the wild for RN?

[mschipperheyn]

Ok, so I removed the react-native references from the pull request. My hope is that this makes react-intl usable in React-Native without advertising as such and hopefully generate some useful input from testing in the wild. Also, I hope this will make this merge request acceptable to be applied now instead of later.

Basically, the pull request is now "just" a change that eliminates the dependency on 'span' and makes the tag used to encompass the text configurable by specifying a textComponent attribute on the provider tag which defaults to span but can also be set as textComponent={Text}.

If there are any documentation updates necessary to facilitate the acceptance of this merge request, I'd be happy to make them.

[mschipperheyn]

@ericf can you give me feedback, please? Would love to see this implemented

[ericf]

This is now in react-intl@2.2.0 🎉
https://github.com/yahoo/react-intl/releases/tag/v2.2.0

[ericf]

I added a note about <IntlProvider textComponent> on the Wiki:
https://github.com/yahoo/react-intl/wiki/Components#intlprovider

It would be great if someone wanted to add more comprehensive docs to the Wiki about using with React Native and even including an example app in the repo at /examples ❤️

[mschipperheyn]

I already have this ready. I just removed it from the deploy to expedite its release. I will add some stuff

[steida]

As a creator of this issue, I changed my mind now. Now I think injectIntl should be used everywhere. It's nice with flowtype checking and auto-complete and definitely less verbose. <FormatWhatever seems to be the unnecessary abstraction for me. Feel free to correct me.

[ericf]

<FormatWhatever seems to be the unnecessary abstraction for me. Feel free to correct me.

@steida React Intl's components provide an optimization for re-renders, and a component like <FormattedRelative> does auto-ticking, and <FormattedMessage> supports rich-text formatting — and this feature is about to be dramatically improved: #513 (comment)

[ghost]

For me, I worked around the issue by calling the formatMessage function which returns just the string, no html tags like FormattedMessage does. Here's an example:

// Add intl to contextTypes, so it can be access with this.intl
MyComponentName.contextTypes = {
  intl: PropTypes.object.isRequired,
};

// Inside my compontent
class MyComponentName extends React.PureComponent {
  render() {
    <Text>{ this.context.intl.formatMessage({ ...messages.home }) }</Text>
  }
}

The object passed into formatMessage is the same that you would pass into FormattedMessage

<FormattedMessage {...messages.home } />

[steida]

@steida React Intl's components provide an optimization for re-renders, and a component like does auto-ticking, and supports rich-text formatting — and this feature is about to be dramatically improved: #513 (comment)

I see your points, still. An optimization for re-renders is nice, but it's task for my view component I suppose. Yep, FormattedRelative does sense. FormattedMessage will not work for React Native I guess, feel free to correct me.

The reason why I prefer (maybe I am wrong) intl is flow typing. I would love to have typed messages.
See:

<FormattedMessage
  defaultMessage="Starter kit for universal apps."
  id="app.description"
/>

How to detect missing message id? It's possible, but it would require a lot of boilerplate I guess.

Also, check flow-typed/flow-typed#981

[39otrebla]

It seems FormattedMessage does not support other react-native components as values. For example, the following code produces only Hello, everything after the first { gets lost:

const messages = {
  "HelloAll": "Hello{all}!"
};

[...]

const allText = <Text>, world</Text>;

[...]

render() {
  return <FormattedMessage id="HelloAll" values={{ all: allText }} />;
}

It's quite annoying since we have tons of custom Text components to highlight text around the app.

Does anyone know if there's another way to achieve this in react-native?

EDIT
intl.formatMessage() doesn't work either, it would print: Hello[object Object]!.

[longlho]

@39otrebla can u create a separate issue for tracking? This sounds like a bug.

[39otrebla]

I'm not sure this is a bug, react-intl is not explicitly developed for react-native.. isn't it? Indeed, it seems that FormattedMessage doesn't recognize native tags because they are objects rather than strings, as well as formatMessage() (indeed, the latter returns Hello[object Object]! as native tags most likely do not implement toString()).

It sounds more like a feature request to me. Let me know.

[longlho]

We do support passing arbitrary objects in (there's no explicit check if it's a React component or anything) so this is a bug to me.

Are you using latest react-intl version btw?

[antoinerousseau]

@39otrebla React Native is supported, so it looks like a bug (if you are using a recent version of react-intl), because react nodes in values should work.

[39otrebla]

@antoinerousseau @longlho #1430 . Thanks.