[E2E] Add Detox tests

.github/workflows/e2e.yml

@@ -0,0 +1,98 @@
+name: E2E Test
+
+on:
+  pull_request:
+    paths:
+      - apps/expo-example/e2e/**
+      - apps/common-app/src/e2e_screens/**
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+concurrency:
+  group: e2e-app-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ios-e2e:
+    if: github.repository == 'software-mansion/react-native-gesture-handler'
+    runs-on: macos-26
+    env:
+      WORKING_DIRECTORY: apps/expo-example
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Use node 24
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: yarn
+
+      - name: Use latest stable Xcode
+        uses: maxim-lobanov/setup-xcode@v1
+        with:
+          xcode-version: '26.4.1'
+
+      - name: Install dependencies
+        run: yarn --immutable
+
+      - name: Setup Detox
+        run: brew tap wix/brew && brew install applesimutils && npm install -g detox-cli
+
+      - name: Build for iOS
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: yarn build-detox-ios
+
+      - name: Run tests on iOS
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: yarn test:ios
+
+  android-e2e:
+    if: github.repository == 'software-mansion/react-native-gesture-handler'
+    runs-on: ubuntu-latest
+    env:
+      WORKING_DIRECTORY: apps/expo-example
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+
+      - name: Use node 24
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: yarn
+
+      - name: Install emulator system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libpulse0
+
+      - name: Enable KVM
+        run: |
+          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+          sudo udevadm control --reload-rules
+          sudo udevadm trigger --name-match=kvm
+
+      - name: Install dependencies
+        run: yarn --immutable
+
+      - name: Setup Detox
+        run: npm install -g detox-cli
+
+      - name: Build for Android
+        working-directory: ${{ env.WORKING_DIRECTORY }}
+        run: yarn build-detox-android
+
+      - name: Run tests on Android
+        uses: reactivecircus/android-emulator-runner@v2
+        with:
+          api-level: 33
+          arch: x86_64
+          force-avd-creation: true
+          emulator-options: -no-window -gpu swiftshader_indirect -noaudio -no-boot-anim -camera-back none
+          disable-animations: true
+          avd-name: Pixel_9
+          working-directory: ${{ env.WORKING_DIRECTORY }}
+          script: adb devices && yarn test:android

.github/workflows/ios-build.yml

@@ -19,7 +19,7 @@ jobs:
   build:
     if: github.repository == 'software-mansion/react-native-gesture-handler'
 
-    runs-on: macos-14
+    runs-on: macos-26
     strategy:
       matrix:
         working-directory: [apps/basic-example, apps/expo-example]
@@ -34,7 +34,7 @@ jobs:
       - name: Use latest stable Xcode
         uses: maxim-lobanov/setup-xcode@v1
         with:
-          xcode-version: '16.1'
+          xcode-version: '26.4.1'
 
       - name: Use Node.js 24
         uses: actions/setup-node@v6

apps/basic-example/ios/Podfile.lock

@@ -1769,7 +1769,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
     - Yoga
-  - RNReanimated (4.3.0):
+  - RNReanimated (4.3.1):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1791,11 +1791,11 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
-    - RNReanimated/apple (= 4.3.0)
-    - RNReanimated/common (= 4.3.0)
+    - RNReanimated/apple (= 4.3.1)
+    - RNReanimated/common (= 4.3.1)
     - RNWorklets
     - Yoga
-  - RNReanimated/apple (4.3.0):
+  - RNReanimated/apple (4.3.1):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1819,7 +1819,7 @@ PODS:
     - ReactNativeDependencies
     - RNWorklets
     - Yoga
-  - RNReanimated/common (4.3.0):
+  - RNReanimated/common (4.3.1):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1843,7 +1843,7 @@ PODS:
     - ReactNativeDependencies
     - RNWorklets
     - Yoga
-  - RNWorklets (0.8.1):
+  - RNWorklets (0.8.3):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1865,10 +1865,10 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
-    - RNWorklets/apple (= 0.8.1)
-    - RNWorklets/common (= 0.8.1)
+    - RNWorklets/apple (= 0.8.3)
+    - RNWorklets/common (= 0.8.3)
     - Yoga
-  - RNWorklets/apple (0.8.1):
+  - RNWorklets/apple (0.8.3):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -1891,7 +1891,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - ReactNativeDependencies
     - Yoga
-  - RNWorklets/common (0.8.1):
+  - RNWorklets/common (0.8.3):
     - hermes-engine
     - RCTRequired
     - RCTTypeSafety
@@ -2224,10 +2224,10 @@ SPEC CHECKSUMS:
   ReactCommon: fe2a3af8975e63efa60f95fca8c34dc85deee360
   ReactNativeDependencies: 129d6b2e7ba29310ebb126db92070ec49cd882df
   RNGestureHandler: 4fa4214e42a7c452210a947270fa3552bf96517e
-  RNReanimated: 64f4b3b33b48b19e0ba76a352571b52b1e931981
-  RNWorklets: 533b896a04be761c26ec519014a6ccd0fac03781
+  RNReanimated: 07fe6682b1d90b9d536540614562850503c63dbb
+  RNWorklets: 2b1732dea513e38333481dc919029c1e14dc647d
   Yoga: e83c3121d079541e69f3c5c623faaaf933fb5812
 
-PODFILE CHECKSUM: ecce038d8e4749ee17b7dea28be0590cdc8b4836
+PODFILE CHECKSUM: c7c24b794ae37fda7472ce32e653711daa22b88c
 
 COCOAPODS: 1.15.2

apps/common-app/App.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @eslint-react/no-nested-component-definitions */
 /* eslint-disable @eslint-react/no-nested-components */
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { HeaderBackButton } from '@react-navigation/elements';
 import type { ParamListBase } from '@react-navigation/native';
 import { NavigationContainer } from '@react-navigation/native';
 import type {
@@ -43,6 +44,9 @@ export default function App() {
       <NavigationContainer>
         <Stack.Navigator
           screenOptions={{
+            headerLeft: (props) => (
+              <HeaderBackButton {...props} testID="back-to-home" />
+            ),
             cardStyle: {
               // It's important to set height for the screen, without it scroll doesn't work on web platform.
               height: Dimensions.get('window').height,
@@ -113,6 +117,7 @@ export default function App() {
     return (
       <View style={styles.container}>
         <ListWithHeader
+          scrollViewTestID="examples-list"
           style={styles.list}
           sections={showLegacyVersion ? OLD_EXAMPLES : NEW_EXAMPLES}
           keyExtractor={(example) => example.name}

apps/common-app/package.json

@@ -23,10 +23,11 @@
     "@react-navigation/stack": "^7.2.10",
     "@swmansion/icons": "^0.0.1",
     "react-native-gesture-handler": "workspace:*",
+    "react-native-pager-view": "^8.0.1",
     "react-native-reanimated": "^4.3.0",
     "react-native-safe-area-context": "^5.4.0",
     "react-native-screens": "^4.10.0",
-    "react-native-worklets": "^0.8.1"
+    "react-native-worklets": "^0.8.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -35,7 +36,6 @@
     "@react-native-community/cli": "18.0.1",
     "@react-native-community/cli-platform-android": "18.0.0",
     "@react-native-community/cli-platform-ios": "18.0.0",
-    "@react-native-community/viewpager": "5.0.11",
     "@react-native/babel-preset": "0.79.0",
     "@react-native/eslint-config": "0.79.0",
     "@react-native/metro-config": "0.79.0",

apps/common-app/src/ListWithHeader/ListWithHeader.tsx

@@ -19,9 +19,10 @@ import Header, { HEADER_HEIGHT } from './Header';
 
 const IS_ANDROID = Platform.OS === 'android';
 
-export function ListWithHeader<ItemT, SectionT>(
-  props: SectionListProps<ItemT, SectionT>
-) {
+export function ListWithHeader<ItemT, SectionT>({
+  scrollViewTestID,
+  ...props
+}: SectionListProps<ItemT, SectionT> & { scrollViewTestID?: string }) {
   const scrollOffset = useSharedValue(0);
   const scrollEnabled = useSharedValue(true);
   const androidDragDist = useSharedValue(0);
@@ -89,6 +90,7 @@ export function ListWithHeader<ItemT, SectionT>(
           renderScrollComponent={(props) => (
             <ScrollComponentWithOffset
               {...props}
+              testID={scrollViewTestID}
               scrollOffset={scrollOffset}
               dragGesture={dragGesture}
               animatedScrollEnabled={scrollEnabled}

apps/common-app/src/e2e_screens/gestures/pan.tsx

@@ -0,0 +1,101 @@
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import {
+  GestureDetector,
+  ScrollView,
+  usePanGesture,
+} from 'react-native-gesture-handler';
+
+export default function PanScreen() {
+  const [text, setText] = useState('');
+
+  const panGesture = usePanGesture({
+    onBegin: () => {
+      setText((prev) => prev + '1');
+    },
+    onActivate: () => {
+      setText((prev) => prev + '2');
+    },
+    onUpdate: () => {
+      setText((prev) => {
+        // Skip subsequent updates
+        if (prev[prev.length - 1] === '3') {
+          return prev;
+        }
+        return prev + '3';
+      });
+    },
+    onDeactivate: () => {
+      setText((prev) => prev + '4');
+    },
+    onFinalize: () => {
+      setText((prev) => prev + '5');
+    },
+    runOnJS: true,
+  });
+
+  return (
+    <View style={styles.container}>
+      <ScrollView style={styles.scrollContainer}>
+        <Text testID="state-indicator" style={styles.stateIndicator}>
+          {text}
+        </Text>
+      </ScrollView>
+      <View testID="container" style={styles.innerContainer}>
+        <GestureDetector gesture={panGesture}>
+          <View style={styles.gestureBox} testID="pan-box" />
+        </GestureDetector>
+      </View>
+      <View style={styles.buttonContainer}>
+        <Pressable
+          testID="reset"
+          style={styles.resetButton}
+          onPress={() => {
+            setText('');
+          }}>
+          <Text>Reset</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContainer: {
+    height: 50,
+    maxHeight: 50,
+  },
+  innerContainer: {
+    flex: 1,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  stateIndicator: {
+    fontSize: 15,
+    alignSelf: 'flex-start',
+  },
+  gestureBox: {
+    width: 120,
+    height: 120,
+    borderRadius: 20,
+    backgroundColor: '#4ecdc4',
+  },
+  buttonContainer: {
+    height: 60,
+    maxHeight: 60,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  resetButton: {
+    width: 120,
+    height: 40,
+    borderRadius: 20,
+    backgroundColor: 'royalblue',
+
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

apps/common-app/src/legacy/basic/pagerAndDrawer/index.android.tsx

@@ -1,12 +1,12 @@
-import ViewPagerAndroid from '@react-native-community/viewpager';
 import React, { Component } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import {
   legacy_createNativeWrapper,
   LegacyDrawerLayoutAndroid,
 } from 'react-native-gesture-handler';
+import PagerView from 'react-native-pager-view';
 
-const WrappedViewPagerAndroid = legacy_createNativeWrapper(ViewPagerAndroid, {
+const WrappedViewPagerAndroid = legacy_createNativeWrapper(PagerView, {
   disallowInterruption: true,
 });
 

apps/common-app/src/new_api/index.tsx

@@ -1,4 +1,5 @@
 import type { ExamplesSection } from '../common';
+import panE2E from '../e2e_screens/gestures/pan';
 import EmptyExample from '../empty';
 import CameraExample from './complicated/camera';
 import ChatHeadsExample from './complicated/chat_heads';
@@ -134,4 +135,8 @@ export const NEW_EXAMPLES: ExamplesSection[] = [
       },
     ],
   },
+  {
+    sectionTitle: 'E2E Tests',
+    data: [{ name: 'Pan Gesture', component: panE2E }],
+  },
 ];