Added new route mapper options

Author: alvaromb

README.md

@@ -58,7 +58,7 @@ inside it:
 
 ```js
 import React from 'react-native'
-import TopNavigatorWrapper from 'react-native-navigator-wrapper'
+import { TopNavigatorWrapper } from 'react-native-navigator-wrapper'
 import MyComponent from './MyComponent'
 
 class MyApp extends React.Component {
@@ -83,15 +83,14 @@ If you just want to use the navigation bar inside a navigator, use the
 
 ```js
 import React from 'react-native'
-import NavigationWrapper from 'react-native-navigator-wrapper'
+import { NavigationWrapper } from 'react-native-navigator-wrapper'
 
 class MyComponent extends React.Component {
   render () {
     return (
       <NavigationWrapper
         initialComponent={Component}
         title='Title'
-        passProps={}
       />
     )
   }
@@ -102,5 +101,16 @@ Every time you push a component that's inside the ``NavigationWrapper`` componen
 you will have a **navigator** prop, just like the top navigation option before,
 that will let you to keep pushing components in the stack.
 
+### Custom ``routeMapper``
+The React Native ``Navigator.NavigatorBar`` component has an object called
+``routeMapper`` that configures the three components that can be displayed
+inside the navigation bar: ``LeftButton``, ``RightButton`` and ``Title``.
+This library auto-generates a default route mapper object that displays an iOS
+style back button, a title and accepts a right element to render.
+
+It also provides functions to generate each of the route mapper components so
+you can build a completely custom navigation bar for each ``NavigatorWrapper``.
+See the source code for more information.
+
 ## License
 MIT.

index.js

@@ -2,8 +2,15 @@ import NavBarBackButton from './lib/NavBarBackButton'
 import NavBar from './lib/NavBar'
 import NavigatorWrapper from './lib/NavigatorWrapper'
 import TopNavigatorWrapper from './lib/TopNavigatorWrapper'
+import { defaultRouteMapper, leftButtonRouteMapperGenerator, rightButtonRouteMapperGenerator, titleRouteMapperGenerator } from './lib/RouteMapper'
 
-export default NavBarBackButton
-export default NavBar
-export default NavigatorWrapper
-export default TopNavigatorWrapper
+export default {
+  NavBarBackButton,
+  NavBar,
+  NavigatorWrapper,
+  TopNavigatorWrapper,
+  defaultRouteMapper,
+  leftButtonRouteMapperGenerator,
+  rightButtonRouteMapperGenerator,
+  titleRouteMapperGenerator,
+}

lib/NavBarBackButton.ios.js

@@ -7,7 +7,7 @@ class NavBarBackButton extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      tintColor: props.style.color || 'white'
+      tintColor: props.tintColor || 'black'
     }
   }
 
@@ -56,7 +56,6 @@ const styles = StyleSheet.create({
   icon: {
     paddingLeft: 8,
     paddingTop: 2,
-    color: 'black',  // TODO: fix this color
   },
   navText: {
     paddingLeft: 5,

lib/NavigatorWrapper.js

@@ -29,7 +29,7 @@ class NavigatorWrapper extends React.Component {
         }}
         navigationBar={
           <NavBar
-            routeMapper={defaultRouteMapper}
+            routeMapper={this.props.routeMapper || defaultRouteMapper()}
             style={this.props.navBarStyle}
           />
         }
@@ -44,7 +44,8 @@ NavigatorWrapper.propTypes = {
   title: PropTypes.string,
   topNavigator: PropTypes.object,
   passProps: PropTypes.object,
-  navBarStyle: StyleSheetPropType(ViewStylePropTypes)
+  navBarStyle: StyleSheetPropType(ViewStylePropTypes),
+  routeMapper: PropTypes.object,
 }
 
 export default NavigatorWrapper

lib/RouteMapper.ios.js

@@ -1,35 +1,52 @@
 import React, { Text } from 'react-native'
 import NavBarBackButton from './NavBarBackButton'
 
-export const defaultRouteMapper = {
-  LeftButton: (route, navigator, index, navState) => {
-    if (index === 0) {
-      return null
+export function leftButtonRouteMapperGenerator (BackComponent, styles, tintColor, topNavigator) {
+  return {
+    LeftButton: (route, navigator, index, navState) => {
+      if (index === 0) {
+        return null
+      }
+      const previousRoute = navState.routeStack[index - 1]
+      return (
+        <BackComponent
+          onPress={() => navigator.pop()}
+          style={styles}
+          tintColor={tintColor}>
+          {previousRoute.title}
+        </BackComponent>
+      )
     }
-    const previousRoute = navState.routeStack[index - 1]
-    return (
-      <NavBarBackButton onPress={() => navigator.pop()}
-        style={[styles.navFont, styles.back]}>
-        {previousRoute.title}
-      </NavBarBackButton>
-    )
-  },
-  RightButton: (route, navigator, index, navState) => {
-    if (route.rightElement) {
+  }
+}
+
+export function rightButtonRouteMapperGenerator (RightComponent, topNavigator) {
+  return {
+    RightButton: (route, navigator, index, navState) => {
+      if (RightComponent) {
+        return <RightComponent navigator={navigator} topNavigator={topNavigator} />
+      }
       return route.rightElement
     }
-  },
-  Title: (route, navigator, index, navState) => {
-    const title = route.title || ''
-    return (
-      <Text style={[styles.navFont, styles.navText]} numberOfLines={1}>
-        {title}
-      </Text>
-    )
   }
 }
 
-const styles = React.StyleSheet.create({
+export function titleRouteMapperGenerator (TitleComponent, styles, topNavigator) {
+  return {
+    Title: (route, navigator, index, navState) => {
+      const title = route.title || ''
+      const Component = TitleComponent || Text
+      return (
+        <Component style={styles}
+          numberOfLines={1}>
+          {title}
+        </Component>
+      )
+    }
+  }
+}
+
+const defaultStyles = React.StyleSheet.create({
   back: {
     flex: 1,
     color: 'black',
@@ -44,3 +61,11 @@ const styles = React.StyleSheet.create({
     width: 200,
   },
 })
+
+export function defaultRouteMapper () {
+  return {
+    ...leftButtonRouteMapperGenerator(NavBarBackButton, [defaultStyles.navFont, defaultStyles.back], 'black'),
+    ...rightButtonRouteMapperGenerator(),
+    ...titleRouteMapperGenerator(Text, [defaultStyles.navFont, defaultStyles.navText])
+  }
+}

lib/TopNavigatorWrapper.js

@@ -1,5 +1,7 @@
 import React, { Navigator, PropTypes } from 'react-native'
 import NavigatorWrapper from './NavigatorWrapper'
+import StyleSheetPropType from 'react-native/Libraries/StyleSheet/StyleSheetPropType'
+import ViewStylePropTypes from 'react-native/Libraries/Components/View/ViewStylePropTypes'
 
 class TopNavigatorWrapper extends React.Component {
   _renderScene (route, navigator) {
@@ -11,19 +13,26 @@ class TopNavigatorWrapper extends React.Component {
           initialComponent={this.props.initialComponent}
           title={this.props.title}
           topNavigator={navigator}
+          navBarStyle={this.props.navBarStyle}
+          routeMapper={this.props.routeMapper()}
         />
       )
     }
 
     // Render the modal component. This component serves as a FloatFromBottom
     // Navigator. Can have another navigator inside. ``passProps`` is sent into
     // the NavigatorWrapper in order to send props to the component pushed.
+    //
+    // By generating the routeMapper from a function, we can pass the outer
+    // modal navigator into the route mapper.
     return (
       <NavigatorWrapper
         initialComponent={route.component}
         title={route.title}
         topNavigator={navigator}
         passProps={route.passProps}
+        navBarStyle={this.props.modalNavBarStyle}
+        routeMapper={this.props.modalRouteMapper(navigator)}
       />
     )
   }
@@ -42,7 +51,11 @@ class TopNavigatorWrapper extends React.Component {
 
 TopNavigatorWrapper.propTypes = {
   initialComponent: PropTypes.func.isRequired,
-  title: PropTypes.string
+  title: PropTypes.string,
+  navBarStyle: StyleSheetPropType(ViewStylePropTypes),
+  routeMapper: PropTypes.func,
+  modalNavBarStyle: StyleSheetPropType(ViewStylePropTypes),
+  modalRouteMapper: PropTypes.func,
 }
 
 export default TopNavigatorWrapper

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigator-wrapper",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A React Native Navigator component wrapper that implements nested navigators for both push and modal transitions.",
   "main": "index.js",
   "scripts": {