Minor changes in example project

consolidated some screens
minor ui changes and fixes

example/android/app/src/main/java/com/example/MyActivity.java

@@ -1,9 +1,7 @@
 package com.example;
 
-
-import android.view.View;
-
 import com.reactnativenavigation.controllers.SplashActivity;
 
 public class MyActivity extends SplashActivity {
+
 }

example/src/app.android.js

@@ -1,20 +0,0 @@
-import {Navigation} from 'react-native-navigation';
-
-// screen related book keeping
-import {registerScreens} from './screens';
-registerScreens();
-
-// this will start our app
-Navigation.startSingleScreenApp({
-  screen: {
-    screen: 'example.FirstTabScreen',
-    title: 'Login',
-    navigatorStyle: {
-      navBarBackgroundColor: '#4dbce9',
-      navBarTextColor: '#ffff00',
-      navBarSubtitleTextColor: '#ff0000',
-      navBarButtonColor: '#ffffff',
-      statusBarTextColorScheme: 'light'
-    }
-  }
-});

example/src/app.ios.js

@@ -1,25 +0,0 @@
-import {Navigation} from 'react-native-navigation';
-
-// screen related book keeping
-import {registerScreens} from './screens';
-registerScreens();
-
-// this will start our app
-Navigation.startSingleScreenApp({
-  screen: {
-    screen: 'example.FirstTabScreen',
-    title: 'Login',
-    navigatorStyle: {
-      navBarBackgroundColor: '#4dbce9',
-      navBarTextColor: '#ffff00',
-      navBarSubtitleTextColor: '#ff0000',
-      navBarButtonColor: '#ffffff',
-      statusBarTextColorScheme: 'light'
-    }
-  },
-  drawer: {
-    left: {
-      screen: 'example.SideMenu'
-    }
-  }
-});

example/src/app.js

@@ -0,0 +1,56 @@
+import {Navigation} from 'react-native-navigation';
+
+// screen related book keeping
+import {registerScreens} from './screens';
+registerScreens();
+
+// this will start our app
+Navigation.startTabBasedApp({
+  tabs: [
+    {
+      label: 'One',
+      screen: 'example.FirstTabScreen',
+      icon: require('../img/one.png'),
+      selectedIcon: require('../img/one_selected.png'),
+      title: 'Screen One',
+      navigatorStyle: {
+        navBarBackgroundColor: '#4dbce9',
+        navBarTextColor: '#ffff00',
+        navBarSubtitleTextColor: '#ff0000',
+        navBarButtonColor: '#ffffff',
+        statusBarTextColorScheme: 'light',
+        tabBarBackgroundColor: '#4dbce9',
+        tabBarButtonColor: '#ffffff',
+        tabBarSelectedButtonColor: '#ffff00'
+      }
+    },
+    {
+      label: 'Two',
+      screen: 'example.SecondTabScreen',
+      icon: require('../img/two.png'),
+      selectedIcon: require('../img/two_selected.png'),
+      title: 'Screen Two',
+      navigatorStyle: {
+        tabBarBackgroundColor: '#4dbce9',
+      }
+    }
+  ]
+});
+// Navigation.startSingleScreenApp({
+//   screen: {
+//     screen: 'example.FirstTabScreen',
+//     title: 'Navigation',
+//     navigatorStyle: {
+//       navBarBackgroundColor: '#4dbce9',
+//       navBarTextColor: '#ffff00',
+//       navBarSubtitleTextColor: '#ff0000',
+//       navBarButtonColor: '#ffffff',
+//       statusBarTextColorScheme: 'light'
+//     }
+//   },
+//   drawer: {
+//     left: {
+//       screen: 'example.SideMenu'
+//     }
+//   }
+// });

example/src/screens/FirstTabScreen.android.js

@@ -1,125 +0,0 @@
-import React, {Component} from 'react';
-import {
-  Text,
-  View,
-  TouchableHighlight,
-  StyleSheet,
-  AlertIOS
-} from 'react-native';
-
-export default class FirstTabScreen extends Component {
-  static navigatorButtons = {
-    leftButtons: [{
-      icon: require('../../img/navicon_menu.png'),
-      id: 'menu'
-    }],
-    rightButtons: [
-      {
-        title: 'Edit',
-        id: 'edit'
-      },
-      {
-        icon: require('../../img/navicon_add.png'),
-        id: 'add'
-      }
-    ]
-  };
-  static navigatorStyle = {
-    drawUnderTabBar: true
-  };
-
-  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) {
-    if (event.id === 'menu') {
-      this.props.navigator.toggleDrawer({
-        side: 'left',
-        animated: true
-      });
-    }
-    if (event.id === 'edit') {
-      AlertIOS.alert('NavBar', 'Edit button pressed');
-    }
-    if (event.id === 'add') {
-      AlertIOS.alert('NavBar', 'Add button pressed');
-    }
-  }
-
-  render() {
-    return (
-      <View style={{flex: 1, padding: 20}}>
-
-        <TouchableHighlight onPress={ this.onPushPress.bind(this) }>
-          <Text style={styles.button}>Push Plain Screen</Text>
-        </TouchableHighlight>
-
-        <TouchableHighlight onPress={ this.onPushStyledPress.bind(this) }>
-          <Text style={styles.button}>Push Styled Screen</Text>
-        </TouchableHighlight>
-
-        <TouchableHighlight onPress={ this.onModalPress.bind(this) }>
-          <Text style={styles.button}>Show Modal Screen</Text>
-        </TouchableHighlight>
-
-        <TouchableHighlight onPress={ this.onLightBoxPress.bind(this) }>
-          <Text style={styles.button}>Show LightBox</Text>
-        </TouchableHighlight>
-
-        <TouchableHighlight onPress={ this.onInAppNotificationPress.bind(this) }>
-          <Text style={styles.button}>Show In-App Notification</Text>
-        </TouchableHighlight>
-
-      </View>
-    );
-  }
-
-  onPushPress() {
-    this.props.navigator.push({
-      title: "More",
-      screen: "example.PushedScreen"
-    });
-  }
-
-  onPushStyledPress() {
-    this.props.navigator.push({
-      title: "Styled",
-      screen: "example.StyledScreen"
-    });
-  }
-
-  onModalPress() {
-    this.props.navigator.showModal({
-      title: "Modal",
-      screen: "example.ModalScreen"
-    });
-  }
-
-  onLightBoxPress() {
-    this.props.navigator.showLightBox({
-      screen: "example.LightBoxScreen",
-      style: {
-        backgroundBlur: "dark"
-      }
-    });
-  }
-
-  onInAppNotificationPress() {
-    this.props.navigator.showInAppNotification({
-      screen: "example.NotificationScreen"
-    });
-  }
-}
-
-const styles = StyleSheet.create({
-  button: {
-    textAlign: 'center',
-    fontSize: 18,
-    marginBottom: 10,
-    marginTop: 10,
-    color: 'blue'
-  }
-});

example/src/screens/FirstTabScreen.ios.js → example/src/screens/FirstTabScreen.js

@@ -4,7 +4,8 @@ import {
   View,
   TouchableOpacity,
   StyleSheet,
-  AlertIOS
+  Alert,
+  Platform
 } from 'react-native';
 
 export default class FirstTabScreen extends Component {
@@ -42,17 +43,16 @@ export default class FirstTabScreen extends Component {
       });
     }
     if (event.id === 'edit') {
-      AlertIOS.alert('NavBar', 'Edit button pressed');
+      Alert.alert('NavBar', 'Edit button pressed');
     }
     if (event.id === 'add') {
-      AlertIOS.alert('NavBar', 'Add button pressed');
+      Alert.alert('NavBar', 'Add button pressed');
     }
   }
 
   render() {
     return (
       <View style={{flex: 1, padding: 20}}>
-
         <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
           <Text style={styles.button}>Push Plain Screen</Text>
         </TouchableOpacity>
@@ -65,14 +65,19 @@ export default class FirstTabScreen extends Component {
           <Text style={styles.button}>Show Modal Screen</Text>
         </TouchableOpacity>
 
-        <TouchableOpacity onPress={ this.onLightBoxPress.bind(this) }>
-          <Text style={styles.button}>Show LightBox</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity onPress={ this.onInAppNotificationPress.bind(this) }>
-          <Text style={styles.button}>Show In-App Notification</Text>
-        </TouchableOpacity>
-
+        {
+          Platform.OS === 'ios' ?
+            <TouchableOpacity onPress={ this.onLightBoxPress.bind(this) }>
+              <Text style={styles.button}>Show LightBox</Text>
+            </TouchableOpacity> : false
+        }
+
+        {
+          Platform.OS === 'ios' ?
+            <TouchableOpacity onPress={ this.onInAppNotificationPress.bind(this) }>
+              <Text style={styles.button}>Show In-App Notification</Text>
+            </TouchableOpacity> : false
+        }
       </View>
     );
   }

example/src/screens/ModalScreen.js

@@ -21,7 +21,7 @@ export default class ModalScreen extends Component {
   }
   render() {
     return (
-      <View style={{flex: 1, padding: 20}}>
+      <View style={styles.container}>
 
         <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
           <Text style={styles.button}>Push Plain Screen</Text>
@@ -68,6 +68,11 @@ export default class ModalScreen extends Component {
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    padding: 20
+  },
   button: {
     textAlign: 'center',
     fontSize: 18,

example/src/screens/PushedScreen.js

@@ -16,8 +16,7 @@ export default class PushedScreen extends Component {
   }
   render() {
     return (
-      <View style={{flex: 1, padding: 20}}>
-
+      <View style={styles.container}>
         <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
           <Text style={styles.button}>Push Plain Screen</Text>
         </TouchableOpacity>
@@ -37,7 +36,6 @@ export default class PushedScreen extends Component {
         <TouchableOpacity onPress={ this.onResetToPress.bind(this) }>
           <Text style={styles.button}>Reset To</Text>
         </TouchableOpacity>
-
       </View>
     );
   }
@@ -68,6 +66,11 @@ export default class PushedScreen extends Component {
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: 'white'
+  },
   button: {
     textAlign: 'center',
     fontSize: 18,

example/src/screens/SecondTabScreen.js

@@ -5,22 +5,29 @@ import {
   ScrollView,
   TouchableOpacity,
   StyleSheet,
-  AlertIOS
+  Alert
 } from 'react-native';
 
 export default class SecondTabScreen extends Component {
-  static navigatorStyle = {
-    drawUnderTabBar: true
+  static navigatorStyle: {
+    drawUnderTabBar: true,
+    navBarBackgroundColor: '#4dbce9',
+    navBarTextColor: '#ffff00',
+    navBarSubtitleTextColor: '#ff0000',
+    navBarButtonColor: '#ffffff',
+    statusBarTextColorScheme: 'light'
   };
+
   constructor(props) {
     super(props);
     this.buttonsCounter = 0;
     // if you want to listen on navigator events, set this up
     this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
   }
+
   render() {
     return (
-      <View style={{flex: 1, padding: 20}}>
+      <View style={styles.container}>
 
         <TouchableOpacity onPress={ this.onChangeButtonsPress.bind(this) }>
           <Text style={styles.button}>Change Buttons</Text>
@@ -111,19 +118,24 @@ export default class SecondTabScreen extends Component {
     // handle a button press
     if (event.type == 'NavBarButtonPress') {
       if (event.id == 'edit') {
-        AlertIOS.alert('NavBar', 'Dynamic Edit button pressed');
+        Alert.alert('NavBar', 'Dynamic Edit button pressed');
       }
       if (event.id == 'add') {
-        AlertIOS.alert('NavBar', 'Dynamic Add button pressed');
+        Alert.alert('NavBar', 'Dynamic Add button pressed');
       }
       if (event.id == 'save') {
-        AlertIOS.alert('NavBar', 'Dynamic Save button pressed');
+        Alert.alert('NavBar', 'Dynamic Save button pressed');
       }
     }
   }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: 'white'
+  },
   button: {
     textAlign: 'center',
     fontSize: 18,

example/src/screens/SideMenu.js

@@ -14,8 +14,7 @@ export default class SideMenu extends Component {
   }
   render() {
     return (
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-
+      <View style={styles.container}>
         <Text style={styles.title}>Side Menu</Text>
 
         <TouchableOpacity onPress={ this.onReplaceTab2Press.bind(this) }>
@@ -25,16 +24,11 @@ export default class SideMenu extends Component {
         <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
           <Text style={styles.button}>Show Modal Screen</Text>
         </TouchableOpacity>
-
       </View>
     );
   }
   onReplaceTab2Press() {
-    this.props.navigator.toggleDrawer({
-      to: 'closed',
-      side: 'left',
-      animated: true
-    });
+    this._toggleDrawer();
     // push/pop navigator actions affect the navigation stack of the current screen only.
     // since side menu actions are normally directed at sibling tabs, push/pop will
     // not help us. the recommended alternative is to use deep links for this purpose
@@ -42,15 +36,32 @@ export default class SideMenu extends Component {
       link: "tab2/example.PushedScreen"
     });
   }
+
   onModalPress() {
+    this._toggleDrawer();
     this.props.navigator.showModal({
       title: "Modal",
       screen: "example.ModalScreen"
     });
   }
+
+  _toggleDrawer() {
+    this.props.navigator.toggleDrawer({
+      to: 'closed',
+      side: 'left',
+      animated: true
+    });
+  }
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    width: 300
+  },
   title: {
     textAlign: 'center',
     fontSize: 18,

example/src/screens/StyledScreen.js

@@ -6,7 +6,8 @@ import {
   TouchableOpacity,
   Image,
   StyleSheet,
-  AlertIOS
+  Alert,
+  Platform
 } from 'react-native';
 
 export default class StyledScreen extends Component {
@@ -29,12 +30,10 @@ export default class StyledScreen extends Component {
   }
   render() {
     return (
-      <ScrollView style={{flex: 1}}>
-
+      <ScrollView style={styles.container}>
         <Image style={{width: undefined, height: 100}} source={require('../../img/colors.png')} />
 
         <View style={{padding: 20}}>
-
           <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
             <Text style={styles.button}>Push Plain Screen</Text>
           </TouchableOpacity>
@@ -54,7 +53,6 @@ export default class StyledScreen extends Component {
           <TouchableOpacity onPress={ this.onSetTitleImagePress.bind(this) }>
             <Text style={styles.button}>Set Title Image</Text>
           </TouchableOpacity>
-
         </View>
 
       </ScrollView>
@@ -62,7 +60,7 @@ export default class StyledScreen extends Component {
   }
   onNavigatorEvent(event) {
     if (event.id == 'compose') {
-      AlertIOS.alert('NavBar', 'Compose button pressed');
+      Alert.alert('NavBar', 'Compose button pressed');
     }
   }
   onPushPress() {
@@ -82,15 +80,21 @@ export default class StyledScreen extends Component {
   }
   
   onSetSubtitlePress() {
-    this.props.navigator.setTitle({
-      title: 'title',
-      subtitle: 'subtitle',
-      navigatorStyle: {
-        navBarSubtitleTextColor: '#ff00ff',
-        navBarTextColor: '#ffff00'
-        
-      }
-    })
+    if (Platform.OS === 'android') {
+      this.props.navigator.setSubTitle({
+        subtitle: 'Subtitle'
+      });
+    } else {
+      this.props.navigator.setTitle({
+        title: 'title',
+        subtitle: 'subtitle',
+        navigatorStyle: {
+          navBarSubtitleTextColor: '#ff00ff',
+          navBarTextColor: '#ffff00'
+
+        }
+      })
+    }
   }
   
   onSetTitleImagePress() {
@@ -103,6 +107,10 @@ export default class StyledScreen extends Component {
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white'
+  },
   button: {
     textAlign: 'center',
     fontSize: 18,

example/src/screens/ThirdTabScreen.js

@@ -19,7 +19,7 @@ export default class ThirdTabScreen extends Component {
   }
   render() {
     return (
-      <View style={{flex: 1, padding: 20}}>
+      <View style={styles.container}>
 
         <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
           <Text style={styles.button}>Push Plain Screen</Text>
@@ -86,6 +86,11 @@ export default class ThirdTabScreen extends Component {
 }
 
 const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: 'white'
+  },
   button: {
     textAlign: 'center',
     fontSize: 18,

example/src/screens/index.android.js

@@ -6,6 +6,7 @@ import ThirdTabScreen from './ThirdTabScreen';
 import PushedScreen from './PushedScreen';
 import StyledScreen from './StyledScreen';
 import SideMenu from './SideMenu';
+import ModalScreen from './ModalScreen';
 
 // register all screens of the app (including internal ones)
 export function registerScreens() {
@@ -14,5 +15,6 @@ export function registerScreens() {
   Navigation.registerComponent('example.ThirdTabScreen', () => ThirdTabScreen);
   Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
+  Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
   Navigation.registerComponent('example.SideMenu', () => SideMenu);
 }

example/src/screens/index.ios.js

@@ -5,10 +5,10 @@ import SecondTabScreen from './SecondTabScreen';
 import ThirdTabScreen from './ThirdTabScreen';
 import PushedScreen from './PushedScreen';
 import StyledScreen from './StyledScreen';
+import SideMenu from './SideMenu';
 import ModalScreen from './ModalScreen';
-import LightBoxScreen from './LightBoxScreen';
 import NotificationScreen from './NotificationScreen';
-import SideMenu from './SideMenu';
+import LightBoxScreen from './LightBoxScreen';
 
 // register all screens of the app (including internal ones)
 export function registerScreens() {
@@ -18,7 +18,7 @@ export function registerScreens() {
   Navigation.registerComponent('example.PushedScreen', () => PushedScreen);
   Navigation.registerComponent('example.StyledScreen', () => StyledScreen);
   Navigation.registerComponent('example.ModalScreen', () => ModalScreen);
-  Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
   Navigation.registerComponent('example.NotificationScreen', () => NotificationScreen);
   Navigation.registerComponent('example.SideMenu', () => SideMenu);
+  Navigation.registerComponent('example.LightBoxScreen', () => LightBoxScreen);
 }