Make it work with react native 0.51

README.md

@@ -2,7 +2,7 @@
 
 [![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)
 
-`react-intl` convinience components for React Native
+`react-intl` convenience 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.
 
@@ -41,6 +41,7 @@ More information on date formatting options: https://github.com/yahoo/react-intl
 
 ```jsx
 <FormattedHTMLMessage
+  id="one"
   defaultMessage="Hello there"
   style={{ fontWeight: 'bold' }} />
 ```
@@ -49,39 +50,48 @@ More information on date formatting options: https://github.com/yahoo/react-intl
 
 ```jsx
 <FormattedMessage
+  id="two"
   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.
+This is one of the components that differs slightly from the original component. For the formatting style you need to use 
+`formatStyle` instead of `style`. `style` is reserved for the component styling.
 
 ```jsx
 <FormattedNumber
   formatStyle="currency"
+  currency="EUR"
   value={1000}
   style={{ fontWeight: 'bold' }} />
 ```
 
 More information on number formatting options: https://github.com/yahoo/react-intl/wiki/Components#formattednumber
 
 #### FormattedPlural
+This is one of the components that differs slightly from the original component. For the formatting style you need to use 
+`formatStyle` instead of `style`. `style` is reserved for the component styling.
 
 ```jsx
 <FormattedPlural
   value={10}
   one="message"
   other="messages"
+  formatStyle="cardinal"
   style={{ fontWeight: 'bold' }} />
 ```
 
 More information on plural formatting options: https://github.com/yahoo/react-intl/wiki/Components#formattedplural
 
 #### FormattedRelative
+This is one of the components that differs slightly from the original component. For the formatting style you need to use 
+`formatStyle` instead of `style`. `style` is reserved for the component styling.
 
 ```jsx
 <FormattedRelative
   value={Date.now()}
+  formatStyle="numeric"
   style={{ fontWeight: 'bold' }} />
 ```
 

package.json

@@ -2,8 +2,8 @@
   "name": "react-intl-native",
   "version": "2.1.1",
   "description": "Convenience components for react-intl's `format*` API in React Native",
-  "main": "dist/react-intl-native.js",
-  "jsnext:main": "dist/react-intl-native.es2015.js",
+  "main": "src/index.js",
+  "jsnext:main": "src/index.js",
   "scripts": {
     "prebuild": "rimraf dist",
     "build": "rollup-babel-lib-bundler -f cjs,es6 src/index.js",
@@ -55,6 +55,7 @@
   },
   "homepage": "https://github.com/frostney/react-intl-native#readme",
   "dependencies": {
+    "prop-types": "^15.6.0",
     "react-intl": "^2.1.2"
   },
   "devDependencies": {
@@ -77,9 +78,9 @@
     "in-publish": "^2.0.0",
     "jsdom": "^9.12.0",
     "nyc": "^6.4.0",
-    "react": "^0.14.8",
+    "react": "^0.14.9",
     "react-addons-test-utils": "^0.14.8",
-    "react-dom": "^0.14.8",
+    "react-dom": "^0.14.9",
     "react-native": "^0.25.1",
     "rimraf": "^2.5.2",
     "rollup-babel-lib-bundler": "^2.5.5"

src/FormattedDate.js

@@ -1,6 +1,7 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import Intl from 'react-intl';
+import * as Intl from 'react-intl';
 
 const FormattedDate = props => (
   <Intl.FormattedDate {...props}>
@@ -10,6 +11,21 @@ const FormattedDate = props => (
 
 FormattedDate.propTypes = {
   style: PropTypes.any,
+  localeMatcher: PropTypes.oneOf(['best fit', 'lookup']),
+  formatMatcher: PropTypes.oneOf(['basic', 'best fit']),
+
+  timeZone: PropTypes.string,
+  hour12: PropTypes.bool,
+
+  weekday: PropTypes.oneOf(['narrow', 'short', 'long']),
+  era: PropTypes.oneOf(['narrow', 'short', 'long']),
+  year: PropTypes.oneOf(['numeric', '2-digit']),
+  month: PropTypes.oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']),
+  day: PropTypes.oneOf(['numeric', '2-digit']),
+  hour: PropTypes.oneOf(['numeric', '2-digit']),
+  minute: PropTypes.oneOf(['numeric', '2-digit']),
+  second: PropTypes.oneOf(['numeric', '2-digit']),
+  timeZoneName: PropTypes.oneOf(['short', 'long']),
 };
 
 export default FormattedDate;

src/FormattedHTMLMessage.js

@@ -1,6 +1,7 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import Intl from 'react-intl';
+import * as Intl from 'react-intl';
 
 const FormattedHTMLMessage = props => (
   <Intl.FormattedHTMLMessage {...props}>
@@ -9,7 +10,13 @@ const FormattedHTMLMessage = props => (
 );
 
 FormattedHTMLMessage.propTypes = {
+  id: PropTypes.string.isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  defaultMessage: PropTypes.string,
   style: PropTypes.any,
+  values: PropTypes.object,
+  tagName: PropTypes.string,
+  children: PropTypes.func,
 };
 
 export default FormattedHTMLMessage;

src/FormattedMessage.js

@@ -1,6 +1,7 @@
-import React, { PropTypes, isValidElement, createElement } from 'react';
+import React, { isValidElement, createElement } from 'react';
+import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import Intl from 'react-intl';
+import * as Intl from 'react-intl';
 
 const FormattedMessage = props => (
   <Intl.FormattedMessage {...props}>
@@ -18,6 +19,12 @@ const FormattedMessage = props => (
 
 FormattedMessage.propTypes = {
   style: PropTypes.any,
+  values: PropTypes.object,
+  tagName: PropTypes.string,
+  children: PropTypes.func,
+  id: PropTypes.string.isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  defaultMessage: PropTypes.string,
 };
 
 export default FormattedMessage;

src/FormattedNumber.js

@@ -1,23 +1,14 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import Intl from 'react-intl';
+import * as Intl from 'react-intl';
 
 const FormattedNumber = props => {
   const style = props.style;
 
-  const formatOptions = {
-    localeMatcher: props.localeMatcher,
-    style: props.formatStyle,
-    currency: props.currency,
-    currencyDisplay: props.currencyDisplay,
-    useGrouping: props.useGrouping,
-    minimumIntegerDigits: props.minimumIntegerDigits,
-    minimumFractionDigits: props.minimumFractionDigits,
-    maximumFractionDigits: props.maximumFractionDigits,
-    minimumSignificantDigits: props.minimumSignificantDigits,
-    maximumSignificantDigits: props.maximumSignificantDigits,
-    value: props.value,
-  };
+  let formatOptions = {...props};
+  delete formatOptions.formatStyle
+  formatOptions.style=props.formatStyle
 
   return (
     <Intl.FormattedNumber {...formatOptions}>
@@ -27,18 +18,22 @@ const FormattedNumber = props => {
 };
 
 FormattedNumber.propTypes = {
-  style: PropTypes.any,
-  localeMatcher: PropTypes.any,
-  formatStyle: PropTypes.any,
-  currency: PropTypes.any,
-  currencyDisplay: PropTypes.any,
-  useGrouping: PropTypes.any,
-  minimumIntegerDigits: PropTypes.any,
-  minimumFractionDigits: PropTypes.any,
-  maximumFractionDigits: PropTypes.any,
-  minimumSignificantDigits: PropTypes.any,
-  maximumSignificantDigits: PropTypes.any,
-  value: PropTypes.any,
+    value: PropTypes.any.isRequired,
+    format: PropTypes.string,
+    children: PropTypes.func,
+    localeMatcher: PropTypes.oneOf(['best fit', 'lookup']),
+
+    style: PropTypes.any,
+    formatStyle: PropTypes.oneOf(['decimal', 'currency', 'percent']),
+    currency: PropTypes.string,
+    currencyDisplay: PropTypes.oneOf(['symbol', 'code', 'name']),
+    useGrouping: PropTypes.bool,
+
+    minimumIntegerDigits: PropTypes.number,
+    minimumFractionDigits: PropTypes.number,
+    maximumFractionDigits: PropTypes.number,
+    minimumSignificantDigits: PropTypes.number,
+    maximumSignificantDigits: PropTypes.number,
 };
 
 export default FormattedNumber;

src/FormattedPlural.js

@@ -1,15 +1,33 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import Intl from 'react-intl';
+import * as Intl from 'react-intl';
 
-const FormattedPlural = props => (
-  <Intl.FormattedPlural {...props}>
+const FormattedPlural = props => {
+  let propsCopy = {...props}
+  delete propsCopy.style
+
+  if ("formatStyle" in props) {
+    propsCopy.style = props.formatStyle
+  }
+
+  return (
+  <Intl.FormattedPlural {...propsCopy}>
     {localized => <Text style={props.style}>{localized}</Text>}
   </Intl.FormattedPlural>
-);
+)};
 
 FormattedPlural.propTypes = {
+  formatStyle: PropTypes.oneOf(['cardinal', 'ordinal']),
   style: PropTypes.any,
+  value: PropTypes.any.isRequired,
+  other: PropTypes.node.isRequired,
+  zero: PropTypes.node,
+  one: PropTypes.node,
+  two: PropTypes.node,
+  few: PropTypes.node,
+  many: PropTypes.node,
+  children: PropTypes.func,
 };
 
 export default FormattedPlural;

src/FormattedRelative.js

@@ -1,15 +1,32 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import Intl from 'react-intl';
+import * as Intl from 'react-intl';
 
-const FormattedRelative = props => (
-  <Intl.FormattedRelative {...props}>
-    {localized => <Text style={props.style}>{localized}</Text>}
-  </Intl.FormattedRelative>
-);
+const FormattedRelative = props => {
+  let propsCopy = {...props}
+  delete propsCopy.style
+
+  if ("formatStyle" in props) {
+      propsCopy.style = props.formatStyle
+  }
+
+  return (
+      <Intl.FormattedRelative {...propsCopy}>
+        {localized => <Text style={props.style}>{localized}</Text>}
+      </Intl.FormattedRelative>
+  )
+};
 
 FormattedRelative.propTypes = {
   style: PropTypes.any,
+  formatStyle: PropTypes.oneOf(['best fit', 'numeric']),
+  units: PropTypes.oneOf(['second', 'minute', 'hour', 'day', 'month', 'year']),
+  value: PropTypes.any.isRequired,
+  format: PropTypes.string,
+  updateInterval: PropTypes.number,
+  initialNow: PropTypes.any,
+  children: PropTypes.func,
 };
 
 export default FormattedRelative;

src/FormattedTime.js

@@ -1,6 +1,7 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import Intl from 'react-intl';
+import * as Intl from 'react-intl';
 
 const FormattedTime = props => (
   <Intl.FormattedTime {...props}>
@@ -10,6 +11,21 @@ const FormattedTime = props => (
 
 FormattedTime.propTypes = {
   style: PropTypes.any,
+  localeMatcher: PropTypes.oneOf(['best fit', 'lookup']),
+  formatMatcher: PropTypes.oneOf(['basic', 'best fit']),
+
+  timeZone: PropTypes.string,
+  hour12: PropTypes.bool,
+
+  weekday: PropTypes.oneOf(['narrow', 'short', 'long']),
+  era: PropTypes.oneOf(['narrow', 'short', 'long']),
+  year: PropTypes.oneOf(['numeric', '2-digit']),
+  month: PropTypes.oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']),
+  day: PropTypes.oneOf(['numeric', '2-digit']),
+  hour: PropTypes.oneOf(['numeric', '2-digit']),
+  minute: PropTypes.oneOf(['numeric', '2-digit']),
+  second: PropTypes.oneOf(['numeric', '2-digit']),
+  timeZoneName: PropTypes.oneOf(['short', 'long']),
 };
 
 export default FormattedTime;