finished moving to stateless functional components

Author: jineshshah36

components/NavButton.js

@@ -3,9 +3,8 @@ import React from 'react-native'
 const { Platform, TouchableOpacity, View, PropTypes } = React
 import styles from '../styles'
 
-function NavButton(props: Object): React.Element {
+function NavButton({ style, onPress, children }: Object): React.Element {
   const getNavBarButtonStyles = (): Array<Object> => {
-    const { style } = props
     if (Platform.OS === 'ios') {
       return [
         styles.navBarButtonIOS,
@@ -20,18 +19,15 @@ function NavButton(props: Object): React.Element {
     return []
   }
 
-  const getTouchable = (): React.Element => {
-    const { onPress, children } = props
-    return (
-      <TouchableOpacity onPress={onPress}>
-        <View style={getNavBarButtonStyles}>
-          {children}
-        </View>
-      </TouchableOpacity>
-    )
-  }
+  const getTouchable = () => (
+    <TouchableOpacity onPress={onPress}>
+      <View style={getNavBarButtonStyles()}>
+        {children}
+      </View>
+    </TouchableOpacity>
+  )
 
-  return getTouchable
+  return getTouchable()
 }
 
 NavButton.propTypes = {

components/NavButtonText.js

@@ -3,8 +3,7 @@ import React from 'react-native'
 const { Text, PropTypes } = React
 import styles from '../styles'
 
-function NavButtonText(props: Object): React.Element {
-  const { style, children } = props
+function NavButtonText({ style, children }: Object): React.Element {
   return (
     <Text style={[styles.navBarButtonText, style]}>
       {children}

components/NavGroup.js

@@ -3,8 +3,7 @@ import React from 'react-native'
 const { View, PropTypes } = React
 import styles from '../styles'
 
-function NavGroup(props: Object): React.Element {
-  const { style, children } = props
+function NavGroup({ style, children }: Object): React.Element {
   return (
     <View style={[styles.navGroup, style]}>
       {children}

components/NavTitle.js

@@ -3,8 +3,7 @@ import React from 'react-native'
 const { Text, PropTypes } = React
 import styles from '../styles'
 
-function NavTitle(props: Object): React.Element {
-  const { style, children } = props
+function NavTitle({ style, children }: Object): React.Element {
   return (
     <Text style={[styles.navBarTitleText, style]}>
       {children}

components/StatusBarEnhanced.js

@@ -3,9 +3,8 @@ import React from 'react-native'
 const { Platform, View, PropTypes, StatusBar } = React
 import styles from '../styles'
 
-function StatusBarEnhanced(props: Object): React.Element {
+function StatusBarEnhanced({ statusBar, style }: Object): React.Element {
   const getConfig = (): Object => {
-    const { statusBar } = this.props
     if (Platform.OS === 'ios') {
       const statusBarConfig = {
         animated: true,
@@ -25,11 +24,10 @@ function StatusBarEnhanced(props: Object): React.Element {
       }
       return Object.assign({}, statusBarConfig, statusBar)
     }
-    return null
+    return {}
   }
 
-  const getStyles = (): Array => {
-    const { style } = this.props
+  const getStyles = (): Array<Object> => {
     if (Platform.OS === 'ios') {
       return [
         styles.statusBarIOS,
@@ -41,24 +39,22 @@ function StatusBarEnhanced(props: Object): React.Element {
         style,
       ]
     }
-    return null
+    return [{}]
   }
 
   return (
-    <View style={getStyles}>
-      <StatusBar {...getConfig} />
+    <View style={getStyles()}>
+      <StatusBar {...getConfig()} />
     </View>
   )
 }
 
 StatusBarEnhanced.propTypes = {
-  statusBarTintColor: PropTypes.string,
   statusBar: PropTypes.object,
   style: View.propTypes.style,
 }
 
 StatusBarEnhanced.defaultProps = {
-  statusBarTintColor: '#fff',
   style: {},
   statusBar: {},
 }

index.js

@@ -1,33 +1,19 @@
 /* @flow */
 import React from 'react-native'
 const {
-  Component,
   View,
   PropTypes,
   Platform,
 } = React
-import StatusBarEnhanced from './components/StatusBarEnhanced'
+import { StatusBarEnhanced } from './components/StatusBarEnhanced'
 export { NavGroup } from './components/NavGroup'
 export { NavButton } from './components/NavButton'
 export { NavButtonText } from './components/NavButtonText'
 export { NavTitle } from './components/NavTitle'
 import styles from './styles'
 
-class NavigationBar extends Component {
-
-  static propTypes = {
-    statusBar: PropTypes.object,
-    style: PropTypes.object,
-    children: PropTypes.node,
-  }
-
-  static defaultProps = {
-    style: {},
-    statusBar: {},
-  }
-
-  getNavBar(): React.Element {
-    const { style, children } = this.props
+function NavigationBar({ style, children, statusBar }: Object): React.Element {
+  const getNavBar = (): React.Element => {
     if (Platform.OS === 'ios') {
       return (
         <View style={[styles.navBar, styles.navBarIOS, style.navBar]}>
@@ -44,17 +30,25 @@ class NavigationBar extends Component {
     return null
   }
 
-  render(): React.Element {
-    const { style, statusBar } = this.props
-    return (
-      <View style={[styles.navBarContainer, style.navBarContainer]}>
-        <StatusBarEnhanced style={style.statusBar}
-          statusBar={statusBar}
-        />
-        {this.getNavBar()}
-      </View>
-    )
-  }
+  return (
+    <View style={[styles.navBarContainer, style.navBarContainer]}>
+      <StatusBarEnhanced style={style.statusBar}
+        statusBar={statusBar}
+      />
+      {getNavBar()}
+    </View>
+  )
+}
+
+NavigationBar.propTypes = {
+  statusBar: PropTypes.object,
+  style: PropTypes.object,
+  children: PropTypes.node,
+}
+
+NavigationBar.defaultProps = {
+  style: {},
+  statusBar: {},
 }
 
 export default NavigationBar