moved all components to stateless functional

Author: jineshshah36

README.md

@@ -343,9 +343,11 @@ To find a preview of all examples go to the [examples](https://github.com/jinesh
   - [iOS Light](https://github.com/jineshshah36/react-native-nav/tree/master/examples/ios-light.js)
   - [iOS Dark](https://github.com/jineshshah36/react-native-nav/tree/master/examples/ios-dark.js)
   - [iOS Colored](https://github.com/jineshshah36/react-native-nav/tree/master/examples/ios-colored.js)
+  - [iOS Icons Buttons](https://github.com/jineshshah36/react-native-nav/tree/master/examples/ios-image-icons.js)
   - [Android Light](https://github.com/jineshshah36/react-native-nav/tree/master/examples/android-light.js)
   - [Android Dark](https://github.com/jineshshah36/react-native-nav/tree/master/examples/android-dark.js)
   - [Android Colored](https://github.com/jineshshah36/react-native-nav/tree/master/examples/android-colored.js)
+  - [Android Icons Buttons](https://github.com/jineshshah36/react-native-nav/tree/master/examples/android-image-icons.js)
 
 ### Questions?
 

components/NavButton.js

@@ -1,11 +1,6 @@
 /* @flow */
 import React from 'react-native'
-const {
-  Platform,
-  TouchableOpacity,
-  View,
-  PropTypes,
-} = React
+const { Platform, TouchableOpacity, View, PropTypes } = React
 import styles from '../styles'
 
 function NavButton(props: Object): React.Element {
@@ -40,9 +35,9 @@ function NavButton(props: Object): React.Element {
 }
 
 NavButton.propTypes = {
-  style: View.propTypes.style,
   children: PropTypes.node,
   onPress: PropTypes.func,
+  style: View.propTypes.style,
 }
 
 NavButton.defaultProps = {

components/NavButtonText.js

@@ -1,27 +1,24 @@
+/* @flow */
 import React from 'react-native'
-const {
-  Text,
-  Component,
-  PropTypes,
-} = React
+const { Text, PropTypes } = React
 import styles from '../styles'
 
-export class NavButtonText extends Component {
-  static propTypes = {
-    style: Text.propTypes.style,
-    children: PropTypes.node,
-  }
+function NavButtonText(props: Object): React.Element {
+  const { style, children } = props
+  return (
+    <Text style={[styles.navBarButtonText, style]}>
+      {children}
+    </Text>
+  )
+}
 
-  static defaultProps = {
-    style: {},
-  }
+NavButtonText.propTypes = {
+  style: Text.propTypes.style,
+  children: PropTypes.node,
+}
 
-  render(): React.Element {
-    const { style, children } = this.props
-    return (
-      <Text style={[styles.navBarButtonText, style]}>
-        {children}
-      </Text>
-    )
-  }
+NavButtonText.defaultProps = {
+  style: {},
 }
+
+export { NavButtonText }

components/NavGroup.js

@@ -1,28 +1,24 @@
 /* @flow */
 import React from 'react-native'
-const {
-  View,
-  Component,
-  PropTypes,
-} = React
+const { View, PropTypes } = React
 import styles from '../styles'
 
-export class NavGroup extends Component {
-  static propTypes = {
-    style: View.propTypes.style,
-    children: PropTypes.node,
-  }
+function NavGroup(props: Object): React.Element {
+  const { style, children } = props
+  return (
+    <View style={[styles.navGroup, style]}>
+      {children}
+    </View>
+  )
+}
 
-  static defaultProps = {
-    style: {},
-  }
+NavGroup.propTypes = {
+  style: View.propTypes.style,
+  children: PropTypes.node,
+}
 
-  render(): React.Element {
-    const { style, children } = this.props
-    return (
-      <View style={[styles.navGroup, style]}>
-        {children}
-      </View>
-    )
-  }
+NavGroup.defaultProps = {
+  style: {},
 }
+
+export { NavGroup }

components/NavTitle.js

@@ -1,28 +1,24 @@
 /* @flow */
 import React from 'react-native'
-const {
-  Text,
-  Component,
-  PropTypes,
-} = React
+const { Text, PropTypes } = React
 import styles from '../styles'
 
-export class NavTitle extends Component {
-  static propTypes = {
-    style: Text.propTypes.style,
-    children: PropTypes.node,
-  }
+function NavTitle(props: Object): React.Element {
+  const { style, children } = props
+  return (
+    <Text style={[styles.navBarTitleText, style]}>
+      {children}
+    </Text>
+  )
+}
 
-  static defaultProps = {
-    style: {},
-  }
+NavTitle.propTypes = {
+  style: Text.propTypes.style,
+  children: PropTypes.node,
+}
 
-  render(): React.Element {
-    const { style, children } = this.props
-    return (
-      <Text style={[styles.navBarTitleText, style]}>
-        {children}
-      </Text>
-    )
-  }
+NavTitle.defaultProps = {
+  style: {},
 }
+
+export { NavTitle }

components/StatusBarEnhanced.js

@@ -1,29 +1,10 @@
 /* @flow */
 import React from 'react-native'
-const {
-  Platform,
-  Component,
-  View,
-  PropTypes,
-  StatusBar,
-} = React
+const { Platform, View, PropTypes, StatusBar } = React
 import styles from '../styles'
 
-export default class StatusBarEnhanced extends Component {
-
-  static propTypes = {
-    statusBarTintColor: PropTypes.string,
-    statusBar: PropTypes.object,
-    style: View.propTypes.style,
-  }
-
-  static defaultProps = {
-    statusBarTintColor: '#fff',
-    style: {},
-    statusBar: {},
-  }
-
-  getConfig(): Object {
+function StatusBarEnhanced(props: Object): React.Element {
+  const getConfig = (): Object => {
     const { statusBar } = this.props
     if (Platform.OS === 'ios') {
       const statusBarConfig = {
@@ -47,7 +28,7 @@ export default class StatusBarEnhanced extends Component {
     return null
   }
 
-  getStyles(): Array {
+  const getStyles = (): Array => {
     const { style } = this.props
     if (Platform.OS === 'ios') {
       return [
@@ -63,12 +44,23 @@ export default class StatusBarEnhanced extends Component {
     return null
   }
 
-  render(): React.Element {
-    const config: Object = this.getConfig()
-    return (
-      <View style={this.getStyles()}>
-        <StatusBar {...config} />
-      </View>
-    )
-  }
+  return (
+    <View style={getStyles}>
+      <StatusBar {...getConfig} />
+    </View>
+  )
 }
+
+StatusBarEnhanced.propTypes = {
+  statusBarTintColor: PropTypes.string,
+  statusBar: PropTypes.object,
+  style: View.propTypes.style,
+}
+
+StatusBarEnhanced.defaultProps = {
+  statusBarTintColor: '#fff',
+  style: {},
+  statusBar: {},
+}
+
+export { StatusBarEnhanced }

examples/android-image-icons.js

@@ -17,6 +17,12 @@ const styles = StyleSheet.create({
   navGroup: {
     justifyContent: 'flex-end',
   },
+  navButton: {
+    flex: 1,
+  },
+  image: {
+    width: 30,
+  },
 })
 
 export default class NavBarAndroidColored extends Component {
@@ -27,14 +33,14 @@ export default class NavBarAndroidColored extends Component {
           {"App"}
         </NavTitle>
         <NavGroup style={styles.navGroup}>
-          <NavButton style={{ flex: 1 }}>
-            <Image style={{ width: 30 }}
+          <NavButton style={styles.navButton}>
+            <Image style={styles.width}
               resizeMode={"contain"}
               source={require('./shared/static/new-interface_cart.png')}
             />
           </NavButton>
-          <NavButton style={{ flex: 1 }}>
-            <Image style={{ width: 30 }}
+          <NavButton style={styles.navButton}>
+            <Image style={styles.width}
               resizeMode={"contain"}
               source={require('./shared/static/new-interface_search.png')}
             />

examples/ios-image-icons.js

@@ -14,23 +14,29 @@ const styles = StyleSheet.create({
   buttonText: {
     color: 'rgba(231, 37, 156, 0.5)',
   },
+  navButton: {
+    flex: 1,
+  },
+  image: {
+    width: 30,
+  },
 })
 
 export default class NavBarIOSColored extends Component {
   render() {
     return (
       <NavBar style={styles}>
-        <NavButton style={{ flex: 1 }}>
-          <Image style={{ width: 30 }}
+        <NavButton style={styles.navButton}>
+          <Image style={styles.image}
             resizeMode={"contain"}
             source={require('./shared/static/new-interface_cart.png')}
           />
         </NavButton>
         <NavTitle style={styles.title}>
           {"App"}
         </NavTitle>
-        <NavButton style={{ flex: 1 }}>
-          <Image style={{ width: 30 }}
+        <NavButton style={styles.navButton}>
+          <Image style={styles.image}
             resizeMode={"contain"}
             source={require('./shared/static/new-interface_search.png')}
           />