Merge branch 'main' into @mbert/docs-components

Author: m-bert

.eslintrc.json

@@ -45,6 +45,7 @@
     "@typescript-eslint/ban-types": "warn",
     "@typescript-eslint/consistent-type-imports": "error",
     "@typescript-eslint/consistent-type-exports": "error",
+    "@typescript-eslint/no-unsafe-enum-comparison": "off",
 
     // common
     "@typescript-eslint/explicit-module-boundary-types": "off",

.github/workflows/android-build.yml

@@ -6,6 +6,9 @@ on:
       - .github/workflows/android-build.yml
       - packages/react-native-gesture-handler/android/**
       - apps/basic-example/android/**
+      - apps/basic-example/package.json
+      - rnrepo.config.json
+      - yarn.lock
   push:
     branches:
       - main
@@ -45,4 +48,4 @@ jobs:
 
       - name: Build app
         working-directory: ${{ matrix.working-directory }}/android
-        run: ./gradlew assembleDebug --console=plain -PreactNativeArchitectures=arm64-v8a
+        run: ./gradlew :app:assembleDebug --console=plain -PreactNativeArchitectures=arm64-v8a

.github/workflows/ios-build.yml

@@ -7,6 +7,9 @@ on:
       - packages/react-native-gesture-handler/RNGestureHandler.podspec
       - packages/react-native-gesture-handler/apple/**
       - apps/basic-example/ios/**
+      - apps/basic-example/package.json
+      - rnrepo.config.json
+      - yarn.lock
   push:
     branches:
       - main

apps/basic-example/android/app/build.gradle

@@ -2,6 +2,21 @@ apply plugin: "com.android.application"
 apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 
+def isCIEnabled() {
+    return ["1", "true"].contains(System.getenv("CI")?.toLowerCase())
+}
+
+def isRNRepoEnabled() {
+    // return false // Uncomment to disable RNRepo locally
+    return System.getenv("DISABLE_RNREPO") == null
+}
+
+// Use RNRepo in CI builds. 
+// Set DISABLE_RNREPO to any value to disable RNRepo.
+if (isCIEnabled() && isRNRepoEnabled()) {
+    apply plugin: "org.rnrepo.tools.prebuilds-plugin"
+}
+
 /**
  * This is the configuration block to customize your React Native Android app.
  * By default you don't need to apply any configuration, just uncomment the lines you need.

apps/basic-example/android/build.gradle

@@ -12,10 +12,22 @@ buildscript {
         google()
         mavenCentral()
     }
+    // RNRepo plugin classpath for CI builds (plugin applied in app/build.gradle).
+    // To disable RNRepo support, set DISABLE_RNREPO environment variable to ANY value.
+    def rnrepoClasspath = {
+        def rnrepoDir = new File(
+            providers.exec {
+                workingDir(rootDir)
+                commandLine("node", "--print", "require.resolve('@rnrepo/build-tools/package.json')")
+            }.standardOutput.asText.get().trim()
+        ).getParentFile().absolutePath
+        return fileTree(dir: "${rnrepoDir}/gradle-plugin/build/libs", include: ["prebuilds-plugin.jar"])
+    }
     dependencies {
         classpath("com.android.tools.build:gradle")
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
+        classpath rnrepoClasspath()
     }
     allprojects {
         project.pluginManager.withPlugin("com.facebook.react") {

apps/basic-example/ios/Podfile

@@ -5,6 +5,24 @@ require Pod::Executable.execute_command('node', ['-p',
     {paths: ["../../../node_modules"]},
   )', __dir__]).strip
 
+def is_ci_enabled?
+  %w[1 true].include?(ENV['CI'].to_s.downcase)
+end
+
+# ENV['DISABLE_RNREPO'] = "1" # Uncomment to disable RNRepo even in CI
+def is_rnrepo_enabled?
+  ENV['DISABLE_RNREPO'].nil?
+end
+
+# Use RNRepo in CI builds. Set DISABLE_RNREPO to any value to disable RNRepo.
+if is_ci_enabled? && is_rnrepo_enabled?
+  require Pod::Executable.execute_command('node', ['-p',
+    'require.resolve(
+      "@rnrepo/build-tools/cocoapods-plugin/lib/plugin.rb",
+      {paths: [process.argv[1]]},
+    )', __dir__]).strip
+end
+
 require_relative '../../../scripts/clangd-add-xcode-step.rb'
 
 ENV['GH_EXAMPLE_APP_NAME'] = 'BasicExample'
@@ -28,6 +46,9 @@ target 'BasicExample' do
   )
 
   post_install do |installer|
+    if is_ci_enabled? && is_rnrepo_enabled?
+      rnrepo_post_install(installer)
+    end
     react_native_post_install(
       installer,
       config[:reactNativePath],

apps/basic-example/package.json

@@ -35,6 +35,7 @@
     "@react-native/jest-preset": "0.85.0",
     "@react-native/metro-config": "0.85.0",
     "@react-native/typescript-config": "0.85.0",
+    "@rnrepo/build-tools": "~0.1.3-beta.0",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.2.0",
     "@types/react-test-renderer": "^19.1.0",

apps/common-app/App.tsx

@@ -1,3 +1,5 @@
+/* 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 type { ParamListBase } from '@react-navigation/native';
 import { NavigationContainer } from '@react-navigation/native';
@@ -11,8 +13,8 @@ import { useEffect, useState } from 'react';
 import { Dimensions, Platform, StyleSheet, Text, View } from 'react-native';
 import {
   GestureHandlerRootView,
-  RectButton,
   Switch,
+  Touchable,
 } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -123,7 +125,7 @@ export default function App() {
             <MainScreenItem
               name={item.name}
               onPressItem={(name) => navigate(navigation, name)}
-              enabled={!item.unsupportedPlatforms?.has(Platform.OS)}
+              disabled={!!item.unsupportedPlatforms?.has(Platform.OS)}
             />
           )}
           renderSectionHeader={({ section: { sectionTitle } }) => (
@@ -156,7 +158,9 @@ export default function App() {
     }
     return (
       <View style={styles.settings}>
-        <RectButton
+        <Touchable
+          androidRipple={{}}
+          activeUnderlayOpacity={Platform.OS !== 'android' ? 0.1 : 0}
           style={styles.settingsButton}
           onPress={() => {
             updateKeepSetting(!openLastExample);
@@ -175,8 +179,10 @@ export default function App() {
               }}
             />
           </View>
-        </RectButton>
-        <RectButton
+        </Touchable>
+        <Touchable
+          androidRipple={{}}
+          activeUnderlayOpacity={Platform.OS !== 'android' ? 0.1 : 0}
           style={styles.settingsButton}
           onPress={() => {
             updateVersionSetting(!showLegacyVersion);
@@ -195,28 +201,34 @@ export default function App() {
               }}
             />
           </View>
-        </RectButton>
+        </Touchable>
       </View>
     );
   }
 
   interface MainScreenItemProps {
     name: string;
     onPressItem: (name: string) => void;
-    enabled: boolean;
+    disabled: boolean;
   }
 
-  function MainScreenItem({ name, onPressItem, enabled }: MainScreenItemProps) {
+  function MainScreenItem({
+    name,
+    onPressItem,
+    disabled,
+  }: MainScreenItemProps) {
     return (
-      <RectButton
-        enabled={enabled}
-        style={[styles.button, !enabled && styles.unavailableExample]}
+      <Touchable
+        disabled={disabled}
+        style={[styles.button, disabled && styles.unavailableExample]}
+        androidRipple={{}}
+        activeUnderlayOpacity={Platform.OS !== 'android' ? 0.1 : 0}
         onPress={() => onPressItem(name)}>
         <Text style={styles.text}>{name}</Text>
-        {Platform.OS !== 'macos' && enabled && (
+        {Platform.OS !== 'macos' && !disabled && (
           <Icon name="chevron-small-right" size={24} color="#bbb" />
         )}
-      </RectButton>
+      </Touchable>
     );
   }
 }

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

@@ -12,6 +12,7 @@ export default function NestedTouchablesExample() {
   const [log, setLog] = useState<string[]>([]);
 
   const pushLog = (message: string) => {
+    console.log(message);
     setLog((prev) =>
       [...prev, `[${new Date().toLocaleTimeString()}] ${message}`].slice(-6)
     );
@@ -20,11 +21,13 @@ export default function NestedTouchablesExample() {
   const outerTap = useTapGesture({
     runOnJS: true,
     onActivate: () => pushLog('outer tap gesture'),
+    testID: 'outer-tap',
   });
 
   const innerTap = useTapGesture({
     runOnJS: true,
     onActivate: () => pushLog('inner tap gesture'),
+    testID: 'inner-tap',
   });
 
   return (
@@ -40,6 +43,11 @@ export default function NestedTouchablesExample() {
 
           <Touchable
             style={[styles.layer, styles.outerTouchable]}
+            testID="outer-touchable"
+            activeUnderlayOpacity={0.3}
+            onPressIn={() => pushLog('outer press in')}
+            onPressOut={() => pushLog('outer press out')}
+            onLongPress={() => pushLog('outer long press')}
             onPress={() => pushLog('outer Touchable')}>
             <Text style={styles.layerLabel}>Outer Touchable</Text>
 
@@ -49,6 +57,11 @@ export default function NestedTouchablesExample() {
 
                 <Touchable
                   style={[styles.layer, styles.innerTouchable]}
+                  testID="inner-touchable"
+                  activeUnderlayOpacity={0.3}
+                  onPressIn={() => pushLog('inner press in')}
+                  onPressOut={() => pushLog('inner press out')}
+                  onLongPress={() => pushLog('inner long press')}
                   onPress={() => pushLog('inner Touchable')}>
                   <Text style={styles.layerLabel}>Inner Touchable</Text>
                 </Touchable>

apps/expo-example/app.config.js

@@ -46,6 +46,7 @@ export default {
           ],
         },
       ],
+      "@rnrepo/expo-config-plugin",
     ],
   },
 };