Merge pull request #9 from APSL/v0.2.0

v0.2.0

.eslintrc

@@ -157,11 +157,9 @@
     "no-lonely-if": 0,
     "no-new-object": 1,
     "no-spaced-func": 1,
-    "semi-spacing": 1,
     "no-ternary": 0,
     "no-trailing-spaces": 1,
     "no-underscore-dangle": 0,
-    "no-extra-parens": 0,
     "no-mixed-spaces-and-tabs": 1,
     "quotes": [1, "single", "avoid-escape"],
     "quote-props": 0,

.flowconfig

@@ -0,0 +1,96 @@
+[ignore]
+
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js
+
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*
+
+# Ugh
+.*/node_modules/babel.*
+.*/node_modules/babylon.*
+.*/node_modules/invariant.*
+
+# Ignore react and fbjs where there are overlaps, but don't ignore
+# anything that react-native relies on
+.*/node_modules/fbjs/lib/Map.js
+.*/node_modules/fbjs/lib/fetch.js
+.*/node_modules/fbjs/lib/ExecutionEnvironment.js
+.*/node_modules/fbjs/lib/ErrorUtils.js
+
+# Flow has a built-in definition for the 'react' module which we prefer to use
+# over the currently-untyped source
+.*/node_modules/react/react.js
+.*/node_modules/react/lib/React.js
+.*/node_modules/react/lib/ReactDOM.js
+
+.*/__mocks__/.*
+.*/__tests__/.*
+
+.*/commoner/test/source/widget/share.js
+
+# Ignore commoner tests
+.*/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/node_modules/jest-cli/.*
+
+# Ignore Website
+.*/website/.*
+
+# Ignore generators
+.*/local-cli/generator.*
+
+# Ignore BUCK generated folders
+.*\.buckd/
+
+.*/node_modules/is-my-json-valid/test/.*\.json
+.*/node_modules/iconv-lite/encodings/tables/.*\.json
+.*/node_modules/y18n/test/.*\.json
+.*/node_modules/spdx-license-ids/spdx-license-ids.json
+.*/node_modules/spdx-exceptions/index.json
+.*/node_modules/resolve/test/subdirs/node_modules/a/b/c/x.json
+.*/node_modules/resolve/lib/core.json
+.*/node_modules/jsonparse/samplejson/.*\.json
+.*/node_modules/json5/test/.*\.json
+.*/node_modules/ua-parser-js/test/.*\.json
+.*/node_modules/builtin-modules/builtin-modules.json
+.*/node_modules/binary-extensions/binary-extensions.json
+.*/node_modules/url-regex/tlds.json
+.*/node_modules/joi/.*\.json
+.*/node_modules/isemail/.*\.json
+.*/node_modules/tr46/.*\.json
+
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+module.system=haste
+
+esproposal.class_static_fields=enable
+esproposal.class_instance_fields=enable
+
+munge_underscores=true
+
+module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-3]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+[version]
+0.23.0

README.md

@@ -2,16 +2,23 @@
 A React Native Navigator component wrapper that implements nested navigators for
 both push and modal transitions.
 
+<p align="center">
+<img src="https://raw.githubusercontent.com/wiki/APSL/react-native-navigator-wrapper/nav.gif" alt="Wrapper example" width="400">
+</p>
+
+## Disclaimer
+This component uses the JS `Navigator` implementation of React Native. Future versions of the component will use the actual `NavigatorExperimental`.
+
 ## Installation
 You can install this component through ``npm``:
 
 ```shell
 npm i react-native-navigator-wrapper --save
 ```
 
-You also need to install the awesome
+Configure the awesome
 [``react-native-vector-icons``](https://github.com/oblador/react-native-vector-icons#installation)
-from Joel Oblador (in order to use the back button arrow icon) and include the
+from Joel Oblador to display the back button icons. Remember to include the
 ``Ionicons.ttf`` font in your project. All the components of the library are
 written in ES6/ES7 style.
 
@@ -48,43 +55,37 @@ modal component.
 ## Usage
 This library can be used in several ways. It's composed from a couple of different
 components that interact with each other. In short, it has a navigation bar that
-mimics the iOS navigation bar and two navigation wrappers. Expect an Android
-style navigation bar soon.
+mimics the iOS and Android navigation bar and two navigation wrappers.
 
 ### Nested navigation with ``TopNavigatorWrapper``
 You can use ``TopNavigatorWrapper`` component to bring the nested navigator
 strategy just importing the component and wrapping whatever you want to render
 inside it:
 
 ```js
-import React from 'react-native'
+import React from 'react'
 import { TopNavigatorWrapper } from 'react-native-navigator-wrapper'
 import MyComponent from './MyComponent'
 
 class MyApp extends React.Component {
   render () {
     return (
-      <TopNavigatorWrapper
-        initialRoute={{
-          component: MyComponent,
-          title='Title'
-        }}
-      />
+      <TopNavigatorWrapper modalStyle={{backgroundColor: '#090909'}}>
+        <MyComponent />
+      </TopNavigatorWrapper>
     )
   }
 }
 ```
 
-You component ``MyComponent`` will have two props, **navigator** and
-**topNavigator**. They will let you to push new components from right using
-the first one or open a modal pushing from the second one.
+You component ``MyComponent`` will have a **topNavigator** prop. It will let you to push new components in a modal-style, opening from bottom to top.
 
 ### Navigation with ``NavigatorWrapper``
 If you just want to use the navigation bar inside a navigator, use the
 ``NavigatorWrapper`` component:
 
 ```js
-import React from 'react-native'
+import React from 'react'
 import { NavigatorWrapper } from 'react-native-navigator-wrapper'
 
 class MyComponent extends React.Component {
@@ -109,12 +110,15 @@ that will let you to keep pushing components in the stack.
 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.
+This library auto-generates a default route mapper object that displays an iOS & Android 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.
 
+## 🚧 Roadmap
+
+- [ ] Handle several hardware back button actions with multiple navigators (Android).
+
 ## License
 MIT.

index.js

@@ -1,3 +1,5 @@
+/* @flow */
+
 import NavBarBackButton from './lib/NavBarBackButton'
 import NavBar from './lib/NavBar'
 import NavigatorWrapper from './lib/NavigatorWrapper'

lib/NavBar.android.js

@@ -1,11 +1,17 @@
-import React, {
+/* @flow */
+
+import React from 'react'
+import {
   Navigator,
   StyleSheet,
 } from 'react-native'
 
 const stylesAndroid = StyleSheet.create({
   navBar: {
-    backgroundColor: 'white',
+    backgroundColor: '#f5f5f5',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
   }
 })
 

lib/NavBar.ios.js

@@ -1,4 +1,7 @@
-import React, { Navigator, StyleSheet, PixelRatio } from 'react-native'
+/* @flow */
+
+import React from 'react'
+import { Navigator, StyleSheet, PixelRatio } from 'react-native'
 
 class NavBar extends React.Component {
   updateProgress (progress, fromIndex, toIndex) {

lib/NavBarBackButton.android.js

@@ -1,6 +1,7 @@
-import React, { TouchableOpacity, Text, PropTypes, StyleSheet } from 'react-native'
-import StyleSheetPropType from 'react-native/Libraries/StyleSheet/StyleSheetPropType'
-import TextStylePropTypes from 'react-native/Libraries/Text/TextStylePropTypes'
+/* @flow */
+
+import React, { PropTypes } from 'react'
+import { TouchableOpacity, Text, StyleSheet } from 'react-native'
 import Ionicon from 'react-native-vector-icons/Ionicons'
 
 class NavBarBackButton extends React.Component {
@@ -32,7 +33,7 @@ class NavBarBackButton extends React.Component {
       <TouchableOpacity
         {...touchableProps}
         style={styles.container}>
-        <Ionicon name='android-arrow-back' size={24} style={styles.icon}
+        <Ionicon name='md-arrow-back' size={24} style={styles.icon}
           color={this.state.tintColor} />
         {this._renderBackTitle.bind(this)}
       </TouchableOpacity>
@@ -44,7 +45,7 @@ NavBarBackButton.propTypes = {
   ...TouchableOpacity.propTypes,
   tintColor: PropTypes.string,
   children: PropTypes.string.isRequired,
-  style: StyleSheetPropType(TextStylePropTypes),
+  style: Text.propTypes.style,
   showBackTitle: PropTypes.bool,
 }
 

lib/NavBarBackButton.ios.js

@@ -1,10 +1,13 @@
-import React, { TouchableOpacity, Text, PropTypes, StyleSheet } from 'react-native'
-import StyleSheetPropType from 'react-native/Libraries/StyleSheet/StyleSheetPropType'
-import TextStylePropTypes from 'react-native/Libraries/Text/TextStylePropTypes'
+/* @flow */
+
+import React, { PropTypes } from 'react'
+import { TouchableOpacity, Text, StyleSheet } from 'react-native'
 import Ionicon from 'react-native-vector-icons/Ionicons'
 
 class NavBarBackButton extends React.Component {
-  constructor (props) {
+  state: Object;
+
+  constructor (props: Object) {
     super(props)
     this.state = {
       tintColor: props.tintColor || 'black'
@@ -34,7 +37,7 @@ class NavBarBackButton extends React.Component {
         style={styles.container}>
         <Ionicon name='ios-arrow-back' size={32} style={styles.icon}
           color={this.state.tintColor} />
-        {this._renderBackTitle.bind(this)}
+        {this._renderBackTitle()}
       </TouchableOpacity>
     )
   }
@@ -44,7 +47,7 @@ NavBarBackButton.propTypes = {
   ...TouchableOpacity.propTypes,
   tintColor: PropTypes.string,
   children: PropTypes.string.isRequired,
-  style: StyleSheetPropType(TextStylePropTypes),
+  style: Text.propTypes.style,
   showBackTitle: PropTypes.bool,
 }