React Native Support about js-lingui HOT 13 CLOSED

If it turns out that the branching logic is unnecessarily complex, it might be worth having a separate lib for react-native instead. At the moment I'm just exploring whether js-lingui is a viable alternative to react-intl for React Native use.

from js-lingui.

Thank you very much! 👍

So far it seems that switching spans for Texts might be enough (+ support for style prop), so it should be easy fix. I would rather have one lib which works in both environment than two separate libs. We'll see what's the easier way...

from js-lingui.

🤔 react-intl solves this using textElement prop in IntlProvider: formatjs/formatjs#600

from js-lingui.

That approach makes sense to me

from js-lingui.

Sorry, I was busy with my job and didn't get any chance to work on this issue. I'll continue after 13th August as I'm going on a vacation now.

from js-lingui.

Added defaultRender option toI18nProvider in latest [email protected] release.

Sorry it took so long! ⏳

from js-lingui.

I've just tried adding lingui-react to React Native app and it works.

I had to update babel-preset-react-native to latest release, otherwise babel tried transform files in node_modules as well (which raises Transform error on one file from lingui-react).

{
  "presets": [
    "react-native",
    "lingui-react"
  ]
}

All I had to do was add I18nProvider and set defaultRender prop:

import React from 'react'
import { Provider as ReduxProvider } from 'react-redux'
import dev from 'lingui-i18n/dev'
import { I18nProvider } from 'lingui-react'
import {Text} from 'react-native';
import configureStore from './configureStore'

import Application from './screens'

const Provider = ({ store, children }) =>
  <ReduxProvider store={store}>
    <I18nProvider
      language="en"
      catalogs={{en: {}}}
      development={dev}
      // This is required for react-native
      defaultRender={({ translation }) => <Text>{translation}</Text>}
    >
      {children}
    </I18nProvider>
  </ReduxProvider>

const store = configureStore()
export const rootNavigator = new Application(store, Provider)

rootNavigator.run()

Now I can use component as usual:

// This will render <Text>Login</Text>
<Trans>Login</Trans>

In components, I usually have to use custom rendering element anyway to pass some props:

<Trans render={<Text pointerEvents="none" style={s.buttonText} />}>Login</Trans>

It would be great if there were some shortcut for passing props... Something like:

// other than `Trans` props are passed down to rendered component
<Trans pointerEvents="none" style={s.buttonText}>Login</Trans>

// For plurals, selects and other i18n components, we would have to wrap them inside <Trans> component
<Trans pointerEvents="none" style={s.buttonText}>
  <Plural value={count} one={Book} other={Books} />
</Trans>

However, I'm afraid this would backfire very soon. Adding props to Trans would be backward incompatible :/

What do you think?

from js-lingui.

@tricoder42 does <Trans> pass props to the underlying component? If so, you should be able to do

 <ReduxProvider store={store}>
    <I18nProvider
      language="en"
      catalogs={{en: {}}}
      development={dev}
      // This is required for react-native
      defaultRender={({ translation, ...otherProps }) => <Text {...otherProps}>{translation}</Text>}
    >
      {children}
    </I18nProvider>
  </ReduxProvider>

and then your Text receives them

from js-lingui.

It doesn't. That's what I'm afraid to do. We can't pass all props, because some of them are used by Trans component itself. We could pass all other props, but then adding any new prop to Trans component would be backward incompatible. That's my main concern.

from js-lingui.

@tricoder42 I see. This may be a dumb question, but why would I want to use the components:

<Plural 
  id="msg.plural"
  value={numBooks}
  one={<Trans>{name} has # book</Trans>}
  other={<Trans>{name} has # books</Trans>}
/>

over a function:

i18n.plural({ 
  value: numBooks, 
  one: `${name} # book`, 
  other: `${name} # books`
})

?

The function would be then used like

<MyText>
i18n.plural({ 
  value: numBooks, 
  one: `${name} # book`, 
  other: `${name} # books`
})
</MyText>

thanks a lot! really excited about RN support

from js-lingui.

Yeah, good question :)

I just found it more convenient to write: <Trans>Hello World</Trans> instead of <span>{i18n.tHello World}</span>. When there're inlined components, the difference is even bigger:

<Trans>Hello <strong>world</strong></Trans>

// compared to:
<span>{i18n.t`Hello ${<strong>world</strong>}`}</span>

(The example above isn't supported at the moment, because all i18n method return pure strings, not component trees).

Also, all i18n components are subscribed for locale/catalog changes, so even when the outside component is marked as pure, the translation will update properly. This wouldn't be possible for simple function calls. (Right now it also doesn't work for pure components inside translations, but we'll get there.)

I'm open to any suggestions. I want to have this library as simple as possible, but there're still some edge cases which aren't handled nicely.

from js-lingui.

For other apps, the use cases might be different but personally I only have a couple components that render Text with some styles, and for that purpose I will create components that are wrappers over Trans and that will handle most use cases.

from js-lingui.

This doesnt work for me in react-native with [email protected]
"presets": ["babel-preset-expo", "lingui-react"],

Error:
Unknown option: /home/mobile/node_modules/lingui-react/index.js.withI18n.

from js-lingui.