Support newer RN versions

lib/NavBar.android.js

@@ -1,38 +1,40 @@
 /* @flow */
 
-import React from 'react'
-import { StyleSheet } from 'react-native'
-import CustomComponents from 'react-native-deprecated-custom-components'
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import CustomComponents from 'react-native-deprecated-custom-components';
 
 const stylesAndroid = StyleSheet.create({
   navBar: {
     backgroundColor: '#f5f5f5',
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'center'
   }
-})
+});
 
 class NavBar extends React.Component {
-  updateProgress (progress, fromIndex, toIndex) {
+  updateProgress(progress, fromIndex, toIndex) {
     this._nav.updateProgress(progress, fromIndex, toIndex);
   }
 
-  render () {
+  render() {
     return (
       <CustomComponents.Navigator.NavigationBar
         style={[stylesAndroid.navBar, this.props.style]}
         routeMapper={this.props.routeMapper}
         navState={this.props.navState}
         navigator={this.props.navigator}
-        ref={nav => { this._nav = nav }}
+        ref={nav => {
+          this._nav = nav;
+        }}
       />
-    )
+    );
   }
 }
 
 NavBar.propTypes = {
-  ...CustomComponents.Navigator.NavigationBar.propTypes,
-}
+  ...CustomComponents.Navigator.NavigationBar.propTypes
+};
 
-export default NavBar
+export default NavBar;

lib/NavBar.ios.js

@@ -1,37 +1,39 @@
 /* @flow */
 
-import React from 'react'
-import { StyleSheet, PixelRatio } from 'react-native'
-import CustomComponents from 'react-native-deprecated-custom-components'
+import React from 'react';
+import { StyleSheet, PixelRatio } from 'react-native';
+import CustomComponents from 'react-native-deprecated-custom-components';
 
 class NavBar extends React.Component {
-  updateProgress (progress, fromIndex, toIndex) {
+  updateProgress(progress, fromIndex, toIndex) {
     this._nav.updateProgress(progress, fromIndex, toIndex);
   }
 
-  render () {
+  render() {
     return (
       <CustomComponents.Navigator.NavigationBar
         style={[styles.navBar, this.props.style]}
         routeMapper={this.props.routeMapper}
         navState={this.props.navState}
         navigator={this.props.navigator}
-        ref={nav => { this._nav = nav }}
+        ref={nav => {
+          this._nav = nav;
+        }}
       />
-    )
+    );
   }
 }
 
 NavBar.propTypes = {
-  ...CustomComponents.Navigator.NavigationBar.propTypes,
-}
+  ...CustomComponents.Navigator.NavigationBar.propTypes
+};
 
 const styles = StyleSheet.create({
   navBar: {
     backgroundColor: 'white',
     borderBottomWidth: 1 / PixelRatio.get(),
-    borderColor: '#8e8e93',
-  },
-})
+    borderColor: '#8e8e93'
+  }
+});
 
-export default NavBar
+export default NavBar;

lib/NavBarBackButton.android.js

@@ -1,10 +1,19 @@
 /* @flow */
 
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { TouchableOpacity, Text, StyleSheet } from 'react-native'
 import Ionicon from 'react-native-vector-icons/Ionicons'
 
 class NavBarBackButton extends React.Component {
+  static propTypes = {
+    ...TouchableOpacity.propTypes,
+    tintColor: PropTypes.string,
+    children: PropTypes.string.isRequired,
+    style: Text.propTypes.style,
+    showBackTitle: PropTypes.bool,
+  }
+
   constructor (props) {
     super(props)
     this.state = {
@@ -41,14 +50,6 @@ class NavBarBackButton extends React.Component {
   }
 }
 
-NavBarBackButton.propTypes = {
-  ...TouchableOpacity.propTypes,
-  tintColor: PropTypes.string,
-  children: PropTypes.string.isRequired,
-  style: Text.propTypes.style,
-  showBackTitle: PropTypes.bool,
-}
-
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',

lib/NavBarBackButton.ios.js

@@ -1,11 +1,24 @@
 /* @flow */
 
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { TouchableOpacity, Text, StyleSheet } from 'react-native'
 import Ionicon from 'react-native-vector-icons/Ionicons'
 
-class NavBarBackButton extends React.Component {
-  state: Object;
+type State = {
+  tintColor: String
+}
+
+class NavBarBackButton extends React.Component<any, State> {
+  state: State
+
+  static propTypes = {
+    ...TouchableOpacity.propTypes,
+    tintColor: PropTypes.string,
+    children: PropTypes.string.isRequired,
+    style: Text.propTypes.style,
+    showBackTitle: PropTypes.bool,
+  }
 
   constructor (props: Object) {
     super(props)
@@ -43,14 +56,6 @@ class NavBarBackButton extends React.Component {
   }
 }
 
-NavBarBackButton.propTypes = {
-  ...TouchableOpacity.propTypes,
-  tintColor: PropTypes.string,
-  children: PropTypes.string.isRequired,
-  style: Text.propTypes.style,
-  showBackTitle: PropTypes.bool,
-}
-
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',

lib/NavigatorWrapper.js

@@ -1,6 +1,7 @@
 /* @flow */
 
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import {
   View,
   BackAndroid,

lib/TopNavigatorWrapper.js

@@ -1,6 +1,7 @@
 /* @flow */
 
-import React, { PropTypes } from 'react'
+import React from 'react'
+import PropTypes from 'prop-types'
 import { View, Platform } from 'react-native'
 import NavigatorWrapper from './NavigatorWrapper'
 import { defaultRouteMapper } from './RouteMapper'

package.json

@@ -31,7 +31,11 @@
     "prettier": "^1.3.0"
   },
   "dependencies": {
+    "@types/prop-types": "^15.5.2",
+    "@types/react-native": "^0.49.2",
+    "prop-types": "^15.6.0",
+    "react-native": "^0.49.3",
     "react-native-deprecated-custom-components": "^0.1.0",
     "react-native-vector-icons": "^4.0.1"
   }
-}
+}