Add SideMenu to BottomTabsActivity

example-redux/src/app.js

@@ -35,82 +35,82 @@ export default class App {
   startApp(root) {
     switch (root) {
       case 'login':
-        //Navigation.startSingleScreenApp({
-        //  screen: {
-        //    screen: 'example.LoginScreen',
-        //    title: 'Login',
-        //    navigatorStyle: {}
-        //  },
-        //  passProps: {
-        //    str: 'This is a prop passed in \'startSingleScreenApp()\'!',
-        //    obj: {
-        //      str: 'This is a prop passed in an object!',
-        //      arr: [
-        //        {
-        //          str: 'This is a prop in an object in an array in an object!'
-        //        }
-        //      ],
-        //      arr2: [
-        //        [
-        //          'array of strings',
-        //          'with two strings'
-        //        ],
-        //        [
-        //          1, 2, 3
-        //        ]
-        //      ]
-        //    },
-        //    num: 1234,
-        //    fn: function() {
-        //      return 'Hello from a function!';
-        //    }
-        //  }
-        //});
         Navigation.startSingleScreenApp({
-          screen: {
-            screen: 'example.FirstTabScreen',
-            title: 'Login',
-            topTabs: [
-              {
-                screenId: 'example.ListScreen',
-                title: 'Tab1',
-                passProps: {
-                  str: 'This is a prop passed to Tab1'
-                }
-              },
-              {
-                screenId: 'example.PushedScreen',
-                title: 'Tab2',
-                passProps: {
-                  str: 'This is a prop passed to Tab2'
-                }
-
-              },
-              {
-                screenId: 'example.PushedScreen',
-                title: 'Tab3',
-                passProps: {
-                  str: 'This is a prop passed to Tab3'
-                }
-              },
-              {
-                screenId: 'example.FirstTabScreen',
-                title: 'Tab4',
-                passProps: {
-                  str: 'This is a prop passed to Tab4',
-                  fn: () => 'Hello from a function passed as passProps!'
-                }
-              }
-            ],
-            navigatorStyle: {}
-          },
-          drawer: { // optional, add this if you want a side menu drawer in your app
-            left: { // optional, define if you want a drawer from the left
-              screen: 'example.SideMenu' // unique ID registered with Navigation.registerScreen
-            },
-            disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
-          }
+         screen: {
+           screen: 'example.LoginScreen',
+           title: 'Login',
+           navigatorStyle: {}
+         },
+         passProps: {
+           str: 'This is a prop passed in \'startSingleScreenApp()\'!',
+           obj: {
+             str: 'This is a prop passed in an object!',
+             arr: [
+               {
+                 str: 'This is a prop in an object in an array in an object!'
+               }
+             ],
+             arr2: [
+               [
+                 'array of strings',
+                 'with two strings'
+               ],
+               [
+                 1, 2, 3
+               ]
+             ]
+           },
+           num: 1234,
+           fn: function() {
+             return 'Hello from a function!';
+           }
+         }
         });
+        // Navigation.startSingleScreenApp({
+        //   screen: {
+        //     screen: 'example.FirstTabScreen',
+        //     title: 'Login',
+        //     topTabs: [
+        //       {
+        //         screenId: 'example.ListScreen',
+        //         title: 'Tab1',
+        //         passProps: {
+        //           str: 'This is a prop passed to Tab1'
+        //         }
+        //       },
+        //       {
+        //         screenId: 'example.PushedScreen',
+        //         title: 'Tab2',
+        //         passProps: {
+        //           str: 'This is a prop passed to Tab2'
+        //         }
+        //
+        //       },
+        //       {
+        //         screenId: 'example.PushedScreen',
+        //         title: 'Tab3',
+        //         passProps: {
+        //           str: 'This is a prop passed to Tab3'
+        //         }
+        //       },
+        //       {
+        //         screenId: 'example.FirstTabScreen',
+        //         title: 'Tab4',
+        //         passProps: {
+        //           str: 'This is a prop passed to Tab4',
+        //           fn: () => 'Hello from a function passed as passProps!'
+        //         }
+        //       }
+        //     ],
+        //     navigatorStyle: {}
+        //   },
+        //   drawer: { // optional, add this if you want a side menu drawer in your app
+        //     left: { // optional, define if you want a drawer from the left
+        //       screen: 'example.SideMenu' // unique ID registered with Navigation.registerScreen
+        //     },
+        //     disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
+        //   }
+        // });
         return;
       case 'after-login':
         Navigation.startTabBasedApp({
@@ -121,7 +121,7 @@ export default class App {
               icon: require('../img/one.png'),
               selectedIcon: require('../img/one_selected.png'),
               title: 'Screen One',
-              navigatorStyle: {},
+              navigatorStyle: {}
             },
             {
               label: 'Two',
@@ -129,7 +129,7 @@ export default class App {
               icon: require('../img/two.png'),
               selectedIcon: require('../img/two_selected.png'),
               title: 'Screen Two',
-              navigatorStyle: {},
+              navigatorStyle: {}
             }
           ],
           passProps: {
@@ -145,7 +145,13 @@ export default class App {
             num: 1234
           },
           animationType: 'slide-down',
-          title: 'Redux Example'
+          title: 'Redux Example',
+          drawer: { // optional, add this if you want a side menu drawer in your app
+            left: { // optional, define if you want a drawer from the left
+              screen: 'example.BottomTabsSideMenu' // unique ID registered with Navigation.registerScreen
+            },
+            disableOpenGesture: false // optional, can the drawer be opened with a swipe instead of button
+          }
         });
         return;
       default:

example-redux/src/screens/BottomTabsSideMenu.js

@@ -0,0 +1,79 @@
+import React, {Component, PropTypes} from 'react';
+import {
+  Text,
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Alert
+} from 'react-native';
+import {connect} from 'react-redux';
+import * as counterActions from '../reducers/counter/actions';
+import _ from 'lodash';
+
+class SideMenu extends Component {
+
+  constructor(props) {
+    super(props);
+    // if you want to listen on navigator events, set this up
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+  }
+
+  onNavigatorEvent(event) {
+      console.log('SideMenu', 'Unhandled event ' + event.id);
+  }
+
+  render() {
+    return (
+      <View style={styles.sideMenu}>
+        <Text style={styles.title}>Hello from SideMenu</Text>
+
+        <TouchableOpacity onPress={ this.onShowModalPress.bind(this) }>
+          <Text style={styles.button}>Show modal</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  onShowModalPress() {
+    this.props.navigator.showModal({
+      title: "Modal Screen from SideMenu",
+      screen: "example.PushedScreen",
+      passProps: {
+        str: 'This is a prop passed in \'navigator.showModal()\'!',
+        obj: {
+          str: 'This is a prop passed in an object!',
+          arr: [
+            {
+              str: 'This is a prop in an object in an array in an object!'
+            }
+          ]
+        },
+        num: 1234
+      }
+    });
+  }
+}
+
+const styles = StyleSheet.create({
+  sideMenu: {
+    flex: 1,
+    backgroundColor: '#efefef',
+    padding: 20
+  },
+  title: {
+    textAlign: 'center',
+    marginBottom: 15
+  },
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    borderBottomWidth: 1,
+    borderColor: 'grey',
+    marginBottom: 10,
+    marginTop:10,
+    color: 'black'
+  }
+});
+
+export default connect()(SideMenu);

example-redux/src/screens/SideMenu.js

@@ -32,7 +32,7 @@ class SideMenu extends Component {
           <Text style={styles.button}>Show modal</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity onPress={ this.onPushScreenToTabOne.bind(this) }>
+        <TouchableOpacity onPress={ this.onPushScreen.bind(this) }>
           <Text style={styles.button}>Push screen</Text>
         </TouchableOpacity>
       </View>
@@ -58,7 +58,7 @@ class SideMenu extends Component {
     });
   }
 
-  onPushScreenToTabOne() {
+  onPushScreen() {
     this.props.navigator.handleDeepLink({
       link: 'tab1/pushScreen/example.PushedScreen'
     });

example-redux/src/screens/index.js

@@ -6,6 +6,7 @@ import SecondTabScreen from './SecondTabScreen';
 import PushedScreen from './PushedScreen';
 import ListScreen from './ListScreen';
 import SideMenu from './SideMenu';
+import BottomTabsSideMenu from './BottomTabsSideMenu';
 
 // register all screens of the app (including internal ones)
 export function registerScreens(store, Provider) {
@@ -15,4 +16,5 @@ export function registerScreens(store, Provider) {
   Navigation.registerComponent('example.PushedScreen', () => PushedScreen, store, Provider);
   Navigation.registerComponent('example.ListScreen', () => ListScreen, store, Provider);
   Navigation.registerComponent('example.SideMenu', () => SideMenu, store, Provider);
+  Navigation.registerComponent('example.BottomTabsSideMenu', () => BottomTabsSideMenu, store, Provider);
 }