feat: remove system animations on Android

Example/App.tsx

@@ -25,6 +25,7 @@ import StackReactNavigation4 from './src/screens/StackReactNavigation4';
 import Modals from './src/screens/Modals';
 import Orientation from './src/screens/Orientation';
 import SearchBar from './src/screens/SearchBar';
+import Events from './src/screens/Events';
 
 import { enableFreeze } from 'react-native-screens';
 
@@ -93,6 +94,11 @@ const SCREENS: Record<
     component: SearchBar,
     type: 'playground',
   },
+  Events: {
+    title: 'Events',
+    component: Events,
+    type: 'playground',
+  },
 };
 
 type RootStackParamList = {
@@ -108,7 +114,7 @@ interface MainScreenProps {
 }
 
 const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
-  <ScrollView>
+  <ScrollView testID="root-screen-examples-scrollview">
     <SafeAreaView>
       <SettingsSwitch
         style={styles.switch}
@@ -138,6 +144,7 @@ const MainScreen = ({ navigation }: MainScreenProps): JSX.Element => (
         .map((name) => (
           <ListItem
             key={name}
+            testID={`root-screen-playground-${name}`}
             title={SCREENS[name].title}
             onPress={() => navigation.navigate(name)}
           />

Example/e2e/config.json

@@ -7,5 +7,5 @@
   "reporters": ["detox/runners/jest/streamlineReporter"],
   "verbose": true,
   "preset": "ts-jest",
-  "setupTestFrameworkScriptFile": "./init.ts"
+  "setupFilesAfterEnv": ["./jest.setup.ts"]
 }

Example/e2e/examplesTests/events.e2e.ts

@@ -0,0 +1,220 @@
+import { device, expect, element, by } from 'detox';
+
+describe('Events', () => {
+  beforeEach(async () => {
+    await device.reloadReactNative();
+
+    await waitFor(element(by.id('root-screen-playground-Events')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(200, 'down');
+  });
+
+  it('should Events playground exist', async () => {
+    await expect(element(by.id('root-screen-playground-Events'))).toBeVisible();
+    element(by.id('root-screen-playground-Events')).tap();
+  });
+
+  it('should run transitionStart & transitionEnd opening events', async () => {
+    await element(by.id('root-screen-playground-Events')).tap();
+
+    await expect(
+      element(by.text('1. Main | transitionStart | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('2. Main | transitionEnd | opening'))
+    ).toExist();
+  });
+
+  it('should go back from Chats using header button 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();
+    if (device.getPlatform() === 'ios') {
+      await element(by.type('_UIButtonBarButton')).tap();
+    } else {
+      await element(
+        by.type('androidx.appcompat.widget.AppCompatImageButton')
+      ).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();
+  });
+
+  it('should use "none" animation, go back from Chats using header button 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();
+
+    if (device.getPlatform() === 'ios') {
+      await element(by.type('_UIButtonBarButton')).tap();
+    } else {
+      await element(
+        by.type('androidx.appcompat.widget.AppCompatImageButton')
+      ).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();
+  });
+
+  it('should use "slide_from_bottom" animation, go to Chats 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 expect(
+      element(by.text('3. Main | transitionStart | closing'))
+    ).toExist();
+    await expect(
+      element(by.text('4. Chats | transitionStart | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('5. Privacy | transitionStart | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('6. Main | transitionEnd | closing'))
+    ).toExist();
+    await expect(
+      element(by.text('7. Chats | transitionEnd | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('8. Privacy | transitionEnd | opening'))
+    ).toExist();
+  });
+
+  it('should use "slide_from_bottom" animation, go back from Chats using header button 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();
+
+    if (device.getPlatform() === 'ios') {
+      await element(by.type('_UIButtonBarButton')).tap();
+    } else {
+      await element(
+        by.type('androidx.appcompat.widget.AppCompatImageButton')
+      ).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();
+  });
+
+  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;
+
+    await element(by.id('root-screen-playground-Events')).tap();
+
+    await element(by.id('events-go-to-chats')).tap();
+
+    await device.pressBack();
+
+    await expect(
+      element(by.text('9. Main | transitionStart | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('10. Main | transitionEnd | opening'))
+    ).toExist();
+  });
+
+  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;
+
+    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 expect(
+      element(by.text('9. Main | transitionStart | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('10. Main | transitionEnd | opening'))
+    ).toExist();
+  });
+
+  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;
+
+    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 expect(
+      element(by.text('9. Main | transitionStart | opening'))
+    ).toExist();
+    await expect(
+      element(by.text('10. Main | transitionEnd | opening'))
+    ).toExist();
+  });
+});

Example/e2e/examplesTests/stackPresentation.e2e.ts

@@ -1,6 +1,6 @@
 import { device, expect, element, by } from 'detox';
 
-describe('Simple Native Stack', () => {
+describe('Simple Stack Presentation', () => {
   beforeAll(async () => {
     await device.reloadReactNative();
   });

Example/src/screens/Animations.tsx

@@ -189,7 +189,7 @@ const App = (): JSX.Element => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: 100,
+    paddingTop: 10,
   },
 });
 

Example/src/screens/BottomTabsAndStack.tsx

@@ -108,7 +108,7 @@ const NavigationTabsAndStack = (): JSX.Element => (
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingTop: 100,
+    paddingTop: 10,
   },
 });