Change components implementation

apps/common-app/App.tsx

@@ -76,6 +76,10 @@ import LongPressExample from './src/simple/longPress';
 import ManualExample from './src/simple/manual';
 import SimpleFling from './src/simple/fling';
 
+import FlatListExample from './src/components/flatlist';
+import ScrollViewExample from './src/components/scrollview';
+import ButtonsExample from './src/components/buttons';
+
 import { Icon } from '@swmansion/icons';
 
 interface Example {
@@ -114,6 +118,14 @@ const EXAMPLES: ExamplesSection[] = [
       },
     ],
   },
+  {
+    sectionTitle: 'Components',
+    data: [
+      { name: 'FlatList example', component: FlatListExample },
+      { name: 'ScrollView example', component: ScrollViewExample },
+      { name: 'Buttons example', component: ButtonsExample },
+    ],
+  },
   {
     sectionTitle: 'Basic examples',
     data: [

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

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import {
   createNativeWrapper,
-  DrawerLayoutAndroid,
+  LegacyDrawerLayoutAndroid,
 } from 'react-native-gesture-handler';
 
 const WrappedViewPagerAndroid = createNativeWrapper(ViewPagerAndroid, {
@@ -35,22 +35,22 @@ export default class Example extends Component {
     return (
       <WrappedViewPagerAndroid style={styles.container}>
         <View>
-          <DrawerLayoutAndroid
+          <LegacyDrawerLayoutAndroid
             drawerWidth={200}
             drawerPosition="left"
             renderNavigationView={() => navigationView}>
             <Page backgroundColor="gray" text="First 🙈" />
-          </DrawerLayoutAndroid>
+          </LegacyDrawerLayoutAndroid>
         </View>
         <Page backgroundColor="yellow" text="Second 🙉" />
         <Page backgroundColor="blue" text="Third 🙊" />
         <View>
-          <DrawerLayoutAndroid
+          <LegacyDrawerLayoutAndroid
             drawerWidth={200}
             drawerPosition="right"
             renderNavigationView={() => navigationView}>
             <Page backgroundColor="blue" text="Fourth 😎" />
-          </DrawerLayoutAndroid>
+          </LegacyDrawerLayoutAndroid>
         </View>
       </WrappedViewPagerAndroid>
     );

apps/common-app/src/components/buttons/index.tsx

@@ -0,0 +1,61 @@
+import { StyleSheet, Text } from 'react-native';
+import {
+  BaseButton,
+  BorderlessButton,
+  GestureHandlerRootView,
+  RectButton,
+} from 'react-native-gesture-handler';
+
+type ButtonWrapperProps = {
+  ButtonComponent:
+    | typeof BaseButton
+    | typeof RectButton
+    | typeof BorderlessButton;
+
+  color: string;
+};
+
+function ButtonWrapper({ ButtonComponent, color }: ButtonWrapperProps) {
+  return (
+    <ButtonComponent
+      style={[styles.button, { backgroundColor: color }]}
+      onPress={() => console.log(`[${ButtonComponent.name}] onPress`)}
+      onLongPress={() => {
+        console.log(`[${ButtonComponent.name}] onLongPress`);
+      }}>
+      <Text style={styles.buttonText}>{ButtonComponent.name}</Text>
+    </ButtonComponent>
+  );
+}
+
+export default function ButtonsExample() {
+  return (
+    <GestureHandlerRootView style={styles.container}>
+      <ButtonWrapper ButtonComponent={BaseButton} color="#2196F3" />
+      <ButtonWrapper ButtonComponent={RectButton} color="#f44336" />
+      <ButtonWrapper ButtonComponent={BorderlessButton} color="#ff9800" />
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  button: {
+    width: 200,
+    height: 50,
+    borderRadius: 15,
+
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+  },
+});

apps/common-app/src/components/flatlist/index.tsx

@@ -0,0 +1,64 @@
+import React, { useRef, useState } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import {
+  FlatList,
+  RefreshControl,
+  GestureHandlerRootView,
+  GHFlatListRef,
+} from 'react-native-gesture-handler';
+
+const DATA = Array.from({ length: 20 }, (_, i) => ({
+  id: i.toString(),
+  title: `Item ${i + 1}`,
+}));
+
+const Item = ({ title }: { title: string }) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+export default function FlatListExample() {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const ref = useRef<GHFlatListRef>(null);
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    console.log(ref.current);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 1500);
+  };
+
+  return (
+    <GestureHandlerRootView>
+      <FlatList
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        ref={ref}
+        data={DATA}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => <Item title={item.title} />}
+        contentContainerStyle={styles.container}
+      />
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 16,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    borderRadius: 8,
+  },
+  title: {
+    fontSize: 18,
+  },
+});

apps/common-app/src/components/scrollview/index.tsx

@@ -0,0 +1,61 @@
+import React, { useRef, useState } from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+import {
+  ScrollView,
+  RefreshControl,
+  GHScrollViewRef,
+} from 'react-native-gesture-handler';
+
+const DATA = Array.from({ length: 20 }, (_, i) => ({
+  id: i.toString(),
+  title: `Item ${i + 1}`,
+}));
+
+const Item = ({ title }: { title: string }) => (
+  <View style={styles.item}>
+    <Text style={styles.title}>{title}</Text>
+  </View>
+);
+
+export default function ScrollViewExample() {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const ref = useRef<GHScrollViewRef>(null);
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    console.log(ref.current);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 1500);
+  };
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.container}
+      ref={ref}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }>
+      {DATA.map((item) => (
+        <Item key={item.id} title={item.title} />
+      ))}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    borderRadius: 8,
+  },
+  title: {
+    fontSize: 18,
+  },
+});

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

@@ -10,7 +10,7 @@ import {
 import {
   GestureDetector,
   Gesture,
-  ScrollView,
+  LegacyScrollView,
 } from 'react-native-gesture-handler';
 import Animated, {
   useSharedValue,
@@ -60,7 +60,7 @@ interface OutputProps {
 
 function Output({ offset, expression, history }: OutputProps) {
   const layout = useRef({});
-  const scrollView = useRef<ScrollView>(null);
+  const scrollView = useRef<LegacyScrollView>(null);
   const drag = useSharedValue(0);
   const dragOffset = useSharedValue(0);
   const [opened, setOpened] = useState(false);
@@ -130,8 +130,8 @@ function Output({ offset, expression, history }: OutputProps) {
       <Animated.View
         style={[styles.output, translationStyle]}
         onLayout={measure}>
-        <ScrollView
-          ref={(ref: ScrollView) => {
+        <LegacyScrollView
+          ref={(ref: LegacyScrollView) => {
             if (!opened) {
               ref?.scrollToEnd({ animated: false });
             }
@@ -146,7 +146,7 @@ function Output({ offset, expression, history }: OutputProps) {
           })}
 
           <Expression expression={expression} />
-        </ScrollView>
+        </LegacyScrollView>
         <View style={styles.handleView}>
           <View style={styles.handle} />
         </View>

apps/common-app/src/recipes/panAndScroll/index.tsx

@@ -3,10 +3,10 @@ import { Animated, Dimensions, StyleSheet } from 'react-native';
 import {
   PanGestureHandler,
   TapGestureHandler,
-  ScrollView,
   State,
   PanGestureHandlerGestureEvent,
   TapGestureHandlerStateChangeEvent,
+  LegacyScrollView,
 } from 'react-native-gesture-handler';
 
 import { USE_NATIVE_DRIVER } from '../../config';
@@ -92,11 +92,11 @@ export default class Example extends Component {
     const tapRef = React.createRef<TapGestureHandler>();
     const panRef = React.createRef<PanGestureHandler>();
     return (
-      <ScrollView waitFor={[tapRef, panRef]}>
+      <LegacyScrollView waitFor={[tapRef, panRef]}>
         <LoremIpsum words={150} />
         <TapOrPan tapRef={tapRef} panRef={panRef} />
         <LoremIpsum words={150} />
-      </ScrollView>
+      </LegacyScrollView>
     );
   }
 }

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/core/GestureHandler.kt

@@ -36,30 +36,6 @@ open class GestureHandler {
   // Virtual Detector to which the gesture is assigned.
   var hostDetectorView: RNGestureHandlerDetectorView? = null
 
-  val viewForEvents: RNGestureHandlerDetectorView
-    get() {
-      assert(usesNativeOrVirtualDetector(actionType)) {
-        "[react-native-gesture-handler] `viewForEvents` can only be used with NativeDetector."
-      }
-
-      val detector = if (actionType ==
-        ACTION_TYPE_VIRTUAL_DETECTOR
-      ) {
-        this.hostDetectorView
-      } else if (this is NativeViewGestureHandler) {
-        this.view?.parent
-      } else {
-        view
-      }
-
-      if (detector !is RNGestureHandlerDetectorView) {
-        throw Error(
-          "[react-native-gesture-handler] Expected RNGestureHandlerDetectorView to be the target for the event.",
-        )
-      }
-
-      return detector
-    }
   var state = STATE_UNDETERMINED
     private set
   var x = 0f