iOS refactoring

playground/e2e/app.test.js

@@ -50,6 +50,13 @@ describe('app', () => {
     elementByLabel('Dismiss Modal').tap();
     expect(elementByLabel('React Native Navigation!')).toBeVisible();
   });
+  
+  it.only('show multiple modals', () => {
+    elementByLabel('Show Modal').tap();
+    expect(elementByLabel('ModalStackPosition: 1')).toBeVisible();
+    elementByLabel('Show Modal').tap();
+    expect(elementByLabel('ModalStackPosition: 2s')).toBeVisible();
+  })
 });
 
 describe('reload app', () => {

playground/src/containers/LifecycleScreen.js

@@ -23,15 +23,17 @@ class LifecycleScreen extends Component {
   render() {
     return (
       <View style={styles.root}>
+        <Text style={styles.h1}>Lifecycle Screen</Text>
         <Text style={styles.h1}>{this.state.text}</Text>
         <Button title="Push to test onStop" onPress={this.onClickPush} />
+        <Text style={styles.footer}>ContainerId: {this.props.id}</Text>
       </View>
     );
   }
 
   onClickPush() {
     Navigation.on(this.props.id).push({
-      name: 'navigation.playground.SimpleScreen'
+      name: 'navigation.playground.TextScreen'
     });
   }
 }
@@ -48,5 +50,10 @@ const styles = {
     fontSize: 24,
     textAlign: 'center',
     margin: 10
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
   }
 };

playground/src/containers/ModalScreen.js

@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Button
+} from 'react-native';
+
+import Navigation from 'react-native-navigation';
+
+class ModalScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.onClickShowModal = this.onClickShowModal.bind(this);
+    this.onClickDismissModal = this.onClickDismissModal.bind(this);
+  }
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>Modal Screen</Text>
+        <Text style={styles.footer}>ModalStackPosition: {this.props.modalPosition || 1}</Text>
+        <Button title="Show Modal" onPress={this.onClickShowModal} />
+        <Button title="Dismiss Modal" onPress={this.onClickDismissModal} />
+        <Text style={styles.footer}>ContainerId: {this.props.id}</Text>
+      </View>
+    );
+  }
+  
+  onClickShowModal() {
+    Navigation.showModal({
+      name: 'navigation.playground.ModalScreen',
+      passProps: {
+        modalPosition: (this.props.modalPosition || 1) + 1
+      }
+    });
+  }
+  
+  onClickDismissModal() {
+    Navigation.dismissModal(this.props.id);
+  }
+}
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'center',
+    margin: 10
+  },
+  h2: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 10
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+};
+
+export default ModalScreen;

playground/src/containers/PushedScreen.js

@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text,
+  Button
+} from 'react-native';
+
+import Navigation from 'react-native-navigation';
+
+class PushedScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.onClickPush = this.onClickPush.bind(this);
+    this.onClickPop = this.onClickPop.bind(this);
+  }
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>Pushed Screen</Text>
+        <Text style={styles.h2}>Stack Position: {this.props.stackPosition || 1}</Text>
+        <Button title="Push" onPress={this.onClickPush} />
+        <Button title="Pop" onPress={this.onClickPop} />
+        <Text style={styles.footer}>ContainerId: {this.props.id}</Text>
+      </View>
+    );
+  }
+  
+  onClickPush() {
+    Navigation.on(this.props.id).push({
+      name: 'navigation.playground.PushedScreen',
+      passProps: {
+        stackPosition: (this.props.stackPosition || 1) + 1
+      }
+    });
+  }
+  
+  onClickPop() {
+    Navigation.on(this.props.id).pop();
+  }
+}
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'center',
+    margin: 10
+  },
+  h2: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 10
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+};
+
+export default PushedScreen;

playground/src/containers/SimpleScreen.js

@@ -1,83 +1,84 @@
-import React, { Component } from 'react';
-import { View, Text, Button } from 'react-native';
-
-import Navigation from 'react-native-navigation';
-
-class SimpleScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.onClickPop = this.onClickPop.bind(this);
-    this.onClickPush = this.onClickPush.bind(this);
-    this.onClickShowModal = this.onClickShowModal.bind(this);
-    this.onClickDismissModal = this.onClickDismissModal.bind(this);
-  }
-
-  render() {
-    return (
-      <View style={styles.root}>
-        <Text style={styles.h1}>{this.props.text || 'Simple Screen'}</Text>
-        <Text style={styles.h2}>{this.props.stackPosition}</Text>
-        {this.renderTextFromFunctionInProps()}
-        <Button title="Push" onPress={this.onClickPush} />
-        <Button title="Pop" onPress={this.onClickPop} />
-        <Button title="Show Mddal" onPress={this.onClickPop} />
-        <Button title="Dismiss Modal" onPress={this.onClickDismissModal} />
-      </View>
-    );
-  }
-
-  renderTextFromFunctionInProps() {
-    if (!this.props.myFunction) {
-      return undefined;
-    }
-    return (
-      <Text style={styles.h1}>{this.props.myFunction()}</Text>
-    );
-  }
-
-  onClickPop() {
-    Navigation.on(this.props.id).pop();
-  }
-
-  onClickPush() {
-    Navigation.on(this.props.id).push({
-      name: 'navigation.playground.SimpleScreen',
-      passProps: {
-        stackPosition: this.props.stackPosition + 1
-      }
-    });
-  }
-  
-  onClickShowModal() {
-    Navigation.showModal({
-      name: 'navigation.playground.SimpleScreen',
-      passProps: {
-        text: 'Modal screen'
-      }
-    });
-  }
-
-  onClickDismissModal() {
-    Navigation.dismissModal(this.props.id);
-  }
-}
-export default SimpleScreen;
-
-const styles = {
-  root: {
-    flexGrow: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#f5fcff'
-  },
-  h1: {
-    fontSize: 24,
-    textAlign: 'center',
-    margin: 10
-  },
-  h2: {
-    fontSize: 12,
-    textAlign: 'center',
-    margin: 10
-  }
-};
+//import React, { Component } from 'react';
+//import { View, Text, Button } from 'react-native';
+//
+//import Navigation from 'react-native-navigation';
+//
+//class SimpleScreen extends Component {
+//  constructor(props) {
+//    super(props);
+//    this.onClickPop = this.onClickPop.bind(this);
+//    this.onClickPush = this.onClickPush.bind(this);
+//    this.onClickShowModal = this.onClickShowModal.bind(this);
+//    this.onClickDismissModal = this.onClickDismissModal.bind(this);
+//  }
+//
+//  render() {
+//    return (
+//      <View style={styles.root}>
+//        <Text style={styles.h1}>{'Simple Screen'}</Text>
+//        <Text style={styles.h1}>Origin: {this.props.origin}</Text>
+//        <Text style={styles.h2}>Stack Position: {this.props.stackPosition}</Text>
+//        {this.renderTextFromFunctionInProps()}
+//        <Button title="Push" onPress={this.onClickPush} />
+//        <Button title="Pop" onPress={this.onClickPop} />
+//        <Button title="Show Modal" onPress={this.onClickPop} />
+//        <Button title="Dismiss Modal" onPress={this.onClickDismissModal} />
+//      </View>
+//    );
+//  }
+//
+//  renderTextFromFunctionInProps() {
+//    if (!this.props.myFunction) {
+//      return undefined;
+//    }
+//    return (
+//      <Text style={styles.h1}>{this.props.myFunction()}</Text>
+//    );
+//  }
+//
+//  onClickPop() {
+//    Navigation.on(this.props.id).pop();
+//  }
+//
+//  onClickPush() {
+//    Navigation.on(this.props.id).push({
+//      name: 'navigation.playground.SimpleScreen',
+//      passProps: {
+//        stackPosition: this.props.stackPosition + 1
+//      }
+//    });
+//  }
+//
+//  onClickShowModal() {
+//    Navigation.showModal({
+//      name: 'navigation.playground.SimpleScreen',
+//      passProps: {
+//        text: 'Modal screen'
+//      }
+//    });
+//  }
+//
+//  onClickDismissModal() {
+//    Navigation.dismissModal(this.props.id);
+//  }
+//}
+//export default SimpleScreen;
+//
+//const styles = {
+//  root: {
+//    flexGrow: 1,
+//    justifyContent: 'center',
+//    alignItems: 'center',
+//    backgroundColor: '#f5fcff'
+//  },
+//  h1: {
+//    fontSize: 24,
+//    textAlign: 'center',
+//    margin: 10
+//  },
+//  h2: {
+//    fontSize: 12,
+//    textAlign: 'center',
+//    margin: 10
+//  }
+//};

playground/src/containers/TextScreen.js

@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  View,
+  Text
+} from 'react-native';
+
+
+class TextScreen extends Component {
+  
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>{this.props.text || 'Text Screen'}</Text>
+        <Text style={styles.footer}>ContainerId: {this.props.id}</Text>
+      </View>
+    );
+  }
+}
+
+const styles = {
+  root: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f5fcff'
+  },
+  h1: {
+    fontSize: 24,
+    textAlign: 'center',
+    margin: 10
+  },
+  h2: {
+    fontSize: 12,
+    textAlign: 'center',
+    margin: 10
+  },
+  footer: {
+    fontSize: 10,
+    color: '#888',
+    marginTop: 10
+  }
+};
+
+
+export default TextScreen;

playground/src/containers/WelcomeScreen.js

@@ -30,7 +30,7 @@ class WelcomeScreen extends Component {
       tabs: [
         {
           container: {
-            name: 'navigation.playground.SimpleScreen',
+            name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 1',
               myFunction: () => 'Hello from a function!'
@@ -39,7 +39,7 @@ class WelcomeScreen extends Component {
         },
         {
           container: {
-            name: 'navigation.playground.SimpleScreen',
+            name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 2'
             }
@@ -54,7 +54,7 @@ class WelcomeScreen extends Component {
       tabs: [
         {
           container: {
-            name: 'navigation.playground.SimpleScreen',
+            name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is a side menu center screen'
             }
@@ -62,19 +62,19 @@ class WelcomeScreen extends Component {
         },
         {
           container: {
-            name: 'navigation.playground.SimpleScreen'
+            name: 'navigation.playground.TextScreen'
           }
         },
         {
           container: {
-            name: 'navigation.playground.SimpleScreen'
+            name: 'navigation.playground.TextScreen'
           }
         }
       ],
       sideMenu: {
         left: {
           container: {
-            name: 'navigation.playground.SimpleScreen',
+            name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is a side menu screen'
             }
@@ -82,7 +82,7 @@ class WelcomeScreen extends Component {
         },
         right: {
           container: {
-            name: 'navigation.playground.SimpleScreen'
+            name: 'navigation.playground.TextScreen'
           }
         }
       }
@@ -91,11 +91,7 @@ class WelcomeScreen extends Component {
 
   onClickPush() {
     Navigation.on(this.props.id).push({
-      name: 'navigation.playground.SimpleScreen',
-      passProps: {
-        text: 'Pushed screen',
-        stackPosition: 1
-      }
+      name: 'navigation.playground.PushedScreen'
     });
   }
 
@@ -109,10 +105,7 @@ class WelcomeScreen extends Component {
 
   onClickShowModal() {
     Navigation.showModal({
-      name: 'navigation.playground.SimpleScreen',
-      passProps: {
-        text: 'Modal screen'
-      }
+      name: 'navigation.playground.ModalScreen',
     });
   }
 
@@ -138,6 +131,6 @@ const styles = {
   footer: {
     fontSize: 10,
     color: '#888',
-    marginTop: 80
+    marginTop: 10
   }
 };

playground/src/containers/index.js

@@ -1,11 +1,16 @@
 import Navigation from 'react-native-navigation';
 
 import WelcomeScreen from './WelcomeScreen';
-import SimpleScreen from './SimpleScreen';
+import TextScreen from './TextScreen';
+import PushedScreen from './PushedScreen';
 import LifecycleScreen from './LifecycleScreen';
+import ModalScreen from './ModalScreen';
+
 
 export function registerContainers() {
   Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
-  Navigation.registerContainer(`navigation.playground.SimpleScreen`, () => SimpleScreen);
+  Navigation.registerContainer(`navigation.playground.ModalScreen`, () => ModalScreen);
   Navigation.registerContainer(`navigation.playground.LifecycleScreen`, () => LifecycleScreen);
+  Navigation.registerContainer(`navigation.playground.TextScreen`, () => TextScreen);
+  Navigation.registerContainer(`navigation.playground.PushedScreen`, () => PushedScreen);
 }