Add examples folder with Explorer features

README.md

@@ -194,17 +194,28 @@ As of v0.8.0 the `leftCorner`, `rightCorner` and `titleComponent` have access to
 - `resetToRoute(route)`
 - `goToFirstRoute()`
 
-
-A more advanced example: Twitter app
+Examples
 ------------------------------------
 
+### Explorer app
+
+To see available features in action, you can check out the Explorer app.
+
+Clone this repo or go inside `node_modules/react-native-simple-router` folder and install dependencies, after that you will able to launch this as an standalone react-native application.
+```
+cd examples/Explorer
+npm install
+```
+
+### Twitter app
+
 To see more of the router in action, you can check out the Twitter example app that comes with the package.
 
 Test the app by requiring the TwitterApp component:
 
 ```javascript
 import React, { AppRegistry } from 'react-native';
-import TwitterApp from './node_modules/react-native-simple-router/twitter-example';
+import TwitterApp from './node_modules/react-native-simple-router/examples/twitter-example';
 
 AppRegistry.registerComponent('routerTest', () => TwitterApp);
 ```

examples/Explorer/.flowconfig

@@ -0,0 +1,65 @@
+[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/Promise.js
+.*/node_modules/fbjs/lib/fetch.js
+.*/node_modules/fbjs/lib/ExecutionEnvironment.js
+.*/node_modules/fbjs/lib/isEmpty.js
+.*/node_modules/fbjs/lib/crc32.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
+
+# 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/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+
+[options]
+module.system=haste
+
+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-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-1]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+[version]
+0.21.0

examples/Explorer/.gitignore

@@ -0,0 +1,34 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log

examples/Explorer/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/Explorer/Page.js

@@ -0,0 +1,160 @@
+import React, {
+  StyleSheet,
+  Text,
+  View,
+  ListView,
+  TouchableHighlight,
+} from 'react-native';
+
+import LeftCorner from './components/LeftCorner';
+import RightCorner from './components/RightCorner';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F6F6F6',
+    padding: 20,
+  },
+  separator: {
+    height: 1,
+    backgroundColor: '#CCCCCC',
+  },
+});
+
+export default class Page extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+
+    const features = [
+      {
+        method: 'toRoute',
+        route: {
+          component: Page,
+          name: 'toRoute()',
+        },
+      },
+      {
+        method: 'replaceRoute',
+        route: {
+          component: Page,
+          name: 'replaceRoute()',
+        },
+      },
+      {
+        method: 'resetToRoute',
+        route: {
+          component: Page,
+          name: 'resetToRoute()',
+        },
+      },
+      {
+        method: 'toRoute',
+        route: {
+          component: Page,
+          name: 'Random headerStyle',
+          headerStyle: {
+            backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
+          },
+        },
+      },
+      {
+        method: 'toRoute',
+        route: {
+          component: Page,
+          name: '(Android) Random StatusBar color',
+          statusBarProps: {
+            animated: true,
+            backgroundColor: `#${Math.floor(Math.random() * 16777215).toString(16)}`,
+          },
+        },
+      },
+      {
+        method: 'toRoute',
+        route: {
+          component: Page,
+          name: 'Hide StatusBar',
+          statusBarProps: {
+            animated: true,
+            hidden: true,
+          },
+        },
+      },
+      {
+        method: 'toRoute',
+        route: {
+          component: Page,
+          name: 'Hide NavBar',
+          hideNavigationBar: true,
+        },
+      },
+      {
+        method: 'toRoute',
+        route: {
+          component: Page,
+          name: 'Hide NavBar & StatusBar',
+          hideNavigationBar: true,
+          statusBarProps: {
+            animated: true,
+            hidden: true,
+          },
+        },
+      },
+      {
+        method: 'toRoute',
+        route: {
+          component: Page,
+          name: 'Custom Components \n Left and right corners',
+          leftCorner: LeftCorner,
+          rightCorner: RightCorner,
+        },
+      },
+    ];
+
+    this.state = {
+      dataSource: ds.cloneWithRows(features),
+    };
+
+    this.selectedRow = {};
+    features.forEach((feature) => {
+      this.selectedRow[feature.route.name] = this.onPressRow.bind(this, feature);
+    });
+
+    this.renderRow = this.renderRow.bind(this);
+  }
+
+  onPressRow(feature) {
+    this.props[feature.method](feature.route);
+  }
+
+  renderRow(rowData) {
+    return (
+      <TouchableHighlight onPress={this.selectedRow[rowData.route.name]}>
+        <View>
+          <View style={styles.row}>
+            <Text>{rowData.route.name}</Text>
+          </View>
+          <View style={styles.separator} />
+        </View>
+      </TouchableHighlight>
+    );
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <ListView
+          dataSource={this.state.dataSource}
+          renderRow={this.renderRow}
+        />
+      </View>
+    );
+  }
+}