| New Android + iOS API | +Unsupported iOS API | +
| + +```js +options: { + animations: { + showModal: { + alpha: { + from: 0, + to: 1, + duration: 250, + } + } + } +} +``` + + | ++ +```js +options: { + animations: { + showModal: { + content: { + alpha: { + from: 0, + to: 1, + duration: 250 + } + } + } + } +} +``` + + | +
+ Added `statusBar.translucent` boolean property +- BottomTabs are not pushed upwards when keyboard opens +- Removed SyncUiImplementation + [SyncUiImplementation](https://github.com/wix/react-native-navigation/blob/master/lib/android/app/src/reactNative57WixFork/java/com/reactnativenavigation/react/SyncUiImplementation.java) was used to overcome a bug in RN's UiImplementation. This workaround was added to RN's `UiImplementation` in RN 0.60 and can be removed from RNN. + + If you're using `SyncUiImplementation` your app will fail to compile after upgrading to v3. Simply remove the following code from your `MainApplication.java` + + ```diff + - import com.facebook.react.uimanager.UIImplementationProvider; + - import com.reactnativenavigation.react.SyncUiImplementation; + ``` + +* @override +* protected UIImplementationProvider getUIImplementationProvider() { +* return new SyncUiImplementation.Provider(); +* } + +```` +* BottomTab badge and dot indicator are not animated by default. +* The following option will show a badge with animation + ```js + bottomTab: { + badge: 'new, + animateBadge: true + } + ``` + +* The following option will show a dot indicator with animation + ```js + bottomTab: { + dotIndicator: { + visible: true, + animate: true + } + } + ``` +* Stack, BottomTabs and SideMenu are drawn behind StatusBar.
+While parent controllers are drawn behind the StatusBar, their background isn't. +This means that when transitioning from a destinations drawn under the StatusBar to a destination drawn behind it, the application's default background color will be visible behind the StatusBar. +If you application's theme is dark, you might want to change the `windowBackground` property to mitigate this: +Add the following to your application's `style.xml` +```xml + +
- 
+ 
React Native Navigation
-[](https://www.npmjs.com/package/react-native-navigation)
-[](https://www.npmjs.com/package/react-native-navigation)
-[](https://travis-ci.org/wix/react-native-navigation)
-[](https://discord.gg/DhkZjq2)
+
+ 
+ 
+ 
+ 
-## Important
-Latest stable version is `1.1.x` and is published to npm under tag `latest`. It supports react-native >= 0.43.
-
We are currently redesigning and rewriting this project under branch `v2`.
-
As a result, new features and pull requests on the current stable version will take more time to process.
+
+ 
+ 
+ 
+
-
+# Requirements
-On the left - The Wix app.
+Apps using React Native Navigation may target iOS 11 and Android 5.0 (API 21). You may use Windows, macOS or Linux as your development operating system.
-On the right - The example app.
+# Installation
-
-## Quick Links
-* [Documentation](https://wix.github.io/react-native-navigation/#/)
-* [Stack Overflow](http://stackoverflow.com/questions/tagged/react-native-navigation)
-* [Chat with us](https://discord.gg/DhkZjq2)
-* Bootstrap - If you prefer to learn more about the library and the APIs through code, head over to [the bootstrap example app](https://github.com/wix/react-native-navigation-bootstrap) or the more feature rich [JuneDomingo/movieapp](https://github.com/JuneDomingo/movieapp)
-* [v2 - Under Development](https://github.com/wix/react-native-navigation/tree/v2#react-native-navigation-v2-wip)
-
-----
-
-One of the major things missing from React Native core is fully featured native navigation. Navigation includes the entire skeleton of your app with critical components like nav bars, tab bars and side menu drawers.
-
-If you're trying to deliver a user experience that's on par with the best native apps out there, you simply can't compromise on JS-based components trying to fake the real thing.
-
-For example, this package replaces the native [NavigatorIOS](https://facebook.github.io/react-native/docs/navigatorios.html) that has been [abandoned](https://facebook.github.io/react-native/docs/navigator-comparison.html) in favor of JS-based solutions that are easier to maintain. For more details see in-depth discussion [here](https://github.com/wix/react-native-controllers#why-do-we-need-this-package).
-
-
-## License
-
-The MIT License.
-
-See [LICENSE](LICENSE)
+As `react-native-navigation` is a native navigation library - integrating it into your app will require editing native files. Follow the installation guides in the [documentation](https://wix.github.io/react-native-navigation/).
diff --git a/ReactNativeNavigation.podspec b/ReactNativeNavigation.podspec
new file mode 100644
index 00000000000..1777dc62b01
--- /dev/null
+++ b/ReactNativeNavigation.podspec
@@ -0,0 +1,96 @@
+require 'json'
+require 'find'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
+
+# Detect if this is a Swift project by looking for user AppDelegate.swift files
+start_dir = File.expand_path('../../', __dir__)
+swift_delegate_path = nil
+Find.find(start_dir) do |path|
+ if path =~ /AppDelegate\.swift$/
+ swift_delegate_path = path
+ break
+ end
+end
+
+swift_project = swift_delegate_path && File.exist?(swift_delegate_path)
+
+# Debug output
+if swift_project
+ puts "ReactNativeNavigation: Swift AppDelegate detected - enabling Swift-compatible configuration"
+else
+ puts "ReactNativeNavigation: Objective-C AppDelegate detected - using standard configuration"
+end
+
+Pod::Spec.new do |s|
+ s.name = "ReactNativeNavigation"
+ s.version = package['version']
+ s.summary = package['description']
+
+ s.authors = "Wix.com"
+ s.homepage = package['homepage']
+ s.license = package['license']
+ s.platform = :ios, "11.0"
+
+ s.module_name = 'ReactNativeNavigation'
+ s.default_subspec = 'Core'
+
+ s.subspec 'Core' do |ss|
+ s.source = { :git => "https://github.com/wix/react-native-navigation.git", :tag => "#{s.version}" }
+ s.source_files = 'lib/ios/**/*.{h,m,mm,cpp}'
+ s.exclude_files = "lib/ios/ReactNativeNavigationTests/**/*.*", "lib/ios/OCMock/**/*.*"
+ # Only expose headers for Swift projects
+ if swift_project
+ s.public_header_files = [
+ 'lib/ios/RNNAppDelegate.h'
+ ]
+ end
+ end
+
+ folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32 -DFOLLY_CFG_NO_COROUTINES=1'
+
+ # Base xcconfig settings
+ xcconfig_settings = {
+ 'HEADER_SEARCH_PATHS' => '"$(PODS_ROOT)/boost" "$(PODS_ROOT)/boost-for-react-native" "$(PODS_ROOT)/RCT-Folly" "$(PODS_ROOT)/Headers/Private/React-Core" "$(PODS_ROOT)/Headers/Private/Yoga"',
+ "CLANG_CXX_LANGUAGE_STANDARD" => "c++20",
+ "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+ }
+
+ # Only add DEFINES_MODULE for Swift projects
+ if swift_project
+ xcconfig_settings["DEFINES_MODULE"] = "YES"
+ end
+
+ s.pod_target_xcconfig = xcconfig_settings
+
+ if fabric_enabled
+ install_modules_dependencies(s)
+
+ s.compiler_flags = folly_compiler_flags + ' ' + '-DRCT_NEW_ARCH_ENABLED' + ' ' + '-DUSE_HERMES=1'
+ s.requires_arc = true
+
+ s.dependency "React"
+ s.dependency "React-RCTFabric"
+ s.dependency "React-cxxreact"
+ s.dependency "React-Fabric"
+ s.dependency "React-Codegen"
+ s.dependency "RCT-Folly"
+ s.dependency "RCTRequired"
+ s.dependency "RCTTypeSafety"
+ s.dependency "ReactCommon"
+ s.dependency "React-runtimeexecutor"
+ s.dependency "React-rncore"
+ s.dependency "React-RuntimeCore"
+ else
+ s.compiler_flags = folly_compiler_flags
+ end
+
+ s.dependency 'React-Core'
+ s.dependency 'React-CoreModules'
+ s.dependency 'React-RCTImage'
+ s.dependency 'React-RCTText'
+ s.dependency 'HMSegmentedControl'
+ s.frameworks = 'UIKit'
+end
diff --git a/android/app/build.gradle b/android/app/build.gradle
deleted file mode 100644
index 51f8df937cb..00000000000
--- a/android/app/build.gradle
+++ /dev/null
@@ -1,64 +0,0 @@
-apply plugin: 'com.android.library'
-apply from: '../prepare-robolectric.gradle'
-
-android {
- compileSdkVersion 25
- buildToolsVersion "25.0.1"
-
- defaultConfig {
- minSdkVersion 16
- targetSdkVersion 23
- versionCode 1
- versionName "1.0"
- }
- buildTypes {
- release {
- minifyEnabled false
- }
- debug {
- minifyEnabled false
- }
- }
- lintOptions {
- abortOnError false
- }
-
- testOptions {
- unitTests.all { t ->
- reports {
- html.enabled true
- }
- testLogging {
- events "passed", "skipped", "failed", "standardOut", "standardError"
- }
- afterSuite { desc, result ->
- if (!desc.parent) { // will match the outermost suite
- def output = " ${result.resultType} (${result.successfulTestCount} successes, ${result.failedTestCount} failures, ${result.skippedTestCount} skipped) "
- def repeatLength = output.length()
- println '\n' + ('-' * repeatLength) + '\n' + output + '\n' + ('-' * repeatLength) + '\n'
-
- println "see report at file://${t.reports.html.destination}/index.html"
- }
- }
- }
- }
-}
-
-dependencies {
- compile fileTree(dir: "libs", include: ["*.jar"])
-
- compile 'com.android.support:design:25.3.1'
- compile "com.android.support:appcompat-v7:25.3.1"
-
- // node_modules
- compile "com.facebook.react:react-native:+"
-
- // third party
- compile "com.aurelhubert:ahbottomnavigation:2.0.6"
- compile 'com.balysv.materialmenu:material-menu-toolbar:1.5.4'
-
- // tests
- testCompile "junit:junit:4.12"
- testCompile "org.robolectric:robolectric:3.1.4"
- testCompile 'org.assertj:assertj-core:2.5.0'
-}
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
deleted file mode 100644
index 7cb0951b45b..00000000000
--- a/android/app/src/main/AndroidManifest.xml
+++ /dev/null
@@ -1,13 +0,0 @@
-
- 
- React Native Navigation
-
-
-App-wide support for 100% native navigation with an easy cross-platform interface.
-
-----
-
-## Important
-Latest stable version is `1.1.x` and is published to npm under tag `latest`. It supports react-native 0.43 and above.
-We are currently redesigning and rewriting this project under branch `v2`. -
As a result, new features and pull requests on the current stable version will take more time to process. - -## Why use this package - -One of the major things missing from React Native core is fully featured native navigation. Navigation includes the entire skeleton of your app with critical components like nav bars, tab bars and side menu drawers. - -If you're trying to deliver a user experience that's on par with the best native apps out there, you simply can't compromise on JS-based components trying to fake the real thing. - -For example, this package replaces the native [NavigatorIOS](https://facebook.github.io/react-native/docs/navigatorios.html) that has been [abandoned](https://facebook.github.io/react-native/docs/navigator-comparison.html) in favor of JS-based solutions that are easier to maintain. For more details see in-depth discussion [here](https://github.com/wix/react-native-controllers#why-do-we-need-this-package). - diff --git a/docs/_navbar.md b/docs/_navbar.md deleted file mode 100644 index 1624e1d2491..00000000000 --- a/docs/_navbar.md +++ /dev/null @@ -1 +0,0 @@ -- [Github](https://github.com/wix/react-native-navigation/) \ No newline at end of file diff --git a/docs/_sidebar.md b/docs/_sidebar.md deleted file mode 100644 index 61e71766466..00000000000 --- a/docs/_sidebar.md +++ /dev/null @@ -1,17 +0,0 @@ -- Getting started - - [Installation - iOS](/installation-ios) - - [Installation - Android](/installation-android) - - [Usage](/usage) - -- Guide - - [Top Level API](/top-level-api) - - [Screen API](/screen-api) - - [Deep links](/deep-links) - - [Android Specific Use Cases](/android-specific-use-cases) - - [Third Party Libraries Support](/third-party-libraries-support) - -- Customization - - [Styling the Navigator](/styling-the-navigator) - - [Adding Buttons to the Navigator](/adding-buttons-to-the-navigator) - - [Styling the Tab Bar](/styling-the-tab-bar) - \ No newline at end of file diff --git a/docs/adding-buttons-to-the-navigator.md b/docs/adding-buttons-to-the-navigator.md deleted file mode 100644 index 11eb16569e7..00000000000 --- a/docs/adding-buttons-to-the-navigator.md +++ /dev/null @@ -1,246 +0,0 @@ -# Adding buttons to the navigator - -Nav bar buttons can be defined per-screen by adding `static navigatorButtons = {...};` on the screen component definition. This object can also be passed when the screen is originally created; and can be overridden when a screen is pushed. Handle onPress events for the buttons by setting your handler with `navigator.setOnNavigatorEvent(callback)`. - -```js -class FirstTabScreen extends Component { - static navigatorButtons = { - rightButtons: [ - { - title: 'Edit', // for a textual button, provide the button title (label) - id: 'edit', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked - testID: 'e2e_rules', // optional, used to locate this view in end-to-end tests - disabled: true, // optional, used to disable the button (appears faded and doesn't interact) - disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors - showAsAction: 'ifRoom', // optional, Android only. Control how the button is displayed in the Toolbar. Accepted valued: 'ifRoom' (default) - Show this item as a button in an Action Bar if the system decides there is room for it. 'always' - Always show this item as a button in an Action Bar. 'withText' - When this item is in the action bar, always show it with a text label even if it also has an icon specified. 'never' - Never show this item as a button in an Action Bar. - buttonColor: 'blue', // Optional, iOS only. Set color for the button (can also be used in setButtons function to set different button style programatically) - buttonFontSize: 14, // Set font size for the button (can also be used in setButtons function to set different button style programatically) - buttonFontWeight: '600', // Set font weight for the button (can also be used in setButtons function to set different button style programatically) - }, - { - icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name - id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked - } - ] - }; - - 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) { // this is the onPress handler for the two buttons together - if (event.type == 'NavBarButtonPress') { // this is the event type for button presses - if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition - AlertIOS.alert('NavBar', 'Edit button pressed'); - } - if (event.id == 'add') { - AlertIOS.alert('NavBar', 'Add button pressed'); - } - } - } - - render() { - return ( -
In the second screen, we also wrap the corresponding `
Finally, specify the elements you'd like to transition when pushing the second screen: - -```js -this.props.navigator.push({ - screen: 'SharedElementScreen', - sharedElements: ['SharedTextId'] - } -}); -``` -### Animating image bounds and scale -By default, when animating images, a basic scale transition is used. This is good enough for basic use cases where both images have the same aspect ratio. If the images have different size and scale, you can animate their bounds and scale by setting `animateClipBounds={true}` on the final `
In the `
As in the previous example, specify the elements you'd like to transition when pushing the second screen: - -```js -this.props.navigator.push({ - screen: 'SharedElementScreen', - sharedElements: ['sharedImageId'] - } -}); -``` - -### Easing -specify the rate of change of a parameter over time - -* `accelerateDecelerate` - the rate of change starts and ends slowly but accelerates through the middle. -* `accelerate` - the rate of change starts out slowly and and then accelerates. -* `decelerate` - the rate of change starts out quickly and and then decelerates. -* `fastOutSlowIn` - the rate of change starts fast but decelerates slowly. -* `linear` - the rate of change is constant (default) - -### Screen animation -When Shared Element Transition is used, a cross-fade transition is used between the entering and exiting screens. Make sure the root `View` has a background color in order for the cross-fade animation to be visible. - -To disable the cross-fade animation, set `animated: false` when pushing the second screen. Disabling this animation is useful if you'd like to animate the reset of the elements on screen your self. - -## Compatibility with HeadlessJs -In most cases, `Navigation.startSingleScreenApp()` or `Navigation.startTabBasedApp` are called from global context. If the bundle is parsed when the app is not running, this will result in the app opening even though the developer had no intent to open the app. - -`Navigation.startSingleScreenApp()` or `Navigation.startTabBasedApp` are called from global context since RNN assums react context isn't created when the app is launched. When a background task completes, react context is put into a **paused state** and not destroyed. Therefore we should also handle the use case where our app is opened when react context is created , and the bundle has already been parsed. We do that by listening to `RNN.AppLaunched` event. - -```js -import {Navigation, NativeEventsReceiver} from 'react-native-navigation'; - -Navigation.isAppLaunched() - .then(appLaunched => { - if (appLaunched) { - startApp(); // App is launched -> show UI - } - new NativeEventsReceiver().appLaunched(startApp); // App hasn't been launched yet -> show the UI only when needed. - }); - -function startApp() { - Navigation.startTabBasedApp({ ... }); -} -``` - -## Reloading from terminal -You can easily reload your app from terminal using `adb shell am broadcast -a react.native.RELOAD`. This is particularly useful when debugging on device. diff --git a/docs/deep-links.md b/docs/deep-links.md deleted file mode 100644 index 8b991e2c1c9..00000000000 --- a/docs/deep-links.md +++ /dev/null @@ -1,44 +0,0 @@ -# Deep Links - -Deep links are strings which represent internal app paths/routes. They commonly appear on push notification payloads to control which section of the app should be displayed when the notification is clicked. For example, in a chat app, clicking on the notification should open the relevant conversation on the "chats" tab. - -Another use-case for deep links is when one screen wants to control what happens in another sibling screen. Normally, a screen can only push/pop from its own stack, it cannot access the navigation stack of a sibling tab for example. Returning to our chat app example, assume that by clicking on a contact in the "contacts" tab we want to open the relevant conversation in the "chats" tab. Since the tabs are siblings, you can achieve this behavior by triggering a deep link: - -```js -onContactSelected(contactID) { - this.props.navigator.handleDeepLink({ - link: 'chats/' + contactID, - payload: '' // (optional) Extra payload with deep link - }); -} -``` - -> Tip: Deep links are also the recommended way to handle side drawer actions. Since the side drawer screen is a sibling to the rest of the app, it can control the other screens by triggering deep links. - -#### Handling deep links - -Every deep link event is broadcasted to all screens. A screen can listen to these events by defining a handler using `setOnNavigatorEvent` (much like listening for button events). Using this handler, the screen can filter links directed to it by parsing the link string and act upon any relevant links found. - -```js -export default class SecondTabScreen extends Component { - 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) { - // handle a deep link - if (event.type == 'DeepLink') { - const parts = event.link.split('/'); // Link parts - const payload = event.payload; // (optional) The payload - - if (parts[0] == 'tab2') { - // handle the link somehow, usually run a this.props.navigator command - } - } - } -``` - -#### Deep link string format - -There is no specification for the format of deep links. Since you're implementing the parsing logic in your handlers, you can use any format you wish. diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index a39fbf92529..00000000000 --- a/docs/index.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - -
- 
-
-
-
-
-
-
-
-
-
diff --git a/docs/installation-android.md b/docs/installation-android.md
deleted file mode 100644
index 69a996a7599..00000000000
--- a/docs/installation-android.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# Android Installation
-
-!> Make sure you are using **react-native** version >= 0.51. We also recommend using npm version >= 3
-
-1. Install `react-native-navigation` latest stable version.
-
- ```sh
- yarn add react-native-navigation@latest
- ```
-
-2. Add the following in `android/settings.gradle`.
-
- ```groovy
- include ':react-native-navigation'
- project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')
- ```
-
-3. Update project dependencies in `android/app/build.gradle`.
- ```groovy
- android {
- compileSdkVersion 25
- buildToolsVersion "25.0.1"
- ...
- }
-
- dependencies {
- compile fileTree(dir: "libs", include: ["*.jar"])
- compile "com.android.support:appcompat-v7:23.0.1"
- compile "com.facebook.react:react-native:+"
- compile project(':react-native-navigation')
- }
- ```
-
-4. In `MainActivity.java` it should extend `com.reactnativenavigation.controllers.SplashActivity` instead of `ReactActivity`.
-
- This file can be located in `android/app/src/main/java/com/yourproject/`.
-
- ```java
- import com.reactnativenavigation.controllers.SplashActivity;
-
- public class MainActivity extends SplashActivity {
-
- }
- ```
-
- If you have any **react-native** related methods, you can safely delete them.
-
-5. In `MainApplication.java`, add the following
- ```java
- import com.reactnativenavigation.NavigationApplication;
-
- public class MainApplication extends NavigationApplication {
-
- @Override
- public boolean isDebug() {
- // Make sure you are using BuildConfig from your own application
- return BuildConfig.DEBUG;
- }
-
- protected List
-
-
-
-
-
-
-
-
-
-
diff --git a/e2e/AndroidUtils.js b/e2e/AndroidUtils.js
new file mode 100644
index 00000000000..942233b82d4
--- /dev/null
+++ b/e2e/AndroidUtils.js
@@ -0,0 +1,43 @@
+const exec = require('shell-utils').exec;
+
+const utils = {
+ pressBack: () => device.pressBack(),
+ pressMenu: () => device.getUiDevice().pressMenu(),
+ pressKeyCode: (keyCode) => device.getUiDevice().pressKeyCode(keyCode),
+ grantPermission: () =>
+ utils.executeShellCommand(
+ 'pm grant com.reactnativenavigation.playground android.permission.READ_PHONE_STATE'
+ ),
+ revokePermission: () =>
+ utils.executeShellCommand(
+ 'pm revoke com.reactnativenavigation.playground android.permission.READ_PHONE_STATE'
+ ),
+ executeShellCommand: (command) => {
+ // TODO Change to use Detox's ADB (see keyboard driver)
+ exec.execSync(`adb -s ${device.id} shell ${command}`);
+ },
+ setDemoMode: () => {
+ // enter demo mode
+ utils.executeShellCommand('settings put global sysui_demo_allowed 1');
+ // display time 12:00
+ utils.executeShellCommand(
+ 'am broadcast -a com.android.systemui.demo -e command clock -e hhmm 1200'
+ );
+ // Display full mobile data with 4g type and no wifi
+ utils.executeShellCommand(
+ 'am broadcast -a com.android.systemui.demo -e command network -e mobile show -e level 4 -e datatype 4g -e wifi false'
+ );
+ // Hide notifications
+ utils.executeShellCommand(
+ 'am broadcast -a com.android.systemui.demo -e command notifications -e visible false'
+ );
+ // Disable pointer location
+ utils.executeShellCommand('settings put system pointer_location 0');
+ // Show full battery but not in charging state
+ utils.executeShellCommand(
+ 'am broadcast -a com.android.systemui.demo -e command battery -e plugged false -e level 100'
+ );
+ },
+};
+
+export default utils;
diff --git a/e2e/ApplicationLifecycleTest.test.js b/e2e/ApplicationLifecycleTest.test.js
new file mode 100644
index 00000000000..d956a277ce8
--- /dev/null
+++ b/e2e/ApplicationLifecycleTest.test.js
@@ -0,0 +1,123 @@
+import Utils from './Utils';
+import Android from './AndroidUtils';
+import TestIDs from '../playground/src/testIDs';
+import includes from 'lodash/includes';
+
+const { elementByLabel, elementById, sleep } = Utils;
+const IS_RELEASE = includes(process.argv, '--release');
+const KEY_CODE_R = 46;
+
+describe.e2e('application lifecycle test', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ });
+
+ it('push a screen to ensure its not there after reload', async () => {
+ await elementById(TestIDs.STACK_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ await device.reloadReactNative();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it('relaunch from background', async () => {
+ await elementById(TestIDs.STACK_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+
+ await device.sendToHome();
+ await device.launchApp({ newInstance: false });
+
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ });
+
+ it(':android: relaunch after close with back button', async () => {
+ await elementById(TestIDs.STACK_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+
+ await Android.pressBack();
+
+ await device.launchApp({ newInstance: false });
+ await expect(elementByLabel('Pushed Screen')).toBeNotVisible();
+ });
+
+ it('device orientation does not destroy activity', async () => {
+ await elementById(TestIDs.STACK_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+
+ await device.setOrientation('landscape');
+
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ });
+
+ it(':android: relaunch after activity killed by system', async () => {
+ await elementById(TestIDs.STACK_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ await device.sendToHome();
+
+ await togglePhonePermission();
+ await sleep(5000);
+ await device.launchApp({ newInstance: false });
+
+ await expect(elementByLabel('Pushed Screen')).toBeNotVisible();
+ await expect(elementById(TestIDs.WELCOME_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it(':android: pressing r twice with delay does nothing', async () => {
+ if (!IS_RELEASE) {
+ await elementById(TestIDs.STACK_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+
+ await Android.pressKeyCode(KEY_CODE_R);
+ await sleep(1000);
+ await Android.pressKeyCode(KEY_CODE_R);
+
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ }
+ });
+
+ xit(':android: pressing menu opens dev menu', async () => {
+ if (!IS_RELEASE) {
+ await Android.pressMenu();
+ await sleep(1000);
+ await expect(elementByLabel('Reload')).toBeVisible();
+ }
+ });
+
+ xit(':android: pressing r twice in succession reloads React Native', async () => {
+ if (!IS_RELEASE) {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+
+ await Android.pressKeyCode(KEY_CODE_R);
+ await Android.pressKeyCode(KEY_CODE_R);
+
+ await sleep(300);
+ await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+ }
+ });
+
+ xit(':android: sending reload broadcast reloads react native', async () => {
+ if (!IS_RELEASE) {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+
+ Android.executeShellCommand('am broadcast -a com.reactnativenavigation.broadcast.RELOAD');
+
+ await sleep(1000);
+ await expect(elementByLabel('React Native Navigation!')).toBeVisible();
+ }
+ });
+
+ async function togglePhonePermission() {
+ await sleep(700);
+ Android.revokePermission();
+ await sleep(700);
+ Android.grantPermission();
+ await sleep(1000);
+ }
+});
diff --git a/e2e/BackButton.test.js b/e2e/BackButton.test.js
new file mode 100644
index 00000000000..935cbcd5623
--- /dev/null
+++ b/e2e/BackButton.test.js
@@ -0,0 +1,66 @@
+import { default as TestIDs, default as testIDs } from '../playground/src/testIDs';
+import Android from './AndroidUtils';
+import Utils from './Utils';
+
+const { elementByLabel, elementById } = Utils;
+
+describe('Back Button', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await elementById(TestIDs.BACK_BUTTON_SCREEN_BTN).tap();
+ await elementById(TestIDs.STATIC_EVENTS_OVERLAY_BTN).tap();
+ });
+
+ it('prevents pop and dispatch event', async () => {
+ await elementById(TestIDs.PUSH_DISABLED_BACK_BTN).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.BACK_BUTTON).tap();
+ await expect(elementByLabel('navigationButtonPressed | RNN.back')).toBeVisible();
+ await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it('pops and does not dispatch event', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.BACK_BUTTON).tap();
+ await expect(elementByLabel('navigationButtonPressed | RNN.back')).toBeNotVisible();
+ });
+
+ it('toggle visibility', async () => {
+ await elementById(TestIDs.TOGGLE_BACK_BUTTON_VISIBILITY).tap();
+ await expect(elementById(TestIDs.BACK_BUTTON)).toBeNotVisible();
+ await elementById(TestIDs.TOGGLE_BACK_BUTTON_VISIBILITY).tap();
+ await elementById(TestIDs.DISMISS_BTN).tap();
+ await elementByLabel('OK').tap();
+ await elementById(TestIDs.BACK_BUTTON).tap();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it.e2e(':android: hardware back button prevents pop and dispatch event', async () => {
+ await elementById(TestIDs.PUSH_DISABLED_HARDWARE_BACK_BTN).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await Android.pressBack();
+ await expect(elementByLabel('navigationButtonPressed | RNN.hardwareBackButton')).toBeVisible();
+ await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it.e2e(':android: hardware button pops and does not dispatch event', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await Android.pressBack();
+ await expect(
+ elementByLabel('navigationButtonPressed | RNN.hardwareBackButton')
+ ).toBeNotVisible();
+ await expect(elementById(testIDs.PUSHED_SCREEN_HEADER)).toBeNotVisible();
+ });
+
+ it.e2e(':android: hardware back should not dismiss modal and dispatch event', async () => {
+ await elementById(TestIDs.MODAL_DISABLED_BACK_BTN).tap();
+ await expect(elementByLabel('Modal')).toBeVisible();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await Android.pressBack();
+ await expect(elementByLabel('Modal')).toBeVisible();
+ await expect(elementByLabel('navigationButtonPressed | RNN.hardwareBackButton')).toBeVisible();
+ });
+});
diff --git a/e2e/BottomTabs.test.js b/e2e/BottomTabs.test.js
new file mode 100644
index 00000000000..d9b33410ec7
--- /dev/null
+++ b/e2e/BottomTabs.test.js
@@ -0,0 +1,181 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+import Android from './AndroidUtils';
+
+const { elementByLabel, elementById, expectImagesToBeEqual } = Utils;
+
+describe('BottomTabs', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.BOTTOM_TABS_BTN).tap();
+ await expect(elementByLabel('First Tab')).toBeVisible();
+ });
+
+ it.e2e('should mount first tab first', async () => {
+ await expect(elementById(TestIDs.MOUNTED_SCREENS_TEXT)).toHaveText(
+ 'Mounted screens: FirstBottomTabScreen, SecondBottomTabScreen'
+ );
+ });
+
+ it('switch to tab by index', async () => {
+ await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
+ await expect(elementByLabel('First Tab')).toBeNotVisible();
+ await expect(elementByLabel('Second Tab')).toBeVisible();
+ });
+
+ it('switch to tab by componentId', async () => {
+ await elementById(TestIDs.SWITCH_TAB_BY_COMPONENT_ID_BTN).tap();
+ await expect(elementByLabel('First Tab')).toBeNotVisible();
+ await expect(elementByLabel('Second Tab')).toBeVisible();
+ });
+
+ it('push bottom tabs', async () => {
+ await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementById(TestIDs.PUSHED_BOTTOM_TABS)).toBeVisible();
+ });
+
+ it('set Tab Bar badge on current Tab', async () => {
+ await elementById(TestIDs.SET_BADGE_BTN).tap();
+ await expect(element(by.text('NEW'))).toBeVisible();
+ });
+
+ it('Badge not cleared after showing/dismissing modal', async () => {
+ await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap();
+ await elementById(TestIDs.SET_BADGE_BTN).tap();
+ await expect(element(by.text('Badge'))).toBeVisible();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(element(by.text('Badge'))).toBeVisible();
+ });
+
+ it('set empty string badge on a current Tab should clear badge', async () => {
+ await elementById(TestIDs.SET_BADGE_BTN).tap();
+ await expect(element(by.text('NEW'))).toBeVisible();
+ await elementById(TestIDs.CLEAR_BADGE_BTN).tap();
+ await expect(element(by.text('NEW'))).toBeNotVisible();
+ });
+
+ it.e2e('merge options correctly in SideMenu inside BottomTabs layout', async () => {
+ await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
+ await elementById(TestIDs.SIDE_MENU_INSIDE_BOTTOM_TABS_BTN).tap();
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+
+ await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
+ await expect(elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN)).toBeNotVisible();
+ });
+
+ it(':android: hide Tab Bar', async () => {
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+ await elementById(TestIDs.HIDE_TABS_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+ });
+
+ it(':android: show Tab Bar', async () => {
+ await elementById(TestIDs.HIDE_TABS_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+ await elementById(TestIDs.SHOW_TABS_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+ });
+
+ it.e2e(':android: should set special stylizing options in root bottom-tabs', async () => {
+ await elementById(TestIDs.SCREEN_ROOT_LIST).scrollTo('bottom');
+ await elementById(TestIDs.SET_ROOT_BTN).tap();
+ const snapshotImagePath = `./e2e/assets/bottom_tabs.stylized-root.png`;
+ const actual =
+ await elementById('RNN.BottomTabsLayoutRoot').takeScreenshot(`bottom_tabs_stylized-root`);
+ expectImagesToBeEqual(actual, snapshotImagePath);
+ });
+
+ it.e2e(':android: should merge special stylizing options', async () => {
+ await elementById(TestIDs.SCREEN_ROOT_LIST).scrollTo('bottom');
+ await elementById(TestIDs.STYLIZE_TABS_BTN).tap();
+ const snapshotImagePath = `./e2e/assets/bottom_tabs.stylized.png`;
+ const actual =
+ await elementById('RNN.BottomTabsLayoutRoot').takeScreenshot(`bottom_tabs_stylized`);
+ expectImagesToBeEqual(actual, snapshotImagePath);
+ });
+
+ it('hide Tab Bar on push', async () => {
+ await elementById(TestIDs.HIDE_TABS_PUSH_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+ });
+
+ it('hide Tab Bar on push from second bottomTabs screen', async () => {
+ await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
+ await elementById(TestIDs.HIDE_TABS_PUSH_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+ });
+
+ it('hide Tab Bar on push from second bottomTabs screen - deep stack', async () => {
+ await elementById(TestIDs.SWITCH_TAB_BY_INDEX_BTN).tap();
+ await elementById(TestIDs.HIDE_TABS_PUSH_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+ });
+
+ it('hide Tab Bar on second tab after pressing the tab', async () => {
+ await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap();
+ await elementById(TestIDs.HIDE_TABS_PUSH_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
+ });
+
+ it('invoke bottomTabPressed event', async () => {
+ await elementById(TestIDs.THIRD_TAB_BAR_BTN).tap();
+ await expect(elementByLabel('BottomTabPressed')).toBeVisible();
+ await elementByLabel('OK').tap();
+ await expect(elementByLabel('First Tab')).toBeVisible();
+ });
+
+ it.e2e(':android: hardware back tab selection history', async () => {
+ await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap();
+ await elementById(TestIDs.FIRST_TAB_BAR_BUTTON).tap();
+ await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap();
+ await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap();
+ await elementById(TestIDs.FIRST_TAB_BAR_BUTTON).tap();
+
+ await Android.pressBack();
+ await expect(elementByLabel('Second Tab')).toBeVisible();
+
+ await Android.pressBack();
+ await expect(elementByLabel('First Tab')).toBeVisible();
+
+ await Android.pressBack();
+ await expect(elementByLabel('Second Tab')).toBeVisible();
+
+ await Android.pressBack();
+ await expect(elementByLabel('First Tab')).toBeVisible();
+
+ await Android.pressBack();
+ await expect(elementByLabel('First Tab')).toBeNotVisible();
+ await expect(elementByLabel('Second Tab')).toBeNotVisible();
+ });
+
+ it.e2e('Switch tab should send lifecycle events', async () => {
+ await elementById(TestIDs.SECOND_TAB_BAR_BTN).tap();
+ await elementById(TestIDs.STATIC_EVENTS_OVERLAY_BTN).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.FIRST_TAB_BAR_BUTTON).tap();
+ await expect(
+ elementByLabel('componentWillAppear | FirstBottomTabsScreen | Component')
+ ).toBeVisible();
+ await expect(
+ elementByLabel('componentDidDisappear | SecondBottomTabsScreen | Component')
+ ).toBeVisible();
+ await expect(
+ elementByLabel('componentDidAppear | FirstBottomTabsScreen | Component')
+ ).toBeVisible();
+ });
+});
diff --git a/e2e/Buttons.test.js b/e2e/Buttons.test.js
new file mode 100644
index 00000000000..f3c4024b8d1
--- /dev/null
+++ b/e2e/Buttons.test.js
@@ -0,0 +1,109 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const {
+ elementById,
+ elementByLabel,
+ elementTopBar,
+ expectImagesToBeEqual,
+} = Utils;
+
+describe('Buttons', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.OPTIONS_TAB).tap();
+ await elementById(TestIDs.GOTO_BUTTONS_SCREEN).tap();
+ });
+
+ it.e2e('should render top/navigation-bar buttons in the right order', async () => {
+ const snapshottedImagePath = `./e2e/assets/buttons_navbar.${device.getPlatform()}.png`;
+ const actual = await elementTopBar().takeScreenshot('buttons_navbar');
+ expectImagesToBeEqual(actual, snapshottedImagePath)
+ });
+
+ it(':android: should not effect left buttons when hiding back button', async () => {
+ await elementById(TestIDs.TOGGLE_BACK).tap();
+ await expect(elementById(TestIDs.LEFT_BUTTON)).toBeVisible();
+ await expect(elementById(TestIDs.TEXTUAL_LEFT_BUTTON)).toBeVisible();
+ await expect(elementById(TestIDs.BACK_BUTTON)).toBeVisible();
+
+ await elementById(TestIDs.TOGGLE_BACK).tap();
+ await expect(elementById(TestIDs.LEFT_BUTTON)).toBeVisible();
+ await expect(elementById(TestIDs.TEXTUAL_LEFT_BUTTON)).toBeVisible();
+ });
+ it('sets right buttons', async () => {
+ await expect(elementById(TestIDs.BUTTON_ONE)).toBeVisible();
+ await expect(elementById(TestIDs.ROUND_BUTTON)).toBeVisible();
+ });
+
+ it('set left buttons', async () => {
+ await expect(elementById(TestIDs.LEFT_BUTTON)).toBeVisible();
+ });
+
+ it('pass props to custom button component', async () => {
+ await expect(elementByLabel('Two')).toExist();
+ });
+
+ it('pass props to custom button component should exist after push pop', async () => {
+ await expect(elementByLabel('Two')).toExist();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementByLabel('Two')).toExist();
+ });
+
+ it('custom button is clickable', async () => {
+ await elementByLabel('Two').tap();
+ await expect(elementByLabel('Times created: 1')).toExist();
+ });
+
+ it('Resetting buttons should unmount button react view', async () => {
+ await elementById(TestIDs.SHOW_LIFECYCLE_BTN).tap();
+ await elementById(TestIDs.RESET_BUTTONS).tap();
+ await expect(elementByLabel('Button component unmounted')).toBeVisible();
+ });
+
+ it('change button props without rendering all buttons', async () => {
+ await elementById(TestIDs.CHANGE_BUTTON_PROPS).tap();
+ await expect(elementByLabel('Three')).toBeVisible();
+ });
+
+ it('pop using back button', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.BACK_BUTTON).tap();
+ await expect(elementByLabel('Buttons')).toBeVisible();
+ });
+
+ it('resizes title component when a button is added with mergeOptions', async () => {
+ await elementById(TestIDs.RESET_BUTTONS).tap();
+ await elementById(TestIDs.SET_RIGHT_BUTTONS).tap();
+ await elementById(TestIDs.BUTTON_THREE).tap();
+ });
+
+ it('Button component is not recreated if it has a predefined componentId', async () => {
+ await elementById(TestIDs.SET_RIGHT_BUTTONS).tap();
+ await elementById(TestIDs.ROUND_BUTTON).tap();
+ await expect(elementByLabel('Times created: 1')).toBeVisible();
+ await elementById(TestIDs.OK_BUTTON).tap();
+
+ await elementById(TestIDs.SET_RIGHT_BUTTONS).tap();
+ await elementById(TestIDs.ROUND_BUTTON).tap();
+ await expect(elementByLabel('Times created: 1')).toBeVisible();
+ await elementById(TestIDs.OK_BUTTON).tap();
+
+ await elementById(TestIDs.SET_RIGHT_BUTTONS).tap();
+ await elementById(TestIDs.ROUND_BUTTON).tap();
+ await expect(elementByLabel('Times created: 1')).toBeVisible();
+ });
+
+ it('Accepts textual left button', async () => {
+ await expect(elementById(TestIDs.TEXTUAL_LEFT_BUTTON)).toBeVisible();
+ });
+
+ it('Updates left button', async () => {
+ await elementById(TestIDs.ADD_COMPONENT_BUTTON).tap();
+ await expect(elementById('leftButton0')).toBeVisible();
+
+ await elementById(TestIDs.ADD_COMPONENT_BUTTON).tap();
+ await expect(elementById('leftButton1')).toBeVisible();
+ });
+});
diff --git a/e2e/CustomTransition.js b/e2e/CustomTransition.js
new file mode 100644
index 00000000000..f2fd4e81fde
--- /dev/null
+++ b/e2e/CustomTransition.js
@@ -0,0 +1,20 @@
+import Utils from './Utils';
+import testIDs from '../playground/src/testIDs';
+
+const { elementById } = Utils;
+
+describe(':ios: custom transition', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ });
+
+ test('sanity', async () => {
+ await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+ await elementById(testIDs.CUSTOM_TRANSITION_BUTTON).tap();
+ await expect(element(by.id('shared_image1'))).toExist();
+ await element(by.id('shared_image1')).tap();
+ await expect(element(by.id('shared_image2'))).toExist();
+ await element(by.id('shared_image2')).tap();
+ await expect(element(by.id('shared_image1'))).toExist();
+ });
+});
diff --git a/e2e/ExternalComponent.test.js b/e2e/ExternalComponent.test.js
new file mode 100644
index 00000000000..6b658ba23d7
--- /dev/null
+++ b/e2e/ExternalComponent.test.js
@@ -0,0 +1,55 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const { elementByLabel, elementById } = Utils;
+
+describe.e2e('External Component', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await elementById(TestIDs.EXTERNAL_COMP_BTN).tap();
+ });
+
+ test('Push external component', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('This is an external component')).toBeVisible();
+ });
+
+ test('Show external component in deep stack in modal', async () => {
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('External component in deep stack')).toBeVisible();
+ });
+
+ test(':ios: Dismiss modal from external component should not crash', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('This is an external component')).toBeVisible();
+ await elementById(TestIDs.EXTERNAL_DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_SCREEN)).toBeVisible();
+ });
+
+ test(':ios: Top bar buttons should be visible', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('This is an external component')).toBeVisible();
+ await expect(elementById(TestIDs.EXTERNAL_TOP_BAR_RIGHT_BTN)).toBeVisible();
+ });
+
+ test(':ios: Dismiss modal from external component should not crash when registered to modalDismissed event', async () => {
+ await elementById(TestIDs.REGISTER_MODAL_DISMISS_EVENT_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('This is an external component')).toBeVisible();
+ await elementById(TestIDs.EXTERNAL_DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_SCREEN)).toBeVisible();
+ });
+
+ test(':ios: External component should receive options', async () => {
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('External Component')).toBeVisible();
+ });
+
+ test(':ios: Push and pop native component', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_NATIVE_BTN).tap();
+ await elementById(TestIDs.POP_NATIVE_BTN).tap();
+ await expect(elementByLabel('This is an external component')).toBeVisible();
+ });
+});
diff --git a/e2e/Keyboard.test.js b/e2e/Keyboard.test.js
new file mode 100644
index 00000000000..f8ccd96a59c
--- /dev/null
+++ b/e2e/Keyboard.test.js
@@ -0,0 +1,76 @@
+import { default as TestIDs, default as testIDs } from '../playground/src/testIDs';
+import { device } from 'detox';
+import Utils from './Utils';
+import kbdDriver from './drivers/androidKeyboard';
+
+const { elementByLabel, elementById, sleep } = Utils;
+
+const KBD_OBSCURED_TEXT = 'Keyboard Demo';
+
+describe.e2e('Keyboard', () => {
+ beforeAll(async () => {
+ await kbdDriver.init();
+ await kbdDriver.enableOnScreenKeyboard();
+
+ if (device.getPlatform() === 'android') {
+ // 1st-time Android keyboard appearance is laggy (Android's lazy init?)
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.KEYBOARD_SCREEN_BTN).tap();
+ await elementById(TestIDs.TEXT_INPUT1).tap();
+ await sleep(2000);
+ }
+ });
+
+ afterAll(async () => {
+ await kbdDriver.restoreOnScreenKeyboard();
+ });
+
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.KEYBOARD_SCREEN_BTN).tap();
+ });
+
+ it('Push - should close keyboard when Back clicked', async () => {
+ await expect(elementByLabel(KBD_OBSCURED_TEXT)).toBeVisible();
+ await elementById(TestIDs.TEXT_INPUT1).tap();
+ await expect(elementByLabel(KBD_OBSCURED_TEXT)).not.toBeVisible();
+ await elementById(TestIDs.BACK_BUTTON).tap();
+ await expect(elementById(testIDs.MAIN_BOTTOM_TABS)).toBeVisible();
+ });
+
+ it('Modal - should close keyboard when close clicked', async () => {
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await elementById(TestIDs.TEXT_INPUT1).tap();
+ await expect(elementByLabel(KBD_OBSCURED_TEXT)).not.toBeVisible();
+ await elementById(TestIDs.DISMISS_MODAL_TOPBAR_BTN).tap();
+ await expect(elementById(testIDs.MAIN_BOTTOM_TABS)).toBeVisible();
+ });
+
+ it('focus keyboard continue to resize content', async () => {
+ await elementById(TestIDs.TEXT_INPUT2).typeText("Hello");
+ await elementById(TestIDs.TEXT_INPUT2).tapReturnKey();
+ await expect(elementById(TestIDs.TEXT_INPUT1)).toBeFocused();
+ await expect(elementById(TestIDs.TEXT_INPUT1)).toBeVisible();
+ });
+
+ it('focus keyboard on push', async () => {
+ await elementById(TestIDs.PUSH_FOCUSED_KEYBOARD_SCREEN).tap();
+ await expect(elementById(TestIDs.TEXT_INPUT1)).toBeFocused();
+ });
+
+ it('focus keyboard on show modal', async () => {
+ await elementById(TestIDs.MODAL_FOCUSED_KEYBOARD_SCREEN).tap();
+ await expect(elementById(TestIDs.TEXT_INPUT1)).toBeFocused();
+ });
+
+ it('doesnt focus keyboard on show modal', async () => {
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementById(TestIDs.TEXT_INPUT1)).not.toBeFocused();
+ });
+
+ it(':android: should respect UI with keyboard awareness', async () => {
+ await elementById(TestIDs.PUSH_KEYBOARD_SCREEN_STICKY_FOOTER).tap();
+ await elementById(TestIDs.TEXT_INPUT2).tap();
+ await expect(elementByLabel(KBD_OBSCURED_TEXT)).toBeVisible();
+ });
+});
diff --git a/e2e/LazyRegsitration.test.js b/e2e/LazyRegsitration.test.js
new file mode 100644
index 00000000000..7303c0d7409
--- /dev/null
+++ b/e2e/LazyRegsitration.test.js
@@ -0,0 +1,19 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const { elementById } = Utils;
+
+describe.e2e('Lazy Registration', () => {
+ beforeEach(async () => {
+ await device.relaunchApp();
+ await elementById(TestIDs.STACK_BTN).tap();
+ });
+
+ it('push and pop lazily registered screen', async () => {
+ await elementById(TestIDs.PUSH_LAZY_BTN).tap();
+ await expect(elementById(TestIDs.LAZILY_REGISTERED_SCREEN_HEADER)).toBeVisible();
+ await expect(elementById(TestIDs.LAZY_TOP_PAR)).toBeVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+ });
+});
diff --git a/e2e/Modals.test.js b/e2e/Modals.test.js
new file mode 100644
index 00000000000..7dc09978203
--- /dev/null
+++ b/e2e/Modals.test.js
@@ -0,0 +1,213 @@
+import TestIDs from '../playground/src/testIDs';
+import Android from './AndroidUtils';
+import Utils from './Utils';
+
+const { elementByLabel, elementById, sleep } = Utils;
+
+describe('modal', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ });
+
+ it('show modal', async () => {
+ await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it('dismiss modal', async () => {
+ await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it.e2e('unmount modal when dismissed', async () => {
+ await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+ await elementById(TestIDs.MODAL_LIFECYCLE_BTN).tap();
+ await expect(elementByLabel('didAppear')).toBeVisible();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementByLabel('componentWillUnmount')).toBeVisible();
+ await elementByLabel('OK').atIndex(0).tap();
+ await expect(elementByLabel('didDisappear')).toBeVisible();
+ await elementByLabel('OK').atIndex(0).tap();
+ });
+
+ it('show multiple modals', async () => {
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it.e2e('dismiss unknown screen id', async () => {
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.DISMISS_UNKNOWN_MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it('dismiss modal by id which is not the top most', async () => {
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.DISMISS_PREVIOUS_MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it('dismiss all previous modals by id when they are below top presented modal', async () => {
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
+
+ await elementById(TestIDs.DISMISS_ALL_PREVIOUS_MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
+
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it('dismiss some modal by id deep in the stack', async () => {
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
+
+ await elementById(TestIDs.DISMISS_FIRST_MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 3')).toBeVisible();
+
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
+
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it('dismissAllModals', async () => {
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.DISMISS_ALL_MODALS_BTN).tap();
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it('push into modal', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ });
+
+ it.e2e(':android: push into modal and dismiss pushed screen with hardware back', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await Android.pressBack();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ });
+
+ it('present modal multiple times', async () => {
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('Modal Stack Position: 1')).toBeVisible();
+ });
+
+ it('setRoot dismisses modals', async () => {
+ await elementById(TestIDs.SET_ROOT).tap();
+ await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeNotVisible();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it.e2e(':android: override hardware back button in modal with stack', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.ADD_BACK_HANDLER).tap();
+
+ // Back is handled in Js
+ await Android.pressBack();
+ await sleep(100);
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+
+ // pop
+ await elementById(TestIDs.REMOVE_BACK_HANDLER).tap();
+ await Android.pressBack();
+ await sleep(100);
+ await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+
+ // modal dismissed
+ await Android.pressBack();
+ await sleep(100);
+ await expect(elementById(TestIDs.NAVIGATION_TAB)).toBeVisible();
+ });
+
+ it.e2e('dismissModal promise is resolved with root ViewController id', async () => {
+ await elementById(TestIDs.MODAL_COMMANDS_BTN).tap();
+ await elementById(TestIDs.MODAL_BTN).tap();
+
+ await expect(elementByLabel('showModal promise resolved with: UniqueStackId')).toBeVisible();
+ await expect(elementByLabel('modalDismissed listener called with with: UniqueStackId')).toBeVisible();
+ await expect(elementByLabel('dismissModal promise resolved with: UniqueStackId')).toBeVisible();
+ });
+
+ it.e2e('should show declared modal', async () => {
+ await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+ await expect(elementById(TestIDs.DISMISS_REACT_MODAL_BTN)).toBeVisible();
+ await elementById(TestIDs.DISMISS_REACT_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it.e2e('should show and dismiss multiple modals including declared modal', async () => {
+ await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+ await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+ await expect(elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL)).toBeVisible();
+ await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+ await elementById(TestIDs.DISMISS_REACT_MODAL_BTN).tap();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementById(TestIDs.DISMISS_REACT_MODAL_BTN)).toBeVisible();
+ await elementById(TestIDs.DISMISS_REACT_MODAL_BTN).tap();
+
+ await expect(elementById(TestIDs.MODAL_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it.e2e('overlay should be on top of all modals', async () => {
+ await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+ await elementById(TestIDs.OVERLAY_BTN).tap();
+ await expect(elementById(TestIDs.DISMISS_REACT_MODAL_BTN)).toBeVisible();
+ await expect(elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON)).toBeVisible();
+
+ await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+ await expect(elementById(TestIDs.MODAL_LIFECYCLE_BTN)).toBeVisible();
+
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await elementById(TestIDs.DISMISS_REACT_MODAL_BTN).tap();
+
+ await elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON).tap();
+ });
+
+ it.e2e(':android: should handle back properly', async () => {
+ await elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL).tap();
+ await elementById(TestIDs.SHOW_MODAL_FROM_DECLARED_BUTTON).tap();
+ await expect(elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL)).toBeVisible();
+
+ await Android.pressBack();
+
+ await expect(elementById(TestIDs.DISMISS_REACT_MODAL_BTN)).toBeVisible();
+
+ await Android.pressBack();
+
+ await expect(elementById(TestIDs.TOGGLE_REACT_DECLARED_MODAL)).toBeVisible();
+ });
+
+ it.e2e('dismiss modal with side menu', async () => {
+ await elementById(TestIDs.MODAL_COMMANDS_BTN).tap();
+ await elementById(TestIDs.SHOW_SIDE_MENU_MODAL).tap();
+ await expect(elementByLabel('System UI Options')).toBeVisible();
+ await elementById(TestIDs.DISMISS_MODAL_TOPBAR_BTN).tap();
+ await expect(elementByLabel('System UI Options')).not.toBeVisible();
+ await expect(elementByLabel('Modal Commands')).toBeVisible();
+ });
+});
diff --git a/e2e/Options.test.js b/e2e/Options.test.js
new file mode 100644
index 00000000000..59e7f713bba
--- /dev/null
+++ b/e2e/Options.test.js
@@ -0,0 +1,95 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const { elementById, elementByLabel } = Utils;
+
+describe('Options', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.OPTIONS_TAB).tap();
+ });
+
+ it('declare options on a component', async () => {
+ await expect(elementByLabel('Styling Options')).toBeVisible();
+ });
+
+ it('change title on component component', async () => {
+ await expect(elementByLabel('Styling Options')).toBeVisible();
+ await elementById(TestIDs.CHANGE_TITLE_BTN).tap();
+ await expect(elementByLabel('Title Changed')).toBeVisible();
+ });
+
+ it('hides TopBar when pressing on Hide TopBar and shows it when pressing on Show TopBar', async () => {
+ await elementById(TestIDs.HIDE_TOP_BAR_BTN).tap();
+ await expect(elementById(TestIDs.TOP_BAR)).toBeNotVisible();
+ await elementById(TestIDs.SHOW_TOP_BAR_BTN).tap();
+ await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+ });
+
+ it('default options should apply to all screens in stack', async () => {
+ await elementById(TestIDs.HIDE_TOPBAR_DEFAULT_OPTIONS).tap();
+ await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeNotVisible();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeNotVisible();
+ });
+
+ it('default options should not override static options', async () => {
+ await elementById(TestIDs.HIDE_TOPBAR_DEFAULT_OPTIONS).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+ await expect(elementByLabel('Styling Options')).toBeVisible();
+ });
+
+ it('set title component', async () => {
+ await elementById(TestIDs.SET_REACT_TITLE_VIEW).tap();
+ await expect(elementByLabel('Press Me')).toBeVisible();
+ });
+
+ it('set title after setting react component', async () => {
+ await elementById(TestIDs.SET_REACT_TITLE_VIEW).tap();
+ await expect(elementByLabel('Press Me')).toBeVisible();
+ await elementById(TestIDs.CHANGE_TITLE_BTN).tap();
+ await expect(elementByLabel('Title Changed')).toBeVisible();
+ });
+
+ it('Popping screen with yellow box should not crash', async () => {
+ await elementById(TestIDs.SHOW_YELLOW_BOX_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementByLabel('Styling Options')).toBeVisible();
+ });
+
+ it('Merging options to invisible component in stack should not affect current component', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.HIDE_PREVIOUS_SCREEN_TOP_BAR).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ });
+
+ it('Merging options to invisible component should affect the invisible component', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.HIDE_PREVIOUS_SCREEN_TOP_BAR).tap();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementByLabel('Styling Options')).toBeNotVisible();
+ });
+
+ it(':ios: Replace tab testID', async () => {
+ await expect(elementById(TestIDs.OPTIONS_TAB)).toBeVisible();
+ await elementById(TestIDs.REPLACE_TAB_TEST_ID).tap();
+ await expect(elementById(TestIDs.OPTIONS_TAB)).toBeNotVisible();
+ await expect(elementById(TestIDs.REPLACED_TAB)).toBeVisible();
+ });
+
+ xit('hides topBar onScroll down and shows it on scroll up', async () => {
+ await elementById(TestIDs.PUSH_OPTIONS_BUTTON).tap();
+ await elementById(TestIDs.SCROLLVIEW_SCREEN_BUTTON).tap();
+ await elementById(TestIDs.TOGGLE_TOP_BAR_HIDE_ON_SCROLL).tap();
+ await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+ await element(by.id(TestIDs.SCROLLVIEW_ELEMENT)).swipe('up', 'slow');
+ await expect(elementById(TestIDs.TOP_BAR)).toBeNotVisible();
+ await element(by.id(TestIDs.SCROLLVIEW_ELEMENT)).swipe('down', 'fast');
+ await expect(elementById(TestIDs.TOP_BAR)).toBeVisible();
+ });
+});
diff --git a/e2e/Orientation.test.js b/e2e/Orientation.test.js
new file mode 100644
index 00000000000..d45449477a6
--- /dev/null
+++ b/e2e/Orientation.test.js
@@ -0,0 +1,45 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const { elementById } = Utils;
+
+describe.e2e(':ios: orientation', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ waitForDeviceToSettleAfterOrientationChangeAndroid = (ms) =>
+ new Promise((res) => setTimeout(res, device.getPlatform() === 'ios' ? 0 : 400));
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await elementById(TestIDs.SHOW_ORIENTATION_SCREEN).tap();
+ });
+
+ it('landscape and portrait array', async () => {
+ await elementById(TestIDs.LANDSCAPE_PORTRAIT_ORIENTATION_BTN).tap();
+ await expect(element(by.id(TestIDs.PORTRAIT_ELEMENT))).toBeVisible();
+ await device.setOrientation('landscape');
+ waitForDeviceToSettleAfterOrientationChangeAndroid();
+ await expect(element(by.id(TestIDs.LANDSCAPE_ELEMENT))).toBeVisible();
+ await device.setOrientation('portrait');
+ waitForDeviceToSettleAfterOrientationChangeAndroid();
+ await expect(element(by.id(TestIDs.PORTRAIT_ELEMENT))).toBeVisible();
+ await elementById(TestIDs.DISMISS_BTN).tap();
+ });
+
+ it(':ios: portrait only', async () => {
+ await elementById(TestIDs.PORTRAIT_ORIENTATION_BTN).tap();
+ await expect(elementById(TestIDs.PORTRAIT_ELEMENT)).toBeVisible();
+ await device.setOrientation('landscape');
+ await expect(elementById(TestIDs.PORTRAIT_ELEMENT)).toBeVisible();
+ await device.setOrientation('portrait');
+ await expect(elementById(TestIDs.PORTRAIT_ELEMENT)).toBeVisible();
+ await elementById(TestIDs.DISMISS_BTN).tap();
+ });
+
+ it(':ios: landscape only', async () => {
+ await elementById(TestIDs.LANDSCAPE_ORIENTATION_BTN).tap();
+ await device.setOrientation('landscape');
+ await expect(element(by.id(TestIDs.LANDSCAPE_ELEMENT))).toBeVisible();
+ await device.setOrientation('portrait');
+ await expect(element(by.id(TestIDs.LANDSCAPE_ELEMENT))).toBeVisible();
+ await elementById(TestIDs.DISMISS_BTN).tap();
+ });
+});
diff --git a/e2e/Overlay.test.js b/e2e/Overlay.test.js
new file mode 100644
index 00000000000..029af0bc777
--- /dev/null
+++ b/e2e/Overlay.test.js
@@ -0,0 +1,100 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+import Android from './AndroidUtils';
+
+const { elementByLabel, elementById, expectImagesToBeEqual,expectImagesToBeNotEqual } = Utils;
+
+describe('Overlay', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await elementById(TestIDs.OVERLAY_BTN).tap();
+ });
+
+ it('show and dismiss overlay', async () => {
+ await elementById(TestIDs.SHOW_OVERLAY_BTN).tap();
+ await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeVisible();
+ await elementById(TestIDs.DISMISS_BTN).tap();
+ await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeNotVisible();
+ });
+
+ it('overlay pass touches - true', async () => {
+ await elementById(TestIDs.SHOW_TOUCH_THROUGH_OVERLAY_BTN).tap();
+ await expect(elementById(TestIDs.SHOW_OVERLAY_BTN)).toBeVisible();
+ await elementById(TestIDs.ALERT_BUTTON).tap();
+ await expect(elementByLabel('Alert displayed')).toBeVisible();
+ });
+
+ it.e2e('overlay should redraw after orientation change', async () => {
+ await elementById(TestIDs.SHOW_OVERLAY_BTN).tap();
+ await device.setOrientation('landscape');
+ await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeVisible();
+ });
+
+ it('setRoot should not remove overlay', async () => {
+ await elementById(TestIDs.SHOW_TOUCH_THROUGH_OVERLAY_BTN).tap();
+ await elementById(TestIDs.SET_ROOT_BTN).tap();
+ await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeVisible();
+ });
+
+ it('nested touchables work as expected', async () => {
+ await elementById(TestIDs.TOAST_BTN).tap();
+ await elementById(TestIDs.TOAST_OK_BTN_INNER).tap();
+ await expect(elementByLabel('Inner button clicked')).toBeVisible();
+ await elementById(TestIDs.OK_BUTTON).tap();
+
+ await elementById(TestIDs.TOAST_BTN).tap();
+ await elementById(TestIDs.TOAST_OK_BTN_OUTER).tap();
+ await expect(elementByLabel('Outer button clicked')).toBeVisible();
+ });
+
+ xtest('overlay pass touches - false', async () => {
+ await elementById(TestIDs.SHOW_OVERLAY_BUTTON).tap();
+ await expect(elementById(TestIDs.SHOW_OVERLAY_BUTTON)).toBeVisible();
+ await expect(elementById(TestIDs.TOP_BAR_ELEMENT)).toBeVisible();
+ await elementById(TestIDs.HIDE_TOP_BAR_BUTTON).tap();
+ await expect(elementById(TestIDs.TOP_BAR_ELEMENT)).toBeVisible();
+ });
+
+ it.e2e(':android: should show banner overlay and not block the screen', async () => {
+ const snapshottedImagePath = './e2e/assets/overlay_banner_padding.png';
+ Android.setDemoMode();
+ let expected = await device.takeScreenshot('without_banner');
+ await elementById(TestIDs.SHOW_BANNER_OVERLAY).tap();
+ await expect(elementById(TestIDs.BANNER_OVERLAY)).toBeVisible();
+ const actual = await device.takeScreenshot('with_banner');
+ expectImagesToBeNotEqual(expected, actual)
+ await elementById(TestIDs.SET_LAYOUT_BOTTOM_INSETS).tap();
+ expected = await device.takeScreenshot('with_banner');
+ expectImagesToBeEqual(expected, snapshottedImagePath)
+ });
+
+ it.e2e(':ios: should show banner overlay and not block the screen', async () => {
+ await elementById(TestIDs.SHOW_BANNER_OVERLAY).tap();
+ await expect(elementById(TestIDs.BANNER_OVERLAY)).toBeVisible();
+ await expect(elementById(TestIDs.FOOTER_TEXT)).toBeNotVisible();
+ await elementById(TestIDs.SET_LAYOUT_BOTTOM_INSETS).tap();
+ await expect(elementById(TestIDs.FOOTER_TEXT)).toBeVisible();
+ });
+});
+
+describe('Overlay Dismiss all', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await elementById(TestIDs.OVERLAY_BTN).tap();
+ });
+
+ xit('dismissAllOverlays should dismiss all opened overlays', async () => {
+ await elementById(TestIDs.SHOW_FULLSCREEN_OVERLAY_BTN).tap();
+ await elementById(TestIDs.SHOW_OVERLAY_BTN).tap();
+ await elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON).tap();
+ await expect(elementById(TestIDs.OVERLAY_DISMISSED_COUNT)).toHaveText('2');
+ });
+
+ it.e2e('dismissAllOverlays should be able to dismiss only one overlay', async () => {
+ await elementById(TestIDs.SHOW_OVERLAY_BTN).tap();
+ await elementById(TestIDs.DISMISS_ALL_OVERLAYS_BUTTON).tap();
+ await expect(elementById(TestIDs.OVERLAY_DISMISSED_COUNT)).toHaveText('1');
+ });
+});
diff --git a/e2e/SearchBar.test.js b/e2e/SearchBar.test.js
new file mode 100644
index 00000000000..14f83230e0b
--- /dev/null
+++ b/e2e/SearchBar.test.js
@@ -0,0 +1,41 @@
+import TestIDs from '../playground/src/testIDs';
+import Utils from './Utils';
+
+const { elementById, elementByTraits } = Utils;
+
+describe.e2e(':ios: SearchBar', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.OPTIONS_TAB).tap();
+ await elementById(TestIDs.GOTO_SEARCHBAR_SCREEN).tap();
+ });
+
+ it('show and hide search bar', async () => {
+ await elementById(TestIDs.SHOW_SEARCH_BAR_BTN).tap();
+ await expect(elementByTraits(['searchField'])).toBeVisible();
+ await elementById(TestIDs.HIDE_SEARCH_BAR_BTN).tap();
+ await expect(elementByTraits(['searchField'])).toBeNotVisible();
+ });
+});
+
+describe.e2e(':ios: SearchBar Modal', () => {
+ beforeAll(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.OPTIONS_TAB).tap();
+ await elementById(TestIDs.GOTO_SEARCHBAR_MODAL).tap();
+ });
+
+ it('show and hide search bar', async () => {
+ await elementById(TestIDs.SHOW_SEARCH_BAR_BTN).tap();
+ await expect(elementByTraits(['searchField'])).toBeVisible();
+ await elementById(TestIDs.HIDE_SEARCH_BAR_BTN).tap();
+ await expect(elementByTraits(['searchField'])).toBeNotVisible();
+ });
+
+ it('searching then exiting works', async () => {
+ await elementById(TestIDs.SHOW_SEARCH_BAR_BTN).tap();
+ await elementByTraits(['searchField']).replaceText('foo');
+ await elementById(TestIDs.DISMISS_MODAL_TOPBAR_BTN).tap();
+ await expect(elementById(TestIDs.OPTIONS_TAB)).toBeVisible();
+ });
+});
diff --git a/e2e/SetRoot.test.js b/e2e/SetRoot.test.js
new file mode 100644
index 00000000000..8bbc5edc7d9
--- /dev/null
+++ b/e2e/SetRoot.test.js
@@ -0,0 +1,64 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const { elementById, elementByLabel } = Utils;
+
+describe('SetRoot', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await elementById(TestIDs.SET_ROOT_BTN).tap();
+ });
+
+ it('set root multiple times with the same componentId', async () => {
+ await elementById(TestIDs.SET_MULTIPLE_ROOTS_BTN).tap();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it('set root hides bottomTabs', async () => {
+ await elementById(TestIDs.SET_ROOT_HIDES_BOTTOM_TABS_BTN).tap();
+ await expect(elementById(TestIDs.LAYOUTS_TAB)).toBeNotVisible();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementById(TestIDs.LAYOUTS_TAB)).toBeVisible();
+ });
+
+ it('set root with deep stack hides bottomTabs', async () => {
+ await elementById(TestIDs.SET_ROOT_WITH_STACK_HIDES_BOTTOM_TABS_BTN).tap();
+ await expect(elementById(TestIDs.LAYOUTS_TAB)).toBeNotVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.LAYOUTS_TAB)).toBeVisible();
+ });
+
+ it('set root without stack hides bottomTabs', async () => {
+ await elementById(TestIDs.SET_ROOT_WITHOUT_STACK_HIDES_BOTTOM_TABS_BTN).tap();
+ await expect(elementById(TestIDs.LAYOUTS_TAB)).toBeNotVisible();
+ });
+
+ it(':ios: set root with two children and second tab selected hides bottomTabs', async () => {
+ await elementById(TestIDs.SET_ROOT_WITH_TWO_CHILDREN_HIDES_BOTTOM_TABS_BTN).tap();
+ await expect(elementById(TestIDs.LAYOUTS_TAB)).toBeNotVisible();
+ });
+
+ it('set root should not override props for component with identical id', async () => {
+ await expect(elementByLabel('Two')).toBeVisible();
+ await elementById(TestIDs.ROUND_BUTTON).tap();
+ await expect(elementByLabel('Times created: 1')).toBeVisible();
+ await elementById(TestIDs.OK_BUTTON).tap();
+ await elementById(TestIDs.SET_ROOT_WITH_BUTTONS).tap();
+ await expect(elementByLabel('Two')).toBeVisible();
+ await elementById(TestIDs.ROUND_BUTTON).tap();
+ await expect(elementByLabel('Times created: 1')).toBeVisible();
+ await elementById(TestIDs.OK_BUTTON).tap();
+ });
+});
+
+it.e2e(':ios: set root with left and right side menus - menu visibility', async () => {
+ await elementById(TestIDs.SET_ROOT_WITH_MENUS).tap();
+ await elementById(TestIDs.TOGGLE_SIDE_MENU_OPEN_MODE_BTN).tap();
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
+ await expect(elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN)).toBeNotVisible();
+ await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
+ await elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN).tap();
+ await expect(elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN)).toBeNotVisible();
+});
diff --git a/e2e/SideMenu.test.js b/e2e/SideMenu.test.js
new file mode 100644
index 00000000000..e1da0d26feb
--- /dev/null
+++ b/e2e/SideMenu.test.js
@@ -0,0 +1,107 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const {elementByLabel, elementById, expectImagesToBeEqual} = Utils;
+
+describe('SideMenu', () => {
+ beforeEach(async () => {
+ await device.launchApp({newInstance : true});
+ await elementById(TestIDs.SIDE_MENU_BTN).tap();
+ });
+
+ describe.each(['aboveContent', 'pushContent'])('Open mode %s', (openMode) => {
+ beforeEach(async () => {
+ if (openMode === 'pushContent') {
+ await elementById(TestIDs.TOGGLE_SIDE_MENU_OPEN_MODE_BTN).tap();
+ }
+ });
+
+ it('close SideMenu and push to stack with static id', async () => {
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ await elementById(TestIDs.LEFT_SIDE_MENU_PUSH_BTN).tap();
+ await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.CENTER_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it('Push to stack with static id and close SideMenu with screen options', async () => {
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ await elementById(TestIDs.LEFT_SIDE_MENU_PUSH_AND_CLOSE_BTN).tap();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.CENTER_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it('side menu visibility - left', async () => {
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ await elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN).tap();
+ await expect(elementById(TestIDs.CLOSE_LEFT_SIDE_MENU_BTN)).toBeNotVisible();
+ });
+
+ it('side menu visibility - right', async () => {
+ await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
+ await elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN).tap();
+ await expect(elementById(TestIDs.CLOSE_RIGHT_SIDE_MENU_BTN)).toBeNotVisible();
+ });
+
+ it.e2e('should rotate', async () => {
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ await device.setOrientation('landscape');
+ await expect(elementById(TestIDs.LEFT_SIDE_MENU_PUSH_BTN)).toBeVisible();
+ });
+
+ it.e2e(':ios: rotation should update drawer height', async () => {
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ await expect(elementByLabel('left drawer height: 869')).toBeVisible();
+ await device.setOrientation('landscape');
+ await expect(elementByLabel('left drawer height: 428')).toBeVisible();
+ await device.setOrientation('portrait');
+ await expect(elementByLabel('left drawer height: 869')).toBeVisible();
+ });
+
+ it.e2e('should set left drawer width', async () => {
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ await expect(elementById(TestIDs.SIDE_MENU_LEFT_DRAWER_HEIGHT_TEXT)).toBeVisible();
+ await expect(elementByLabel('left drawer width: 250')).toBeVisible();
+ });
+
+ it.e2e('should change left drawer width', async () => {
+ await elementById(TestIDs.CHANGE_LEFT_SIDE_MENU_WIDTH_BTN).tap();
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ await expect(elementByLabel('left drawer width: 100')).toBeVisible();
+ });
+
+ it.e2e('should set right drawer width', async () => {
+ await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
+ await expect(elementByLabel('right drawer width: 250')).toBeVisible();
+ });
+
+ it.e2e('should change right drawer width', async () => {
+ await elementById(TestIDs.CHANGE_RIGHT_SIDE_MENU_WIDTH_BTN).tap();
+ await elementById(TestIDs.OPEN_RIGHT_SIDE_MENU_BTN).tap();
+ await expect(elementByLabel('right drawer width: 50')).toBeVisible();
+ });
+
+ it.e2e(':ios: should render side menu correctly', async () => {
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+ const snapshottedImagePath = `./e2e/assets/side_menu.${openMode}.png`;
+ const actual =
+ await elementById('SideMenuContainer').takeScreenshot(`side_menu_${openMode}`);
+ expectImagesToBeEqual(actual, snapshottedImagePath);
+ });
+ });
+
+ it.e2e(':ios: should open above-content by default', async () => {
+ await elementById(TestIDs.TOGGLE_SIDE_MENU_OPEN_MODE_BTN).tap(); // aboveContent --> pushContent
+ await elementById(TestIDs.TOGGLE_SIDE_MENU_OPEN_MODE_BTN).tap(); // pushContent --> undefined
+ await expect(elementByLabel('Open mode: undefined')).toBeVisible();
+
+ await elementById(TestIDs.OPEN_LEFT_SIDE_MENU_BTN).tap();
+
+ const snapshottedImagePath = `./e2e/assets/side_menu.undefined.png`;
+ const actual =
+ await elementById('SideMenuContainer').takeScreenshot(`side_menu_undefined`);
+ expectImagesToBeEqual(actual, snapshottedImagePath);
+ });
+});
diff --git a/e2e/SplitView.test.js b/e2e/SplitView.test.js
new file mode 100644
index 00000000000..abd354979f2
--- /dev/null
+++ b/e2e/SplitView.test.js
@@ -0,0 +1,28 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const cocktailsList = require('../playground/src/assets/cocktails').default;
+const { elementByLabel, elementById } = Utils;
+
+describe.e2e(':ios: SplitView', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.SPLIT_VIEW_BUTTON).tap();
+ });
+
+ it('master screen updates details screen', async () => {
+ const secondCocktail = cocktailsList[1];
+ await elementById(secondCocktail.id).tap();
+ await expect(elementByLabel(secondCocktail.description)).toBeVisible();
+ });
+
+ it('push screen to master screen', async () => {
+ await elementById(TestIDs.PUSH_MASTER_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ });
+
+ it('push screen to detail screen', async () => {
+ await elementById(TestIDs.PUSH_DETAILS_BTN).tap();
+ await expect(elementByLabel('Pushed Screen')).toBeVisible();
+ });
+});
diff --git a/e2e/Stack.test.js b/e2e/Stack.test.js
new file mode 100644
index 00000000000..e7c371b1b05
--- /dev/null
+++ b/e2e/Stack.test.js
@@ -0,0 +1,190 @@
+import jestExpect from 'expect';
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+import Android from './AndroidUtils';
+
+const { elementByLabel, elementById, sleep } = Utils;
+
+const driver = {
+ root: {
+ navToTitleAndSubtitle: async () => {
+ await elementById(TestIDs.PUSH_TITLE_WITH_SUBTITLE).tap();
+ return driver.titleWithSubtitle;
+ },
+ },
+
+ titleWithSubtitle: {
+ titleId: `${TestIDs.TOPBAR_ID}.title`,
+ subtitleId: `${TestIDs.TOPBAR_ID}.subtitle`,
+ title: () => elementById(driver.titleWithSubtitle.titleId),
+ titleByLabel: () => elementByLabel('Title'),
+ subtitle: () => elementById(driver.titleWithSubtitle.subtitleId),
+ subtitleByLabel: () => elementByLabel('Subtitle'),
+ },
+};
+
+describe('Stack', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.STACK_BTN).tap();
+ });
+
+ it.e2e('SetStackRoot on a non created tab should work', async () => {
+ await elementById(TestIDs.SET_ROOT_NAVIGATION_TAB).tap();
+ await elementById(TestIDs.DISMISS_MODAL_TOPBAR_BTN).tap();
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ await elementById(TestIDs.BACK_BUTTON).tap();
+ await expect(elementById(TestIDs.NAVIGATION_SCREEN)).toBeVisible();
+ });
+
+ it('push and pop screen', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it('push and pop screen without animation', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_NO_ANIM_BTN).tap();
+ await expect(elementByLabel('Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementByLabel('Stack Position: 1')).toBeVisible();
+ });
+
+ it('pop using stack id', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+ await elementById(TestIDs.POP_USING_STACK_ID_BTN).tap();
+ await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it('pop using previous screen id', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.POP_USING_PREVIOUS_SCREEN_ID_BTN).tap();
+ await expect(elementByLabel('Stack Position: 1')).toBeVisible();
+ });
+
+ it('pop to specific id', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Stack Position: 3')).toBeVisible();
+ await elementById(TestIDs.POP_TO_FIRST_SCREEN_BTN).tap();
+ await expect(elementByLabel('Stack Position: 1')).toBeVisible();
+ });
+
+ it('pop to root', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.POP_TO_ROOT_BTN).tap();
+ await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it.e2e('pop component should not detach component if can`t pop', async () => {
+ await elementById(TestIDs.POP_NONE_EXISTENT_SCREEN_BTN).tap();
+ await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it(':android: custom back button', async () => {
+ await elementById(TestIDs.PUSH_CUSTOM_BACK_BTN).tap();
+ await elementById(TestIDs.CUSTOM_BACK_BTN).tap();
+ await expect(elementByLabel('back button clicked')).toBeVisible();
+ });
+
+ it('push title with subtitle', async () => {
+ const innerDriver = await driver.root.navToTitleAndSubtitle();
+ await expect(innerDriver.titleByLabel()).toBeVisible();
+ await expect(innerDriver.subtitleByLabel()).toBeVisible();
+ });
+
+ it('push title & subtitle with derived test IDs', async () => {
+ const innerDriver = await driver.root.navToTitleAndSubtitle();
+ await expect(innerDriver.title()).toBeVisible();
+ await expect(innerDriver.subtitle()).toBeVisible();
+ });
+
+ it.e2e('push title & subtitle with derived test IDs (strict e2e)', async () => {
+ const innerDriver = await driver.root.navToTitleAndSubtitle();
+
+ const titleAttr = await innerDriver.titleByLabel().getAttributes();
+ jestExpect(titleAttr.identifier).toEqual(innerDriver.titleId);
+
+ const subtitleAttr = await innerDriver.subtitleByLabel().getAttributes();
+ jestExpect(subtitleAttr.identifier).toEqual(innerDriver.subtitleId);
+ });
+
+ it.e2e('screen lifecycle', async () => {
+ await elementById(TestIDs.PUSH_LIFECYCLE_BTN).tap();
+ await expect(elementByLabel('didAppear')).toBeVisible();
+ await elementById(TestIDs.PUSH_TO_TEST_DID_DISAPPEAR_BTN).tap();
+ await expect(elementByLabel('didDisappear')).toBeVisible();
+ });
+
+ it.e2e('Screen popped event', async () => {
+ await elementById(TestIDs.PUSH_LIFECYCLE_BTN).tap();
+ await elementById(TestIDs.SCREEN_POPPED_BTN).tap();
+ await expect(elementByLabel('Screen popped event')).toBeVisible();
+ });
+
+ it.e2e('unmount is called on pop', async () => {
+ await elementById(TestIDs.PUSH_LIFECYCLE_BTN).tap();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementByLabel('componentWillUnmount')).toBeVisible();
+ await elementByLabel('OK').atIndex(0).tap();
+ await expect(elementByLabel('didDisappear')).toBeVisible();
+ });
+
+ it.e2e(':android: override hardware back button', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.ADD_BACK_HANDLER).tap();
+ await Android.pressBack();
+ await sleep(100);
+ await expect(elementById(TestIDs.PUSHED_SCREEN_HEADER)).toBeVisible();
+
+ await elementById(TestIDs.REMOVE_BACK_HANDLER).tap();
+ await Android.pressBack();
+ await sleep(100);
+ await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+ });
+
+ it('does not crash when setting the stack root to an existing component id', async () => {
+ await elementById(TestIDs.SET_STACK_ROOT_WITH_ID_BTN).tap();
+ await elementById(TestIDs.SET_STACK_ROOT_WITH_ID_BTN).tap();
+ });
+
+ it.e2e(':ios: set stack root component should be first in stack', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('Stack Position: 1')).toBeVisible();
+ await elementById(TestIDs.SET_STACK_ROOT_BUTTON).tap();
+ await expect(elementByLabel('Stack Position: 2')).toBeVisible();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementByLabel('Stack Position: 2')).toBeVisible();
+ });
+
+ xit(':ios: set searchBar and handle onSearchUpdated event', async () => {
+ // Broken on iOS 13
+ await elementById(TestIDs.SEARCH_BTN).tap();
+ await expect(elementByLabel('Start Typing')).toBeVisible();
+ await elementByLabel('Start Typing').tap();
+ const query = '124';
+ await elementByLabel('Start Typing').typeText(query);
+ await expect(elementById(TestIDs.SEARCH_RESULT_ITEM)).toHaveText(`Item ${query}`);
+ });
+
+ it.e2e('push promise is resolved with pushed ViewController id', async () => {
+ await elementById(TestIDs.STACK_COMMANDS_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('push promise resolved with: ChildId')).toBeVisible();
+ await expect(elementByLabel('pop promise resolved with: ChildId')).toBeVisible();
+ });
+
+ it('pop from root screen should do nothing', async () => {
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementById(TestIDs.STACK_SCREEN_HEADER)).toBeVisible();
+ });
+});
diff --git a/e2e/StaticLifecycleEvents.test.js b/e2e/StaticLifecycleEvents.test.js
new file mode 100644
index 00000000000..2440d91281e
--- /dev/null
+++ b/e2e/StaticLifecycleEvents.test.js
@@ -0,0 +1,112 @@
+import Utils from './Utils';
+import TestIDs from '../playground/src/testIDs';
+
+const { elementByLabel, elementById } = Utils;
+
+describe('static lifecycle events', () => {
+ beforeEach(async () => {
+ await device.launchApp({ newInstance: true });
+ await elementById(TestIDs.NAVIGATION_TAB).tap();
+ await elementById(TestIDs.SHOW_STATIC_EVENTS_SCREEN).tap();
+ await elementById(TestIDs.STATIC_EVENTS_OVERLAY_BTN).tap();
+ await expect(elementByLabel('Static Lifecycle Events Overlay')).toBeVisible();
+ await expect(elementByLabel('componentWillAppear | EventsOverlay | Component')).toBeVisible();
+ await expect(elementByLabel('componentDidAppear | EventsOverlay | Component')).toBeVisible();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ });
+
+ it('willAppear didAppear didDisappear', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('componentWillAppear | Pushed | Component')).toBeVisible();
+ await expect(elementByLabel('componentDidAppear | Pushed | Component')).toBeVisible();
+ await expect(elementByLabel('componentDidDisappear | EventsScreen | Component')).toBeVisible();
+ });
+
+ it('pushing and popping screen dispatch static event', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(elementByLabel('command started: push')).toBeVisible();
+ await expect(elementByLabel('command completed: push')).toBeVisible();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.POP_BTN).tap();
+ await expect(elementByLabel('command started: pop')).toBeVisible();
+ await expect(elementByLabel('command completed: pop')).toBeVisible();
+ });
+
+ it('showModal and dismissModal dispatch static event', async () => {
+ await elementById(TestIDs.MODAL_BTN).tap();
+ await expect(elementByLabel('command started: showModal')).toBeVisible();
+ await expect(elementByLabel('command completed: showModal')).toBeVisible();
+ await expect(elementByLabel('componentWillAppear | Modal | Component')).toBeVisible();
+ await expect(elementByLabel('componentDidAppear | Modal | Component')).toBeVisible();
+ await expect(elementByLabel('componentDidDisappear | EventsScreen | Component')).toBeVisible();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.DISMISS_MODAL_BTN).tap();
+ await expect(elementByLabel('command started: dismissModal')).toBeVisible();
+ await expect(elementByLabel('command completed: dismissModal')).toBeVisible();
+ await expect(elementByLabel('componentWillAppear | EventsScreen | Component')).toBeVisible();
+ await expect(elementByLabel('componentDidAppear | EventsScreen | Component')).toBeVisible();
+ await expect(elementByLabel('componentDidDisappear | Modal | Component')).toBeVisible();
+ });
+
+ it('unmounts when dismissed', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.DISMISS_BTN).tap();
+ await expect(elementByLabel('Overlay Unmounted')).toBeVisible();
+ await elementByLabel('OK').tap();
+ });
+
+ it('top bar buttons willAppear didAppear didDisappear', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_OPTIONS_BUTTON).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.GOTO_BUTTONS_SCREEN).tap();
+ await expect(
+ elementByLabel('componentWillAppear | CustomRoundedButton | TopBarButton')
+ ).toBeVisible();
+ await expect(
+ elementByLabel('componentDidAppear | CustomRoundedButton | TopBarButton')
+ ).toBeVisible();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.RESET_BUTTONS).tap();
+ await expect(
+ elementByLabel('componentDidDisappear | CustomRoundedButton | TopBarButton')
+ ).toBeVisible();
+ });
+
+ it('top bar title willAppear didAppear didDisappear', async () => {
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.PUSH_OPTIONS_BUTTON).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.SET_REACT_TITLE_VIEW).tap();
+ await expect(
+ elementByLabel('componentWillAppear | ReactTitleView | TopBarTitle')
+ ).toBeVisible();
+ await expect(elementByLabel('componentDidAppear | ReactTitleView | TopBarTitle')).toBeVisible();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await expect(
+ elementByLabel('componentDidDisappear | ReactTitleView | TopBarTitle')
+ ).toBeVisible();
+ });
+
+ it.e2e('unmounts previous root before resolving setRoot promise', async () => {
+ await elementById(TestIDs.SET_ROOT_BTN).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.SET_ROOT_BTN).tap();
+ await expect(elementByLabel('setRoot complete')).toBeVisible();
+ await expect(elementByLabel('component unmounted')).toBeVisible();
+ });
+
+ it('top bar custom button willAppear didAppear after pop, on a root screen', async () => {
+ await elementById(TestIDs.SHOW_RIGHT_BUTTON).tap();
+ await elementById(TestIDs.PUSH_BTN).tap();
+ await elementById(TestIDs.CLEAR_OVERLAY_EVENTS_BTN).tap();
+ await elementById(TestIDs.BACK_BUTTON).tap();
+ await expect(
+ elementByLabel('componentWillAppear | CustomRoundedButton | TopBarButton')
+ ).toBeVisible();
+ await expect(
+ elementByLabel('componentDidAppear | CustomRoundedButton | TopBarButton')
+ ).toBeVisible();
+ });
+});
diff --git a/e2e/Utils.js b/e2e/Utils.js
new file mode 100644
index 00000000000..c8c8ea1260d
--- /dev/null
+++ b/e2e/Utils.js
@@ -0,0 +1,102 @@
+import { readFileSync } from 'fs';
+import { PNG } from 'pngjs';
+import { ssim } from 'ssim.js';
+
+const SSIM_SCORE_THRESHOLD = 0.997;
+
+function convertToSSIMFormat(image) {
+ return {
+ data: new Uint8ClampedArray(image.data),
+ width: image.width,
+ height: image.height
+ };
+}
+
+function loadImage(path) {
+ const image = PNG.sync.read(readFileSync(path));
+
+ return convertToSSIMFormat(image);
+}
+
+function bitmapDiff(imagePath, expectedImagePath, ssimThreshold = SSIM_SCORE_THRESHOLD) {
+ const image = loadImage(imagePath);
+ const expectedImage = loadImage(expectedImagePath);
+
+ const { mssim, performance } = ssim(image, expectedImage);
+
+ if (mssim < ssimThreshold) {
+ throw new Error(
+ `Expected bitmaps at '${imagePath}' and '${expectedImagePath}' to have an SSIM score ` +
+ `of at least ${SSIM_SCORE_THRESHOLD}, but got ${mssim}. This means the snapshots are different ` +
+ `(comparison took ${performance}ms)`,
+ );
+ }
+}
+
+const sleep = (ms) =>
+ new Promise((res) => setTimeout(res, ms));
+
+/**
+ * @param tries Total tries to attempt (retries + 1)
+ * @param delay Delay between retries, in milliseconds
+ * @param {Function
-