complex layout e2e

e2e/ComplexLayout.test.js

@@ -0,0 +1,22 @@
+const Utils = require('./Utils');
+const testIDs = require('../playground/src/testIDs');
+
+const { elementByLabel, elementById } = Utils;
+
+describe('complex layout', () => {
+  beforeEach(async () => {
+    await device.relaunchApp();
+  });
+
+  it(':ios: shows external component in stack in modal', async () => {
+    await elementById(testIDs.COMPLEX_LAYOUT_BUTTON).tap();
+    await elementById(testIDs.EXTERNAL_COMPONENT_IN_STACK).tap();
+    await expect(elementByLabel('External component in stack')).toBeVisible();
+  });
+
+  it(':ios: shows external component in deep stack in modal', async () => {
+    await elementById(testIDs.COMPLEX_LAYOUT_BUTTON).tap();
+    await elementById(testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK).tap();
+    await expect(elementByLabel('External component in deep stack')).toBeVisible();
+  });
+});

playground/src/screens/ComplexLayout.js

@@ -0,0 +1,85 @@
+const React = require('react');
+const { Component } = require('react');
+
+const { View, Text, Button } = require('react-native');
+
+const { Navigation } = require('react-native-navigation');
+const testIDs = require('../testIDs');
+
+
+class ComplexLayout extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Complex layout screen'}</Text>
+        <Button title={'External component in stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_STACK} onPress={() => this.onExternalComponentInStackPressed()} />
+        <Button title={'External component in deep stack'} testID={testIDs.EXTERNAL_COMPONENT_IN_DEEP_STACK} onPress={() => this.onExternalComponentInDeepStackPressed()} />
+      </View>
+    );
+  }
+
+  onExternalComponentInStackPressed() {
+    Navigation.showModal({
+      stack: {
+        children: [{
+          externalComponent: {
+            name: 'RNNCustomComponent',
+            passProps: {
+              text: 'External component in stack'
+            }
+          }
+        }]
+      }
+    });
+  }
+
+  onExternalComponentInDeepStackPressed() {
+    Navigation.showModal({
+      stack: {
+        children: [{
+          component: {
+            name: 'navigation.playground.TextScreen'
+          }
+        },
+        {
+          externalComponent: {
+            name: 'RNNCustomComponent',
+            passProps: {
+              text: 'External component in deep stack'
+            }
+          }
+        }]
+      }
+    });
+  }
+}
+
+module.exports = ComplexLayout;
+
+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
+  }
+};

playground/src/screens/WelcomeScreen.js

@@ -38,6 +38,7 @@ class WelcomeScreen extends Component {
         <Button title='Show Redbox' testID={testIDs.SHOW_REDBOX_BUTTON} onPress={this.onClickShowRedbox} />
         <Button title='Orientation' testID={testIDs.ORIENTATION_BUTTON} onPress={this.onClickPushOrientationMenuScreen} />
         <Button title='Provided Id' testID={testIDs.PROVIDED_ID} onPress={this.onClickProvidedId} />
+        <Button title='Complex Layout' testID={testIDs.COMPLEX_LAYOUT_BUTTON} onPress={this.onClickComplexLayout} />
         <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
       </View>
     );
@@ -413,6 +414,14 @@ class WelcomeScreen extends Component {
       }
     });
   }
+
+  onClickComplexLayout = () => {
+    Navigation.showModal({
+      component: {
+        name: 'navigation.playground.ComplexLayout'
+      }
+    });
+  }
 }
 
 module.exports = WelcomeScreen;

playground/src/screens/index.js

@@ -22,6 +22,7 @@ const BackHandlerModalScreen = require('./BackHandlerModalScreen');
 const CustomTextButton = require('./CustomTextButton');
 const CustomRoundedButton = require('./CustomRoundedButton');
 const TopBarBackground = require('./TopBarBackground');
+const ComplexLayout = require('./ComplexLayout');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -44,6 +45,7 @@ function registerScreens() {
   Navigation.registerComponent('navigation.playground.CustomTopBar', () => CustomTopBar);
   Navigation.registerComponent('navigation.playground.alert', () => Alert);
   Navigation.registerComponent('navigation.playground.BackHandlerModalScreen', () => BackHandlerModalScreen);
+  Navigation.registerComponent('navigation.playground.ComplexLayout', () => ComplexLayout);
   Navigation.registerComponent('CustomTextButton', () => CustomTextButton);
   Navigation.registerComponent('CustomRoundedButton', () => CustomRoundedButton);
   Navigation.registerComponent('TopBarBackground', () => TopBarBackground);

playground/src/testIDs.js

@@ -55,6 +55,9 @@ module.exports = {
   MODAL_WITH_STACK_BUTTON: `MODAL_WITH_STACK_BUTTON`,
   CUSTOM_TRANSITION_BUTTON: `CUSTOM_TRANSITION_BUTTON`,
   PUSH_EXTERNAL_COMPONENT_BUTTON: `PUSH_EXTERNAL_COMPONENT_BUTTON`,
+  COMPLEX_LAYOUT_BUTTON: `COMPLEX_LAYOUT_BUTTON`,
+  EXTERNAL_COMPONENT_IN_STACK: `EXTERNAL_COMPONENT_IN_STACK`,
+  EXTERNAL_COMPONENT_IN_DEEP_STACK: `EXTERNAL_COMPONENT_IN_DEEP_STACK`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,