split example FirstTabScreen

example/src/screens/FirstTabScreen.android.js

@@ -0,0 +1,125 @@
+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/index.ios.js

@@ -1,4 +1,4 @@
-import { Navigation } from 'react-native-navigation';
+import {Navigation} from 'react-native-navigation';
 
 import FirstTabScreen from './FirstTabScreen';
 import SecondTabScreen from './SecondTabScreen';
@@ -7,7 +7,7 @@ import PushedScreen from './PushedScreen';
 import StyledScreen from './StyledScreen';
 import ModalScreen from './ModalScreen';
 import LightBoxScreen from './LightBoxScreen';
-import NotificationScreen from './NotificationScreen'
+import NotificationScreen from './NotificationScreen';
 import SideMenu from './SideMenu';
 
 // register all screens of the app (including internal ones)