Refactor everything without react-intl-rawformat

Author: frostney

package.json

@@ -54,7 +54,6 @@
   "homepage": "https://github.com/frostney/react-intl-native#readme",
   "dependencies": {
     "react-intl": "^2.0.0-rc-1",
-    "react-intl-rawformat": "^1.0.2",
     "react-native": "^0.22.2"
   },
   "devDependencies": {
@@ -65,6 +64,7 @@
     "babel-polyfill": "^6.7.4",
     "babel-preset-es2015-loose": "^7.0.0",
     "babel-preset-es2015-loose-rollup": "^7.0.0",
+    "babel-preset-react": "^6.5.0",
     "babel-register": "^6.7.2",
     "codecov": "^1.0.1",
     "enzyme": "^2.2.0",

src/FormattedDate.js

@@ -1,7 +1,14 @@
-import React, { Text } from 'react-native';
-import { RawFormattedDate } from 'react-intl-rawformat';
+import React, { PropTypes, Text } from 'react-native';
+import Intl from 'react-intl';
 
-const FormattedDate = props =>
-  <RawFormattedDate component={Text} {...props} />;
+const FormattedDate = props => (
+  <Intl.FormattedDate {...props}>
+    {localized => <Text style={props.style}>{localized}</Text>}
+  </Intl.FormattedDate>
+);
+
+FormattedDate.propTypes = {
+  style: PropTypes.any,
+};
 
 export default FormattedDate;

src/FormattedHTMLMessage.js

@@ -1,7 +1,14 @@
-import React, { Text } from 'react-native';
-import { RawFormattedHTMLMessage } from 'react-intl-rawformat';
+import React, { PropTypes, Text } from 'react-native';
+import Intl from 'react-intl';
 
-const FormattedHTMLMessage = props =>
-  <RawFormattedHTMLMessage component={Text} {...props} />;
+const FormattedHTMLMessage = props => (
+  <Intl.FormattedHTMLMessage {...props}>
+    {localized => <Text style={props.style}>{localized}</Text>}
+  </Intl.FormattedHTMLMessage>
+);
+
+FormattedHTMLMessage.propTypes = {
+  style: PropTypes.any,
+};
 
 export default FormattedHTMLMessage;

src/FormattedMessage.js

@@ -1,7 +1,14 @@
-import React, { Text } from 'react-native';
-import { RawFormattedMessage } from 'react-intl-rawformat';
+import React, { PropTypes, Text } from 'react-native';
+import Intl from 'react-intl';
 
-const FormattedMessage = props =>
-  <RawFormattedMessage component={Text} {...props} />;
+const FormattedMessage = props => (
+  <Intl.FormattedMessage {...props}>
+    {localized => <Text style={props.style}>{localized}</Text>}
+  </Intl.FormattedMessage>
+);
+
+FormattedMessage.propTypes = {
+  style: PropTypes.any,
+};
 
 export default FormattedMessage;

src/FormattedNumber.js

@@ -1,7 +1,14 @@
-import React, { Text } from 'react-native';
-import { RawFormattedNumber } from 'react-intl-rawformat';
+import React, { PropTypes, Text } from 'react-native';
+import Intl from 'react-intl';
 
-const FormattedNumber = props =>
-  <RawFormattedNumber component={Text} {...props} />;
+const FormattedNumber = props => (
+  <Intl.FormattedNumber {...props}>
+    {localized => <Text style={props.style}>{localized}</Text>}
+  </Intl.FormattedNumber>
+);
+
+FormattedNumber.propTypes = {
+  style: PropTypes.any,
+};
 
 export default FormattedNumber;

src/FormattedPlural.js

@@ -1,7 +1,14 @@
-import React, { Text } from 'react-native';
-import { RawFormattedPlural } from 'react-intl-rawformat';
+import React, { PropTypes, Text } from 'react-native';
+import Intl from 'react-intl';
 
-const FormattedPlural = props =>
-  <RawFormattedPlural component={Text} {...props} />;
+const FormattedPlural = props => (
+  <Intl.FormattedPlural {...props}>
+    {localized => <Text style={props.style}>{localized}</Text>}
+  </Intl.FormattedPlural>
+);
+
+FormattedPlural.propTypes = {
+  style: PropTypes.any,
+};
 
 export default FormattedPlural;

src/FormattedRelative.js

@@ -1,7 +1,14 @@
-import React, { Text } from 'react-native';
-import { RawFormattedRelative } from 'react-intl-rawformat';
+import React, { PropTypes, Text } from 'react-native';
+import Intl from 'react-intl';
 
-const FormattedRelative = props =>
-  <RawFormattedRelative component={Text} {...props} />;
+const FormattedRelative = props => (
+  <Intl.FormattedRelative {...props}>
+    {localized => <Text style={props.style}>{localized}</Text>}
+  </Intl.FormattedRelative>
+);
+
+FormattedRelative.propTypes = {
+  style: PropTypes.any,
+};
 
 export default FormattedRelative;

src/FormattedTime.js

@@ -1,7 +1,14 @@
-import React, { Text } from 'react-native';
-import { RawFormattedTime } from 'react-intl-rawformat';
+import React, { PropTypes, Text } from 'react-native';
+import Intl from 'react-intl';
 
-const FormattedTime = props =>
-  <RawFormattedTime component={Text} {...props} />;
+const FormattedTime = props => (
+  <Intl.FormattedTime {...props}>
+    {localized => <Text style={props.style}>{localized}</Text>}
+  </Intl.FormattedTime>
+);
+
+FormattedTime.propTypes = {
+  style: PropTypes.any,
+};
 
 export default FormattedTime;