improved colorful nav bar example

example/ios/example/Info.plist

@@ -35,14 +35,13 @@
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
+	<true/>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
-  <key>NSAppTransportSecurity</key>
-  <dict>
-    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
-  </dict>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
 </dict>
 </plist>

example/src/app.js

@@ -28,8 +28,9 @@ Navigation.startTabBasedApp({
       title: 'Screen Three',
       navigatorStyle: {
         navBarBackgroundColor: '#4dbce9',
-        navBarTextColor: '#f7f7f7',
-        navBarButtonColor: '#ffffff'
+        navBarTextColor: '#ffff00',
+        navBarButtonColor: '#ffffff',
+        statusBarTextColorScheme: 'light'
       }
     }
   ]

example/src/screens/StyledScreen.js

@@ -18,7 +18,8 @@ import './StyledScreen';
 class StyledScreen extends Screen {
   static navigatorStyle = {
     drawUnderNavBar: true,
-    drawUnderTabBar: true
+    drawUnderTabBar: true,
+    navBarTranslucent: true
   };
   constructor(props) {
     super(props);

example/src/screens/ThirdTabScreen.js

@@ -2,12 +2,18 @@ import React, {
   Text,
   View,
   ScrollView,
-  TouchableOpacity
+  TouchableOpacity,
+  StyleSheet
 } from 'react-native';
 
 // important imports, the magic is here
 import { Navigation, Screen } from 'react-native-navigation';
 
+// need to import every screen we push
+import './PushedScreen';
+import './StyledScreen';
+import './ModalScreen';
+
 // instead of React.Component, we extend Screen (imported above)
 class ThirdTabScreen extends Screen {
   constructor(props) {
@@ -16,11 +22,51 @@ class ThirdTabScreen extends Screen {
   render() {
     return (
       <View style={{flex: 1, padding: 20}}>
-        <Text>Third Tab Screen</Text>
+
+        <TouchableOpacity onPress={ this.onPushPress.bind(this) }>
+          <Text style={styles.button}>Push Plain Screen</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onPushStyledPress.bind(this) }>
+          <Text style={styles.button}>Push Styled Screen</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity onPress={ this.onModalPress.bind(this) }>
+          <Text style={styles.button}>Show Modal Screen</Text>
+        </TouchableOpacity>
+
       </View>
     );
   }
+  onPushPress() {
+    this.navigator.push({
+      title: "More",
+      screen: "example.PushedScreen"
+    });
+  }
+  onPushStyledPress() {
+    this.navigator.push({
+      title: "Styled",
+      screen: "example.StyledScreen"
+    });
+  }
+  onModalPress() {
+    this.navigator.showModal({
+      title: "Modal",
+      screen: "example.ModalScreen"
+    });
+  }
 }
 
+const styles = StyleSheet.create({
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
 // every screen must be registered with a unique name
 Navigation.registerScreen('example.ThirdTabScreen', () => ThirdTabScreen);