added disabled prop to NavButton

Author: jineshshah36

README.md

@@ -242,14 +242,24 @@ import { NavButton } from 'react-native-nav'
 
 ###### Props
 
+*disabled*
+
+Setting this to true will disable the button and use the `disabledStyle` to style the button.
+
+```javascript
+<NavButton disabled>
+  // Pass any React element(s) here
+</NavButton>
+```
+
 *style*
 
-The best option is to use the `Stylesheet` object in `React Native` to create your styles
+The best option is to use the `Stylesheet` object in `React Native` to create your styles.
 
 ```javascript
 style = StyleSheet.create({
   title: {
-    // NavButton styles here (all text styles are valid)
+    // NavButton styles here (all view styles are valid)
 
     // default iOS styles:
     marginLeft: 0,
@@ -260,6 +270,20 @@ style = StyleSheet.create({
 })
 ```
 
+*disabledStyle*
+
+The best option is to use the `Stylesheet` object in `React Native` to create your styles.
+
+```javascript
+style = StyleSheet.create({
+  title: {
+    // disabled NavButton styles here (all view styles are valid)
+
+    // no default styles
+  },
+})
+```
+
 *onPress*
 
 `onPress` takes a function that will be executed when the button is pressed. Example:

components/NavButton.js

@@ -3,21 +3,37 @@ import React from 'react-native'
 const { Platform, TouchableOpacity, View, PropTypes } = React
 import styles from '../styles'
 
-function NavButton({ style, onPress, children }: Object): React.Element {
-  let navBarStyles = []
+function NavButton({ style, onPress, children, disabled, disabledStyle }: Object): React.Element {
+  let navButtonStyles = []
   if (Platform.OS === 'ios') {
-    navBarStyles = [styles.navBarButtonIOS, style]
+    navButtonStyles = [styles.navBarButtonIOS]
   } else if (Platform.OS === 'android') {
-    navBarStyles = [styles.navBarButtonAndroid, style]
+    navButtonStyles = [styles.navBarButtonAndroid]
+  }
+  if (disabled) {
+    navButtonStyles.push(disabledStyle)
+  } else {
+    navButtonStyles.push(style)
   }
 
-  const getTouchable = () => (
-    <TouchableOpacity onPress={onPress}>
-      <View style={navBarStyles}>
-        {children}
-      </View>
-    </TouchableOpacity>
-  )
+  const getTouchable = (): React.Element => {
+    if (disabled) {
+      return (
+        <TouchableOpacity>
+          <View style={navButtonStyles}>
+            {children}
+          </View>
+        </TouchableOpacity>
+      )
+    }
+    return (
+      <TouchableOpacity onPress={onPress}>
+        <View style={navButtonStyles}>
+          {children}
+        </View>
+      </TouchableOpacity>
+    )
+  }
 
   return getTouchable()
 }
@@ -26,10 +42,14 @@ NavButton.propTypes = {
   children: PropTypes.node,
   onPress: PropTypes.func,
   style: View.propTypes.style,
+  disabled: PropTypes.bool,
+  disabledStyle: View.PropTypes.style,
 }
 
 NavButton.defaultProps = {
   style: {},
+  disabledStyle: {},
+  disabled: false,
 }
 
 export { NavButton }