[ui][Android] Refactor components to DSL pattern and add matchContents to HostView

.github/workflows/docs-pr.yml

@@ -52,13 +52,15 @@ jobs:
           NODE_ENV: production
         run: yarn lint --max-warnings 0
       - name: 💬 Lint Docs website content
-        uses: errata-ai/vale-action@reviewdog
+        uses: errata-ai/vale-action@v2.1.1
         with:
           version: 3.12.0
           reporter: github-pr-check
           files: 'docs/pages'
           vale_flags: '--config=./docs/.vale.ini'
           fail_on_error: true
+          # Override bundled reviewdog (0.17.0) to avoid 300-file diff limit
+          reviewdog_url: https://github.com/reviewdog/reviewdog/releases/download/v0.21.0/reviewdog_0.21.0_Linux_x86_64.tar.gz
       - name: 🏗️ Build Docs website
         run: yarn export-preview
         timeout-minutes: 20

.github/workflows/docs.yml

@@ -62,13 +62,15 @@ jobs:
           NODE_ENV: production
         run: yarn lint --max-warnings 0
       - name: 💬 Lint Docs website content
-        uses: errata-ai/vale-action@reviewdog
+        uses: errata-ai/vale-action@v2.1.1
         with:
           version: 3.12.0
           reporter: github-pr-check
           files: 'docs/pages'
           vale_flags: '--config=./docs/.vale.ini'
           fail_on_error: true
+          # Override bundled reviewdog (0.17.0) to avoid 300-file diff limit
+          reviewdog_url: https://github.com/reviewdog/reviewdog/releases/download/v0.21.0/reviewdog_0.21.0_Linux_x86_64.tar.gz
       - name: 🏗️ Build Docs website for deploy
         working-directory: docs
         run: yarn export

.github/workflows/ios-static-frameworks.yml

@@ -42,7 +42,8 @@ jobs:
       - name: 🍏 Build iOS Project
         working-directory: ./apps/bare-expo
         run: |
-          jq '.["ios.useFrameworks"] = "static"' ios/Podfile.properties.json > temp.json && mv temp.json ios/Podfile.properties.json
+          set -o pipefail
+          jq '.["ios.useFrameworks"] = "static" | .["ios.buildReactNativeFromSource"] = "true"' ios/Podfile.properties.json > temp.json && mv temp.json ios/Podfile.properties.json
           pod install --project-directory=ios
           xcodebuild -workspace ios/BareExpo.xcworkspace -scheme BareExpo -configuration Release -sdk iphonesimulator -derivedDataPath "ios/build" | xcpretty
       - name: 🔔 Notify on Slack

.github/workflows/test-suite.yml

@@ -176,17 +176,21 @@ jobs:
         env:
           MAESTRO_CLI_NO_ANALYTICS: 1
         timeout-minutes: 40
+      - name: 📦 Prepare testing artifacts
+        if: always()
+        run: |
+          # Rename .maestro to maestroArtifacts so it's not a hidden folder when downloaded locally
+          mv ~/.maestro ~/maestroArtifacts
       - name: 📸 Store testing artifacts
         if: always()
         uses: actions/upload-artifact@v4
         id: upload-artifacts
         with:
           name: bare-expo-artifacts-ios
           path: |
-            ~/.maestro/tests/**/*
+            ~/maestroArtifacts/tests/**/*
             ~/Library/Logs/maestro/**/*
           overwrite: true
-          include-hidden-files: true # .maestro is skipped otherwise
       - name: 🔗 Artifacts download URL
         if: always()
         run: |
@@ -342,14 +346,19 @@ jobs:
             # Run the actual tests
             ./scripts/start-android-e2e-test.ts --test
           working-directory: ./apps/bare-expo
+      - name: 📦 Prepare testing artifacts
+        if: always()
+        run: |
+          # Rename .maestro to maestroArtifacts so it's not a hidden folder when downloaded locally
+          mv ~/.maestro ~/maestroArtifacts
       - name: 📸 Store testing artifacts
         if: always()
         id: upload-artifacts
         uses: actions/upload-artifact@v4
         with:
           name: bare-expo-artifacts-android
           path: |
-            ~/.maestro/tests/**/*
+            ~/maestroArtifacts/tests/**/*
           overwrite: true
       - name: 🔗 Artifacts download URL
         if: always()

apps/bare-expo/MainNavigator.tsx

@@ -8,6 +8,7 @@ import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import { Platform } from 'react-native';
 import { TestStackNavigator } from 'test-suite/TestStackNavigator';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 type NavigationRouteConfigMap = React.ComponentType;
 
@@ -154,21 +155,23 @@ export default function MainNavigator() {
     return null;
   }
   return (
-    <NavigationContainer
-      linking={linking}
-      initialState={initialState}
-      onStateChange={(state) => {
-        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state)).catch(console.error);
-      }}>
-      <Switch.Navigator
-        screenOptions={{ headerShown: false }}
-        initialRouteName="main"
-        id={undefined}>
-        {Redirect && <Switch.Screen name="redirect" component={Redirect} />}
-        {Search && <Switch.Screen name="searchNavigator" component={Search} />}
-        <Switch.Screen name="main" component={TabNavigator} />
-      </Switch.Navigator>
-      <StatusBar style={themeName === 'light' ? 'dark' : 'light'} />
-    </NavigationContainer>
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <NavigationContainer
+        linking={linking}
+        initialState={initialState}
+        onStateChange={(state) => {
+          AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state)).catch(console.error);
+        }}>
+        <Switch.Navigator
+          screenOptions={{ headerShown: false }}
+          initialRouteName="main"
+          id={undefined}>
+          {Redirect && <Switch.Screen name="redirect" component={Redirect} />}
+          {Search && <Switch.Screen name="searchNavigator" component={Search} />}
+          <Switch.Screen name="main" component={TabNavigator} />
+        </Switch.Navigator>
+        <StatusBar style={themeName === 'light' ? 'dark' : 'light'} />
+      </NavigationContainer>
+    </GestureHandlerRootView>
   );
 }

apps/bare-expo/android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,7 @@
   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
   <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
+  <uses-permission android:name="android.permission.FOREGROUND_SERVICE_LOCATION"/>
   <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"/>
   <uses-permission android:name="android.permission.INTERNET"/>
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
@@ -30,6 +31,7 @@
     </intent>
   </queries>
   <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:requestLegacyExternalStorage="true" android:networkSecurityConfig="@xml/network_security_config" android:fullBackupContent="@xml/secure_store_backup_rules" android:dataExtractionRules="@xml/secure_store_data_extraction_rules" android:supportsRtl="true">
+    <meta-data android:name="expo.modules.location.foreground_service_icon" android:resource="@drawable/location_foreground_service_icon"/>
     <meta-data android:name="expo.modules.notifications.default_notification_color" android:resource="@color/notification_icon_color"/>
     <meta-data android:name="expo.modules.notifications.default_notification_icon" android:resource="@drawable/notification_icon"/>
     <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
@@ -42,7 +44,7 @@
         <action android:name="androidx.media3.session.MediaSessionService"/>
       </intent-filter>
     </service>
-    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:theme="@style/Theme.App.SplashScreen" android:windowSoftInputMode="adjustResize" android:exported="true" android:supportsPictureInPicture="true">
+    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode|smallestScreenSize" android:launchMode="singleTask" android:theme="@style/Theme.App.SplashScreen" android:windowSoftInputMode="adjustResize" android:exported="true" android:supportsPictureInPicture="true">
       <intent-filter>
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>

apps/bare-expo/android/app/src/main/java/dev/expo/payments/MainApplication.kt

@@ -20,7 +20,7 @@ class MainApplication : Application(), ReactApplication {
     ExpoReactHostFactory.getDefaultReactHost(
       context = applicationContext,
       packageList =
-        PackageList(this).packages.apply {
+        expo.modules.benchmark.withBenchmarkingPackages(PackageList(this).packages).apply {
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // add(MyReactNativePackage())
         }

apps/bare-expo/app.json

@@ -65,7 +65,8 @@
         "expo-location",
         {
           "isAndroidBackgroundLocationEnabled": true,
-          "isIosBackgroundLocationEnabled": true
+          "isIosBackgroundLocationEnabled": true,
+          "androidForegroundServiceIcon": "./assets/location_service_icon.png"
         }
       ],
       [

apps/bare-expo/e2e/README.md

@@ -6,6 +6,7 @@
 - `brew install oxipng` for image compression
 - run `yarn install` in `bare-expo/e2e/image-comparison`
 - (optional, recommended) Alignment with devices which are used in CI ([iOS](https://github.com/expo/expo/blob/051a306ce7c5b875f7398450e5aeec2e52e313ae/apps/bare-expo/scripts/start-ios-e2e-test.ts#L18), [Android](https://github.com/expo/expo/blob/051a306ce7c5b875f7398450e5aeec2e52e313ae/.github/actions/use-android-emulator/action.yml#L48)). This is necessary for assertions on what is visible on the screen and (especially) for view shots to match.
+- (optional, recommended) Build the iOS screen inspector - run `./scripts/build.sh` in `bare-expo/e2e/image-comparison/inspector`. You can learn more about the inspector in its [README.md](./image-comparison/inspector/README.md)
 - use the following commands to generate the Android emulator:
 
 ```bash

apps/bare-expo/e2e/_nested-flows/viewshot-comparison.yaml

@@ -14,6 +14,11 @@
 
 appId: dev.expo.Payments
 ---
+- extendedWaitUntil:
+    visible:
+      id: ${testID}
+    timeout: 10000
+
 - runScript:
     file: ./compare-images-http.js
     env:

apps/bare-expo/e2e/expo-video/fullscreen-test.yaml

@@ -0,0 +1,32 @@
+# Tests whether the fullscreen opens, and if appropriate events were sent
+appId: dev.expo.Payments
+jsEngine: graaljs
+---
+- openLink: bareexpo://components/video/fullscreen
+
+- tapOn: "Enter Fullscreen"
+- runFlow:
+      when:
+          platform: Android
+      commands:
+          # Dismiss the android system fullscreen instruction popup
+          - tapOn:
+                text: "Got it"
+                optional: true
+          - assertVisible:
+                id: "dev.expo.payments:id/exo_content_frame"
+- runFlow:
+      when:
+          platform: iOS
+      commands:
+          - assertVisible: "Video"
+
+- assertNotVisible: "Enter Fullscreen"
+- tapOn:
+    point: '${maestro.platform == "android" ? "94%,97%" : "11%,10%"}'
+    delay: 400
+    repeat: 2
+
+- assertVisible: "Enter Fullscreen"
+- assertVisible: "0 = onFullscreenEnter"
+- assertVisible: "1 = onFullscreenExit"

apps/bare-expo/e2e/expo-video/picture-in-picture-test.android.yaml

@@ -0,0 +1,28 @@
+# Tests whether the fullscreen opens, and if appropriate events were sent
+appId: dev.expo.Payments
+jsEngine: graaljs
+---
+- openLink: bareexpo://components/video/pip
+
+- tapOn:
+    text: 'e2e pause'
+- tapOn:
+    text: 'Enter Picture In Picture'
+# We cannot do a view-shot check while in pip, because the VideoView with testID is removed when entering.
+# We can be pretty sure we've successfully entered PiP when it's gone though
+- assertNotVisible:
+    id: 'pip-view'
+
+# Important! If you are running this locally and the test fails, it may mean that at some point you have manually shifted the pip window position or size.
+# The PiP window position/size is remembered across app and device restarts. So you may have to clean the emulator data to restore the original pip window position.
+- tapOn:
+    point: 68%,68%
+    repeat: 2
+    delay: 700
+# Make sure the view hierarchy was restored
+- runFlow:
+    file: ../_nested-flows/viewshot-comparison.yaml
+    env:
+      screenshotOutputPath: 'expo-video/screenshots/pip-1'
+      testID: 'pip-view'
+      mode: 'keep-originals'

apps/bare-expo/e2e/expo-video/playback-test.yaml

@@ -0,0 +1,42 @@
+appId: dev.expo.Payments
+jsEngine: graaljs
+---
+# when devving, start from different screen so state is reset
+#- openLink: bareexpo://components
+- openLink: bareexpo://components/video/events
+
+- assertVisible: 'source = Big Buck Bunny'
+- assertVisible: 'isPlaying = false'
+- assertVisible: 'isAtStart = true'
+- assertVisible: 'duration = 596'
+- assertVisible: 'currentTime = 0'
+- assertVisible: 'mimeType = video/avc'
+- assertVisible: 'isSupported = true'
+- assertVisible: 'bitratePositive = true'
+- assertVisible: 'volume = 1'
+- assertVisible: 'status = readyToPlay'
+- assertVisible: 'playbackRate = 1'
+- assertVisible: 'error = false'
+
+- tapOn: Play
+
+- assertVisible: 'isPlaying = true'
+- assertVisible: 'isAtStart = false'
+
+- tapOn: Pause
+- tapOn: Seek to 30s
+- assertVisible: 'currentTime = 30'
+- runFlow:
+    file: ../_nested-flows/viewshot-comparison.yaml
+    env:
+      screenshotOutputPath: 'expo-video/screenshots/playback-test-1'
+      testID: 'video-view'
+      mode: 'keep-originals'
+
+- tapOn: Trigger an Error
+
+- assertVisible: 'source = No title'
+- assertVisible: 'isPlaying = false'
+
+- assertVisible: 'status = error'
+- assertVisible: 'error = true'