frostney / react-intl-native

react-intl components for React Native

react-intl-native

react-intl convinience components for React Native

While react-intl allows us to use formatMessage or passing in a function, this becomes tiresome if you have to do this for each. This module does the latter and wraps it all in a Text component allowing you to pass in style to provide custom styling.

Installation

$ npm install react-intl-native

Usage

Wrap your main component inside react-intls IntlProvider like you would in your web application:

import IntlProvider from 'react-intl';

<IntlProvider locale="en">
  <MainView />
</IntlProvider>

FormattedDate

<FormattedDate
  weekday="long"
  value={Date.now()}
  style={{ fontWeight: 'bold' }} />

More information on date formatting options: https://github.com/yahoo/react-intl/wiki/Components#date-formatting-components

FormattedHTMLMessage

<FormattedHTMLMessage
  defaultMessage="Hello there"
  style={{ fontWeight: 'bold' }} />

FormattedMessage

<FormattedMessage
  defaultMessage="Hello there"
  style={{ fontWeight: 'bold' }} />

FormattedNumber

This is the only component that differs slightly from the original component. For the formatting style you need to use formatStyle instead of style. style is being reserved for the component styling.

<FormattedNumber
  formatStyle="currency"
  value={1000}
  style={{ fontWeight: 'bold' }} />

More information on number formatting options: https://github.com/yahoo/react-intl/wiki/Components#formattednumber

FormattedPlural

<FormattedPlural
  value={10}
  one="message"
  other="messages"
  style={{ fontWeight: 'bold' }} />

More information on plural formatting options: https://github.com/yahoo/react-intl/wiki/Components#formattedplural

FormattedRelative

<FormattedRelative
  value={Date.now()}
  style={{ fontWeight: 'bold' }} />

More information on date formatting options: https://github.com/yahoo/react-intl/wiki/Components#date-formatting-components

FormattedTime

<FormattedTime
  value={Date.now()}
  hour="numeric"
  style={{ fontWeight: 'bold' }} />

More information on date formatting options: https://github.com/yahoo/react-intl/wiki/Components#date-formatting-components

For more information, take a look the react-intl documentation: https://github.com/yahoo/react-intl/wiki/Components

License

MIT

react-intl-native's Issues

Error if pass <FormattedMessage /> as a child into TouchableOpacity

Hi!
Can you update FormattedMessage with this code?

setNativeProps = nativeProps => {
  this._root.setNativeProps(nativeProps)
}

Than it will be possible to use as a child of TouchableOpacity.

Look more here formatjs/formatjs#1081

Invariant Violation: Expected a component class, got [object Object].

Hi,

I followed all steps and added below code in

<FormattedDate
weekday="long"
value={Date.now()}
style={{ fontWeight: 'bold' }} />

But I get Invariant Violation: Expected a component class, got [object Object]. error

Can you please share an example how to use this package

Unmet peer dependecy for ReactNative 0.45

I got "UNMET PEER DEPENDENCY react@^0.14.9 || ^15.0.0" when try to install package for current ReactNative version (0.45).

"babelHelpers typeof" issue when adding this package in my RN app

Hi,

From what I can see about this error, it's because the package is providing too much (unnecessary) transformations. I see that es2015 is used to transform this package.

Why is this transformed? I am new to RN (but not React & babel) and it seems that most package on npm are not transformed when published. Am I right by thinking we should remove some transformation here? (note that I am using RN 0.34)

Allow to use custom Text component

import { Text } from 'react-native';

This is a nice default, but one might want to use another variation of this component

There is a context.textComponent option that you should consider using in case the default Text of React-native is not what the user wants to use (this is my case, because I use Text component from Glamorous)

See https://github.com/yahoo/react-intl/blob/master/src/components/message.js#L59

babel-plugin-react-intl

Can we work with https://github.com/yahoo/babel-plugin-react-intl?