react-native-simple-router-community · davidLeonardi · Feb 2, 2016 · Feb 2, 2016 · johannhof · Feb 2, 2016
diff --git a/README.md b/README.md
@@ -31,31 +31,34 @@ class HelloPage extends React.Component {
 
 }
 
-// Your route object should contain at least:
-// - The name of the route (which will become the navigation bar title)
-// - The component object for the page to render
-var firstRoute = {
-  name: 'Welcome!',
-  component: HelloPage
-};
-
 // The Router wrapper
 class MyApp extends React.Component {
 
   constructor(props) {
     super(props);
+
     this.styles = StyleSheet.create({
       header: {
         backgroundColor: '#5cafec',
       },
     });
+
+    // Your route object should contain at least:
+    // - The name of the route (which will become the navigation bar title)
+    // - The component object for the page to render
+    this.firstRoute = {
+      name: 'Welcome!',
+      component: HelloPage,
+    }
   }
 
   render() {
-    return <Router 
-      firstRoute={firstRoute}         
-      headerStyle={this.styles.header} 
-    />
+    return (
+      <Router
+        firstRoute={this.firstRoute}
+        headerStyle={this.styles.header}
+      />
+    );
   }
 }
 

diff --git a/components/NavBarContainer.js b/components/NavBarContainer.js
@@ -1,14 +1,25 @@
-import React from 'react-native';
+import React, { StyleSheet, View, PropTypes } from 'react-native';
 
 import NavBarContent from './NavBarContent';
 
-const {
-  StyleSheet,
-  View,
-  Component,
-} = React;
-
-class NavBarContainer extends Component {
+const propTypes = {
+  backButtonComponent: PropTypes.func,
+  borderBottomWidth: PropTypes.number,
+  borderColor: PropTypes.string,
+  currentRoute: PropTypes.object.isRequired,
+  customAction: PropTypes.func,
+  leftProps: PropTypes.object,
+  navigator: PropTypes.object.isRequired,
+  rightCorner: PropTypes.func,
+  rightProps: PropTypes.object,
+  style: PropTypes.any.isRequired,
+  titleProps: PropTypes.object,
+  titleStyle: PropTypes.any.isRequired,
+  toBack: PropTypes.func.isRequired,
+  toRoute: PropTypes.func.isRequired,
+};
+
+class NavBarContainer extends React.Component {
   constructor(props) {
     super(props);
 
@@ -20,6 +31,23 @@ class NavBarContainer extends Component {
       backButtonOpacity: 0,
       previousRoute: {}, // Keep previousRoute for smooth transitions
     };
+
+    this.styles = StyleSheet.create({
+      navbarContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 64,
+      },
+      navbarContainerHidden: {
+        position: 'absolute',
+        top: -64,
+        left: 0,
+        right: 0,
+        height: 64,
+      },
+    });
   }
 
   componentWillReceiveProps(newProps) {
@@ -55,9 +83,9 @@ class NavBarContainer extends Component {
     }
 
     if (this.props.currentRoute.hideNavigationBar) {
-      navbarStyle = styles.navbarContainerHidden;
+      navbarStyle = this.styles.navbarContainerHidden;
     } else {
-      navbarStyle = styles.navbarContainer;
+      navbarStyle = this.styles.navbarContainer;
     }
 
     if (this.props.currentRoute.trans) {
@@ -67,7 +95,7 @@ class NavBarContainer extends Component {
           backButtonComponent={this.props.backButtonComponent}
           rightCorner={this.props.rightCorner}
           titleStyle={this.props.titleStyle}
-          willDisappear="true"
+          willDisappear
         />
       );
     } else if (this.props.currentRoute.hideNavigationBar) {
@@ -114,21 +142,6 @@ class NavBarContainer extends Component {
   }
 }
 
-const styles = StyleSheet.create({
-  navbarContainer: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: 64,
-  },
-  navbarContainerHidden: {
-    position: 'absolute',
-    top: -64,
-    left: 0,
-    right: 0,
-    height: 64,
-  },
-});
+NavBarContainer.propTypes = propTypes;
 
 export default NavBarContainer;
diff --git a/components/NavBarContent.js b/components/NavBarContent.js
@@ -1,16 +1,23 @@
-import React from 'react-native';
+import React, { StyleSheet, Text, View, Animated, Easing, PropTypes } from 'react-native';
 import NavButton from './NavButton';
 
-const {
-  StyleSheet,
-  Text,
-  View,
-  Animated,
-  Easing,
-  Component,
-} = React;
-
-class NavBarContent extends Component {
+const propTypes = {
+  backButtonComponent: PropTypes.func,
+  borderBottomWidth: PropTypes.number,
+  borderColor: PropTypes.string,
+  customAction: PropTypes.func,
+  goBack: PropTypes.func,
+  goForward: PropTypes.func,
+  leftProps: PropTypes.object,
+  rightCorner: PropTypes.func,
+  rightProps: PropTypes.object,
+  route: PropTypes.object.isRequired,
+  titleProps: PropTypes.object,
+  titleStyle: PropTypes.any.isRequired,
+  willDisappear: PropTypes.bool,
+};
+
+class NavBarContent extends React.Component {
   constructor(props) {
     super(props);
 
@@ -21,6 +28,46 @@ class NavBarContent extends Component {
     this.state = {
       opacity: this.props.willDisappear ? new Animated.Value(1) : new Animated.Value(0),
     };
+
+    this.styles = StyleSheet.create({
+      navbar: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 64, // Default iOS navbar height
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingTop: 13,
+      },
+      navbarText: {
+        color: 'white',
+        fontSize: 17,
+        margin: 10,
+        marginTop: 14,
+        fontWeight: '600',
+        textAlign: 'center',
+        alignItems: 'center',
+      },
+      corner: {
+        flex: 1,
+        justifyContent: 'center',
+      },
+
+      alignLeft: {
+        alignItems: 'flex-start',
+      },
+      alignRight: {
+        alignItems: 'flex-end',
+      },
+      buttonTextLeft: {
+        marginLeft: 10,
+      },
+      buttonTextRight: {
+        marginRight: 10,
+      },
+    });
   }
 
   componentWillReceiveProps(newProps) {
@@ -95,7 +142,7 @@ class NavBarContent extends Component {
     }
 
     leftCorner = (
-      <View style={[styles.corner, styles.alignLeft]}>
+      <View style={[this.styles.corner, this.styles.alignLeft]}>
         {leftCornerContent}
       </View>
     );
@@ -117,7 +164,7 @@ class NavBarContent extends Component {
     }
 
     rightCorner = (
-      <View style={[styles.corner, styles.alignRight]}>
+      <View style={[this.styles.corner, this.styles.alignRight]}>
         {rightCornerContent}
       </View>
     );
@@ -131,7 +178,7 @@ class NavBarContent extends Component {
       titleContent = <TitleComponent {...this.props.titleProps} />;
     } else {
       titleContent = (
-        <Text style={[styles.navbarText, this.props.titleStyle]} numberOfLines={1}>
+        <Text style={[this.styles.navbarText, this.props.titleStyle]} numberOfLines={1}>
           {this.props.route.name}
         </Text>
       );
@@ -156,7 +203,7 @@ class NavBarContent extends Component {
       <Animated.View
         style={
           [
-            styles.navbar,
+            this.styles.navbar,
             transitionStyle,
             this.props.route.headerStyle,
             { borderBottomWidth: width, borderColor: color },
@@ -172,44 +219,6 @@ class NavBarContent extends Component {
   }
 }
 
-const styles = StyleSheet.create({
-  navbar: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    height: 64, // Default iOS navbar height
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-    paddingTop: 13,
-  },
-  navbarText: {
-    color: 'white',
-    fontSize: 17,
-    margin: 10,
-    marginTop: 14,
-    fontWeight: '600',
-    textAlign: 'center',
-    alignItems: 'center',
-  },
-  corner: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-
-  alignLeft: {
-    alignItems: 'flex-start',
-  },
-  alignRight: {
-    alignItems: 'flex-end',
-  },
-  buttonTextLeft: {
-    marginLeft: 10,
-  },
-  buttonTextRight: {
-    marginRight: 10,
-  },
-});
+NavBarContent.propTypes = propTypes;
 
 export default NavBarContent;
diff --git a/components/NavButton.js b/components/NavButton.js
@@ -1,17 +1,25 @@
-import React from 'react-native';
+import React, { StyleSheet, Text, View, TouchableHighlight, PropTypes } from 'react-native';
 
-const {
-  StyleSheet,
-  Text,
-  View,
-  TouchableHighlight,
-  Component,
-} = React;
+const propTypes = {
+  backButtonComponent: PropTypes.func,
+  onPress: PropTypes.func.isRequired,
+};
 
-class NavButton extends Component {
+class NavButton extends React.Component {
   constructor(props) {
     super(props);
 
+    this.styles = StyleSheet.create({
+      navbarText: {
+        color: 'white',
+        fontSize: 16,
+        margin: 10,
+        fontWeight: '600',
+        textAlign: 'center',
+        alignItems: 'center',
+      },
+    });
+
     this.onPress = this.onPress.bind(this);
   }
 
@@ -27,7 +35,7 @@ class NavButton extends Component {
       BackButton = this.props.backButtonComponent;
       backButton = <View><BackButton/></View>;
     } else {
-      backButton = <Text style={styles.navbarText}>Back</Text>;
+      backButton = <Text style={this.styles.navbarText}>Back</Text>;
     }
 
     return (
@@ -38,15 +46,6 @@ class NavButton extends Component {
   }
 }
 
-const styles = StyleSheet.create({
-  navbarText: {
-    color: 'white',
-    fontSize: 16,
-    margin: 10,
-    fontWeight: '600',
-    textAlign: 'center',
-    alignItems: 'center',
-  },
-});
+NavButton.propTypes = propTypes;
 
 export default NavButton;