├── .babelrc
├── .eslintignore
├── .eslintrc.yml
├── .gitignore
├── .travis.yml
├── README.md
├── ava-jsdom-setup.js
├── package.json
├── src
    ├── FormattedDate.js
    ├── FormattedHTMLMessage.js
    ├── FormattedMessage.js
    ├── FormattedMessage.test.js
    ├── FormattedNumber.js
    ├── FormattedPlural.js
    ├── FormattedRelative.js
    ├── FormattedTime.js
    └── index.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "es2015-loose",
 4 |     "react"
 5 |   ],
 6 |   "plugins": [
 7 |     "transform-class-properties",
 8 |     "transform-export-extensions"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | 


--------------------------------------------------------------------------------
/.eslintrc.yml:
--------------------------------------------------------------------------------
1 | extends: airbnb
2 | parser: babel-eslint
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | 
4 | dist
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "node"
 4 |   - "lts/*"
 5 | 
 6 | script:
 7 |   - npm run lint
 8 |   - npm test
 9 | 
10 | after_success:
11 |   - npm run coverage | codecov
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-intl-native
  2 | 
  3 | [![Build Status](https://travis-ci.org/frostney/react-intl-native.svg?branch=master)](https://travis-ci.org/frostney/react-intl-native) [![Dependency Status](https://david-dm.org/frostney/react-intl-native.svg)](https://david-dm.org/frostney/react-intl-native) [![devDependency Status](https://david-dm.org/frostney/react-intl-native/dev-status.svg)](https://david-dm.org/frostney/react-intl-native#info=devDependencies) [![codecov.io](https://codecov.io/github/frostney/react-intl-native/coverage.svg?branch=master)](https://codecov.io/github/frostney/react-intl-native?branch=master)
  4 | 
  5 | `react-intl` convinience components for React Native
  6 | 
  7 | 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.
  8 | 
  9 | ## Installation
 10 | 
 11 | ```
 12 | $ npm install react-intl-native
 13 | ```
 14 | 
 15 | ## Usage
 16 | 
 17 | Wrap your main component inside `react-intl`s `IntlProvider` like you would in your web application:
 18 | 
 19 | ```javascript
 20 | import IntlProvider from 'react-intl';
 21 | ```
 22 | 
 23 | ```jsx
 24 | <IntlProvider locale="en">
 25 |   <MainView />
 26 | </IntlProvider>
 27 | ```
 28 | 
 29 | #### FormattedDate
 30 | 
 31 | ```jsx
 32 | <FormattedDate
 33 |   weekday="long"
 34 |   value={Date.now()}
 35 |   style={{ fontWeight: 'bold' }} />
 36 | ```
 37 | 
 38 | More information on date formatting options: https://github.com/yahoo/react-intl/wiki/Components#date-formatting-components
 39 | 
 40 | #### FormattedHTMLMessage
 41 | 
 42 | ```jsx
 43 | <FormattedHTMLMessage
 44 |   defaultMessage="Hello there"
 45 |   style={{ fontWeight: 'bold' }} />
 46 | ```
 47 | 
 48 | #### FormattedMessage
 49 | 
 50 | ```jsx
 51 | <FormattedMessage
 52 |   defaultMessage="Hello there"
 53 |   style={{ fontWeight: 'bold' }} />
 54 | ```
 55 | 
 56 | #### FormattedNumber
 57 | 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.
 58 | 
 59 | ```jsx
 60 | <FormattedNumber
 61 |   formatStyle="currency"
 62 |   value={1000}
 63 |   style={{ fontWeight: 'bold' }} />
 64 | ```
 65 | 
 66 | More information on number formatting options: https://github.com/yahoo/react-intl/wiki/Components#formattednumber
 67 | 
 68 | #### FormattedPlural
 69 | 
 70 | ```jsx
 71 | <FormattedPlural
 72 |   value={10}
 73 |   one="message"
 74 |   other="messages"
 75 |   style={{ fontWeight: 'bold' }} />
 76 | ```
 77 | 
 78 | More information on plural formatting options: https://github.com/yahoo/react-intl/wiki/Components#formattedplural
 79 | 
 80 | #### FormattedRelative
 81 | 
 82 | ```jsx
 83 | <FormattedRelative
 84 |   value={Date.now()}
 85 |   style={{ fontWeight: 'bold' }} />
 86 | ```
 87 | 
 88 | More information on date formatting options: https://github.com/yahoo/react-intl/wiki/Components#date-formatting-components
 89 | 
 90 | #### FormattedTime
 91 | 
 92 | ```jsx
 93 | <FormattedTime
 94 |   value={Date.now()}
 95 |   hour="numeric"
 96 |   style={{ fontWeight: 'bold' }} />
 97 | ```
 98 | 
 99 | More information on date formatting options: https://github.com/yahoo/react-intl/wiki/Components#date-formatting-components
100 | 
101 | 
102 | 
103 | For more information, take a look the `react-intl` documentation: https://github.com/yahoo/react-intl/wiki/Components
104 | 
105 | ## License
106 | 
107 | MIT
108 | 


--------------------------------------------------------------------------------
/ava-jsdom-setup.js:
--------------------------------------------------------------------------------
1 | require('babel-register');
2 | require('babel-polyfill');
3 | 
4 | global.document = require('jsdom').jsdom('<body></body>');
5 | global.window = document.defaultView;
6 | global.navigator = window.navigator;
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-intl-native",
 3 |   "version": "2.1.2",
 4 |   "description": "Convenience components for react-intl's `format*` API in React Native",
 5 |   "main": "dist/react-intl-native.js",
 6 |   "jsnext:main": "dist/react-intl-native.es2015.js",
 7 |   "scripts": {
 8 |     "prebuild": "rimraf dist",
 9 |     "build": "rollup-babel-lib-bundler -f cjs,es6 src/index.js",
10 |     "prepublish": "in-publish && npm run build || not-in-publish",
11 |     "lint": "eslint src",
12 |     "precommit": "npm run lint",
13 |     "test": "ava --verbose 'src/**/*.test.js'",
14 |     "coverage": "nyc --reporter lcov --reporter html ava 'src/**/*.test.js'"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/frostney/react-intl-native.git"
19 |   },
20 |   "keywords": [
21 |     "react",
22 |     "react-native",
23 |     "react-intl",
24 |     "intl",
25 |     "i18n",
26 |     "internationalization",
27 |     "internationalisation",
28 |     "ios",
29 |     "android"
30 |   ],
31 |   "files": [
32 |     "dist",
33 |     "src"
34 |   ],
35 |   "ava": {
36 |     "babel": "inherit",
37 |     "require": "./ava-jsdom-setup"
38 |   },
39 |   "rollupBabelLibBundler": {
40 |     "babel": {
41 |       "presets": [
42 |         "es2015-loose-rollup",
43 |         "react"
44 |       ],
45 |       "plugins": [
46 |         "transform-class-properties",
47 |         "transform-export-extensions"
48 |       ]
49 |     }
50 |   },
51 |   "author": "Johannes Stein",
52 |   "license": "MIT",
53 |   "bugs": {
54 |     "url": "https://github.com/frostney/react-intl-native/issues"
55 |   },
56 |   "homepage": "https://github.com/frostney/react-intl-native#readme",
57 |   "dependencies": {
58 |     "prop-types": "^15.6.0",
59 |     "react-intl": "^2.1.2"
60 |   },
61 |   "devDependencies": {
62 |     "ava": "^0.14.0",
63 |     "babel-eslint": "^6.0.4",
64 |     "babel-plugin-transform-class-properties": "^6.6.0",
65 |     "babel-plugin-transform-export-extensions": "^6.5.0",
66 |     "babel-polyfill": "^6.7.4",
67 |     "babel-preset-es2015-loose": "^7.0.0",
68 |     "babel-preset-es2015-loose-rollup": "^7.0.0",
69 |     "babel-preset-react": "^6.5.0",
70 |     "babel-register": "^6.7.2",
71 |     "codecov": "^1.0.1",
72 |     "enzyme": "^2.2.0",
73 |     "eslint": "^2.9.0",
74 |     "eslint-config-airbnb": "^8.0.0",
75 |     "eslint-plugin-import": "^1.6.1",
76 |     "eslint-plugin-jsx-a11y": "^1.0.4",
77 |     "eslint-plugin-react": "^5.0.1",
78 |     "in-publish": "^2.0.0",
79 |     "jsdom": "^9.12.0",
80 |     "nyc": "^6.4.0",
81 |     "react": "^0.14.9",
82 |     "react-addons-test-utils": "^0.14.8",
83 |     "react-dom": "^0.14.9",
84 |     "react-native": "^0.25.1",
85 |     "rimraf": "^2.5.2",
86 |     "rollup-babel-lib-bundler": "^2.5.5"
87 |   }
88 | }
89 | 


--------------------------------------------------------------------------------
/src/FormattedDate.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Text } from 'react-native';
 4 | import Intl from 'react-intl';
 5 | 
 6 | const FormattedDate = props => (
 7 |   <Intl.FormattedDate {...props}>
 8 |     {localized => <Text style={props.style}>{localized}</Text>}
 9 |   </Intl.FormattedDate>
10 | );
11 | 
12 | FormattedDate.propTypes = {
13 |   style: PropTypes.any,
14 | };
15 | 
16 | export default FormattedDate;
17 | 


--------------------------------------------------------------------------------
/src/FormattedHTMLMessage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Text } from 'react-native';
 4 | import Intl from 'react-intl';
 5 | 
 6 | const FormattedHTMLMessage = props => (
 7 |   <Intl.FormattedHTMLMessage {...props}>
 8 |     {localized => <Text style={props.style}>{localized}</Text>}
 9 |   </Intl.FormattedHTMLMessage>
10 | );
11 | 
12 | FormattedHTMLMessage.propTypes = {
13 |   style: PropTypes.any,
14 | };
15 | 
16 | export default FormattedHTMLMessage;
17 | 


--------------------------------------------------------------------------------
/src/FormattedMessage.js:
--------------------------------------------------------------------------------
 1 | import React, { isValidElement, createElement } from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Text } from 'react-native';
 4 | import Intl from 'react-intl';
 5 | 
 6 | const FormattedMessage = props => (
 7 |   <Intl.FormattedMessage {...props}>
 8 |     {(...nodes) => {
 9 |       const newNodes = nodes.map((node) => {
10 |         if (!isValidElement(node)) {
11 |           return (<Text style={props.style}>{node}</Text>);
12 |         }
13 |         return node;
14 |       });
15 |       return createElement(Text, { style: props.style }, ...newNodes);
16 |     }}
17 |   </Intl.FormattedMessage>
18 | );
19 | 
20 | FormattedMessage.propTypes = {
21 |   style: PropTypes.any,
22 | };
23 | 
24 | export default FormattedMessage;
25 | 


--------------------------------------------------------------------------------
/src/FormattedMessage.test.js:
--------------------------------------------------------------------------------
1 | import test from 'ava';
2 | // import FormattedMessage from './FormattedMessage';
3 | 
4 | // TODO: Make it a real unit test!
5 | test(t => {
6 |   t.truthy(1);
7 | });
8 | 


--------------------------------------------------------------------------------
/src/FormattedNumber.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Text } from 'react-native';
 4 | import Intl from 'react-intl';
 5 | 
 6 | const FormattedNumber = props => {
 7 |   const style = props.style;
 8 | 
 9 |   const formatOptions = {
10 |     localeMatcher: props.localeMatcher,
11 |     style: props.formatStyle,
12 |     currency: props.currency,
13 |     currencyDisplay: props.currencyDisplay,
14 |     useGrouping: props.useGrouping,
15 |     minimumIntegerDigits: props.minimumIntegerDigits,
16 |     minimumFractionDigits: props.minimumFractionDigits,
17 |     maximumFractionDigits: props.maximumFractionDigits,
18 |     minimumSignificantDigits: props.minimumSignificantDigits,
19 |     maximumSignificantDigits: props.maximumSignificantDigits,
20 |     value: props.value,
21 |   };
22 | 
23 |   return (
24 |     <Intl.FormattedNumber {...formatOptions}>
25 |       {localized => <Text style={style}>{localized}</Text>}
26 |     </Intl.FormattedNumber>
27 |   );
28 | };
29 | 
30 | FormattedNumber.propTypes = {
31 |   style: PropTypes.any,
32 |   localeMatcher: PropTypes.any,
33 |   formatStyle: PropTypes.any,
34 |   currency: PropTypes.any,
35 |   currencyDisplay: PropTypes.any,
36 |   useGrouping: PropTypes.any,
37 |   minimumIntegerDigits: PropTypes.any,
38 |   minimumFractionDigits: PropTypes.any,
39 |   maximumFractionDigits: PropTypes.any,
40 |   minimumSignificantDigits: PropTypes.any,
41 |   maximumSignificantDigits: PropTypes.any,
42 |   value: PropTypes.any,
43 | };
44 | 
45 | export default FormattedNumber;
46 | 


--------------------------------------------------------------------------------
/src/FormattedPlural.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Text } from 'react-native';
 4 | import Intl from 'react-intl';
 5 | 
 6 | const FormattedPlural = props => (
 7 |   <Intl.FormattedPlural {...props}>
 8 |     {localized => <Text style={props.style}>{localized}</Text>}
 9 |   </Intl.FormattedPlural>
10 | );
11 | 
12 | FormattedPlural.propTypes = {
13 |   style: PropTypes.any,
14 | };
15 | 
16 | export default FormattedPlural;
17 | 


--------------------------------------------------------------------------------
/src/FormattedRelative.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Text } from 'react-native';
 4 | import Intl from 'react-intl';
 5 | 
 6 | const FormattedRelative = props => (
 7 |   <Intl.FormattedRelative {...props}>
 8 |     {localized => <Text style={props.style}>{localized}</Text>}
 9 |   </Intl.FormattedRelative>
10 | );
11 | 
12 | FormattedRelative.propTypes = {
13 |   style: PropTypes.any,
14 | };
15 | 
16 | export default FormattedRelative;
17 | 


--------------------------------------------------------------------------------
/src/FormattedTime.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import { Text } from 'react-native';
 4 | import Intl from 'react-intl';
 5 | 
 6 | const FormattedTime = props => (
 7 |   <Intl.FormattedTime {...props}>
 8 |     {localized => <Text style={props.style}>{localized}</Text>}
 9 |   </Intl.FormattedTime>
10 | );
11 | 
12 | FormattedTime.propTypes = {
13 |   style: PropTypes.any,
14 | };
15 | 
16 | export default FormattedTime;
17 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export FormattedDate from './FormattedDate';
2 | export FormattedHTMLMessage from './FormattedHTMLMessage';
3 | export FormattedMessage from './FormattedMessage';
4 | export FormattedNumber from './FormattedNumber';
5 | export FormattedPlural from './FormattedPlural';
6 | export FormattedRelative from './FormattedRelative';
7 | export FormattedTime from './FormattedTime';
8 | 


--------------------------------------------------------------------------------