feat: Migrate example apps to use react-navigation

.github/workflows/android-e2e-test.yml

@@ -38,8 +38,14 @@ jobs:
       - name: Install root node dependencies
         run: yarn install && yarn submodules
       - name: Install node dependencies
+        id: install_deps
         working-directory: ${{ env.WORKING_DIRECTORY }}
+        continue-on-error: true
         run: yarn install
+      - if: steps.install_deps.outcome == 'failure'
+        name: Reinstall node dependencies
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: yarn
       - name: Build app
         working-directory: ${{ env.WORKING_DIRECTORY }}
         run: yarn build-e2e-android

Example/App.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
-import { createNativeStackNavigator } from 'react-native-screens/native-stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import RNRestart from 'react-native-restart';
 
 import { ListItem, SettingsSwitch } from './src/shared';
@@ -161,10 +161,7 @@ const ExampleApp = (): JSX.Element => (
   <GestureHandlerRootView style={{ flex: 1 }}>
     <GestureDetectorProvider>
       <NavigationContainer>
-        <Stack.Navigator
-          screenOptions={{
-            direction: I18nManager.isRTL ? 'rtl' : 'ltr',
-          }}>
+        <Stack.Navigator>
           <Stack.Screen
             name="Main"
             options={{ title: '📱 React Native Screens Examples' }}

Example/e2e/examplesTests/bottomTabs.e2e.ts

@@ -12,75 +12,79 @@ describe('Bottom tabs and native stack', () => {
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
 
     await expect(
-      element(by.id('bottom-tabs-more-details-button'))
+      element(by.id('bottom-tabs-A-more-details-button'))
     ).toBeVisible();
   });
 
   it('should go to details screen', async () => {
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
-    await element(by.id('bottom-tabs-more-details-button')).tap();
-    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
-      'More details 1'
-    );
+    await element(by.id('bottom-tabs-A-more-details-button')).tap();
+    await expect(
+      element(by.id('bottom-tabs-A-more-details-button'))
+    ).toHaveLabel('More details 1');
   });
 
   it('should go to details screen and back', async () => {
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
-    await element(by.id('bottom-tabs-more-details-button')).tap();
-    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
-      'More details 1'
-    );
+    await element(by.id('bottom-tabs-A-more-details-button')).tap();
+    await expect(
+      element(by.id('bottom-tabs-A-more-details-button'))
+    ).toHaveLabel('More details 1');
     if (device.getPlatform() === 'ios') {
       await element(by.type('_UIButtonBarButton')).tap();
     } else {
       await device.pressBack();
     }
-    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
-      'More details 0'
-    );
+    await expect(
+      element(by.id('bottom-tabs-A-more-details-button'))
+    ).toHaveLabel('More details 0');
   });
 
   it('should go between tabs', async () => {
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
 
     await element(by.id('bottom-tabs-B-tab')).tap();
-    await expect(element(by.id('bottom-tabs-header-right-id'))).toHaveText('B');
+    await expect(element(by.id('bottom-tabs-B-header-right-id'))).toHaveText(
+      'B'
+    );
 
     await element(by.id('bottom-tabs-A-tab')).tap();
-    await expect(element(by.id('bottom-tabs-header-right-id'))).toHaveText('A');
+    await expect(element(by.id('bottom-tabs-A-header-right-id'))).toHaveText(
+      'A'
+    );
   });
 
   it('should go to first screen on double tap on a tab', async () => {
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
 
-    await element(by.id('bottom-tabs-more-details-button')).tap();
-    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
-      'More details 1'
-    );
+    await element(by.id('bottom-tabs-A-more-details-button')).tap();
+    await expect(
+      element(by.id('bottom-tabs-A-more-details-button'))
+    ).toHaveLabel('More details 1');
 
     await element(by.id('bottom-tabs-A-tab')).multiTap(2);
-    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
-      'More details 0'
-    );
+    await expect(
+      element(by.id('bottom-tabs-A-more-details-button'))
+    ).toHaveLabel('More details 0');
   });
 
   it('should keep stack state on tab change', async () => {
     await element(by.id('root-screen-example-BottomTabsAndStack')).tap();
 
-    await element(by.id('bottom-tabs-more-details-button')).tap();
-    await element(by.id('bottom-tabs-more-details-button')).tap();
-    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
-      'More details 2'
-    );
+    await element(by.id('bottom-tabs-A-more-details-button')).tap();
+    await element(by.id('bottom-tabs-A-more-details-button')).tap();
+    await expect(
+      element(by.id('bottom-tabs-A-more-details-button'))
+    ).toHaveLabel('More details 2');
 
     await element(by.id('bottom-tabs-B-tab')).tap();
-    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
-      'More details 0'
-    );
+    await expect(
+      element(by.id('bottom-tabs-B-more-details-button'))
+    ).toHaveLabel('More details 0');
     await element(by.id('bottom-tabs-A-tab')).tap();
 
-    await expect(element(by.id('bottom-tabs-more-details-button'))).toHaveLabel(
-      'More details 2'
-    );
+    await expect(
+      element(by.id('bottom-tabs-A-more-details-button'))
+    ).toHaveLabel('More details 2');
   });
 });

Example/e2e/examplesTests/events.e2e.ts

@@ -1,5 +1,49 @@
 import { device, expect, element, by } from 'detox';
 
+const pressBack = async () => {
+  if (device.getPlatform() === 'android') {
+    await device.pressBack();
+  } else if (device.getPlatform() === 'ios') {
+    await element(by.traits(['button']))
+      .atIndex(0)
+      .tap();
+  }
+};
+
+const awaitClassicalEventBehavior = async () => {
+  if (device.getPlatform() === 'ios') {
+    await expect(
+      element(by.text('9. Chats | transitionStart | closing'))
+    ).toExist();
+    await expect(
+      element(by.text('10. Privacy | transitionStart | closing'))
+    ).toExist();
+    await expect(
+      element(by.text('11. Main | transitionStart | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('12. Chats | transitionEnd | closing'))
+    ).toExist();
+    await expect(
+      element(by.text('13. Privacy | transitionEnd | closing'))
+    ).toExist();
+    await expect(element(by.text('14. Privacy | beforeRemove'))).toExist();
+    await expect(element(by.text('15. Chats | beforeRemove'))).toExist();
+    await expect(
+      element(by.text('16. Main | transitionEnd | opening'))
+    ).toExist();
+  } else {
+    await expect(element(by.text('9. Privacy | beforeRemove'))).toExist();
+    await expect(element(by.text('10. Chats | beforeRemove'))).toExist();
+    await expect(
+      element(by.text('11. Main | transitionStart | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('12. Main | transitionEnd | opening'))
+    ).toExist();
+  }
+};
+
 describe('Events', () => {
   beforeEach(async () => {
     await device.reloadReactNative();
@@ -39,24 +83,7 @@ describe('Events', () => {
       ).tap();
     }
 
-    await expect(
-      element(by.text('9. Chats | transitionStart | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('10. Privacy | transitionStart | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('11. Main | transitionStart | opening'))
-    ).toExist();
-    await expect(
-      element(by.text('12. Chats | transitionEnd | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('13. Privacy | transitionEnd | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('14. Main | transitionEnd | opening'))
-    ).toExist();
+    await awaitClassicalEventBehavior();
   });
 
   it('should use "none" animation, go back from Chats using header button and run opening & closing events in correct order ', async () => {
@@ -75,24 +102,7 @@ describe('Events', () => {
       ).tap();
     }
 
-    await expect(
-      element(by.text('9. Chats | transitionStart | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('10. Privacy | transitionStart | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('11. Main | transitionStart | opening'))
-    ).toExist();
-    await expect(
-      element(by.text('12. Chats | transitionEnd | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('13. Privacy | transitionEnd | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('14. Main | transitionEnd | opening'))
-    ).toExist();
+    await awaitClassicalEventBehavior();
   });
 
   it('should use "slide_from_bottom" animation, go to Chats and run opening & closing events in correct order ', async () => {
@@ -139,83 +149,42 @@ describe('Events', () => {
       ).tap();
     }
 
-    await expect(
-      element(by.text('9. Chats | transitionStart | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('10. Privacy | transitionStart | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('11. Main | transitionStart | opening'))
-    ).toExist();
-    await expect(
-      element(by.text('12. Chats | transitionEnd | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('13. Privacy | transitionEnd | closing'))
-    ).toExist();
-    await expect(
-      element(by.text('14. Main | transitionEnd | opening'))
-    ).toExist();
+    await awaitClassicalEventBehavior();
   });
 
-  it('[Android] should go back from Chats using native way and run opening & closing events in correct order ', async () => {
-    // swipe to go back doesn't seem to work on iOS
-    if (device.getPlatform() !== 'android') return;
-
+  it('should go back from Chats using native way and run opening & closing events in correct order ', async () => {
     await element(by.id('root-screen-playground-Events')).tap();
 
     await element(by.id('events-go-to-chats')).tap();
 
-    await device.pressBack();
+    await pressBack();
 
-    await expect(
-      element(by.text('9. Main | transitionStart | opening'))
-    ).toExist();
-    await expect(
-      element(by.text('10. Main | transitionEnd | opening'))
-    ).toExist();
+    await awaitClassicalEventBehavior();
   });
 
-  it('[Android] should use "none" animation, go back from Chats using native way and run opening & closing events in correct order ', async () => {
-    // swipe to go back doesn't seem to work on iOS
-    if (device.getPlatform() !== 'android') return;
-
+  it('should use "none" animation, go back from Chats using native way and run opening & closing events in correct order ', async () => {
     await element(by.id('root-screen-playground-Events')).tap();
 
     await element(by.id('events-stack-animation-picker')).tap();
     await element(by.id('stack-animation-none')).tap();
 
     await element(by.id('events-go-to-chats')).tap();
 
-    await device.pressBack();
+    await pressBack();
 
-    await expect(
-      element(by.text('9. Main | transitionStart | opening'))
-    ).toExist();
-    await expect(
-      element(by.text('10. Main | transitionEnd | opening'))
-    ).toExist();
+    await awaitClassicalEventBehavior();
   });
 
-  it('[Android] should use "slide_from_bottom" animation, go back from Chats using native way and run opening & closing events in correct order ', async () => {
-    // swipe to go back doesn't seem to work on iOS
-    if (device.getPlatform() !== 'android') return;
-
+  it('should use "slide_from_bottom" animation, go back from Chats using native way and run opening & closing events in correct order ', async () => {
     await element(by.id('root-screen-playground-Events')).tap();
 
     await element(by.id('events-stack-animation-picker')).tap();
     await element(by.id('stack-animation-slide_from_bottom')).tap();
 
     await element(by.id('events-go-to-chats')).tap();
 
-    await device.pressBack();
+    await pressBack();
 
-    await expect(
-      element(by.text('9. Main | transitionStart | opening'))
-    ).toExist();
-    await expect(
-      element(by.text('10. Main | transitionEnd | opening'))
-    ).toExist();
+    await awaitClassicalEventBehavior();
   });
 });