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,44 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { FlatList, GestureHandlerRootView } 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() {
+  return (
+    <GestureHandlerRootView>
+      <FlatList
+        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,36 @@
+import React, { useState } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { ScrollView, RefreshControl } from 'react-native-gesture-handler';
+
+export default function ScrollViewExample() {
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    setTimeout(() => {
+      setRefreshing(false);
+    }, 1500);
+  };
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.container}
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+      }>
+      <Text style={styles.text}>Pull down to refresh!</Text>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 24,
+  },
+  text: {
+    fontSize: 18,
+  },
+});

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

@@ -10,7 +10,7 @@
 import {
   GestureDetector,
   Gesture,
-  ScrollView,
+  LegacyScrollView,
 } from 'react-native-gesture-handler';
 import Animated, {
   useSharedValue,
@@ -27,7 +27,7 @@
 
 export default function CalculatorUI() {
   const outputOffset = useSharedValue(0);
   const [history, setHistory] = useState(Array<string>());
   const [expression, setExpression] = useState('');
 
   function measure({
@@ -60,7 +60,7 @@
 
 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 @@
       <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 @@
           })}
 
           <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/src/components/GestureButtons.tsx

@@ -12,14 +12,17 @@
 import type { NativeViewGestureHandlerPayload } from '../handlers/GestureHandlerEventPayload';
 import type {
   BaseButtonWithRefProps,
-  BaseButtonProps,
+  LegacyBaseButtonProps,
   RectButtonWithRefProps,
-  RectButtonProps,
+  LegacyRectButtonProps,
   BorderlessButtonWithRefProps,
-  BorderlessButtonProps,
+  LegacyBorderlessButtonProps,
 } from './GestureButtonsProps';
 
-export const RawButton = createNativeWrapper(GestureHandlerButton, {
+/**
+ * @deprecated use `RawButton` instead
+ */
+export const LegacyRawButton = createNativeWrapper(GestureHandlerButton, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: false,
 });
@@ -123,7 +126,7 @@
     const { rippleColor, style, ...rest } = this.props;
 
     return (
-      <RawButton
+      <LegacyRawButton
         ref={this.props.innerRef}
         rippleColor={rippleColor}
         style={[style, Platform.OS === 'ios' && { cursor: undefined }]}
@@ -138,15 +141,18 @@
 const AnimatedInnerBaseButton =
   Animated.createAnimatedComponent<typeof InnerBaseButton>(InnerBaseButton);
 
-export const BaseButton = React.forwardRef<
+/**
+ * @deprecated use `BaseButton` instead
+ */
+export const LegacyBaseButton = React.forwardRef<
   React.ComponentType,
-  Omit<BaseButtonProps, 'innerRef'>
+  Omit<LegacyBaseButtonProps, 'innerRef'>
 >((props, ref) => <InnerBaseButton innerRef={ref} {...props} />);
 
 const AnimatedBaseButton = React.forwardRef<
   React.ComponentType,
   Animated.AnimatedProps<BaseButtonWithRefProps>
 >((props, ref) => <AnimatedInnerBaseButton innerRef={ref} {...props} />);
 
 const btnStyles = StyleSheet.create({
   underlay: {
@@ -173,7 +179,7 @@
 
   private onActiveStateChange = (active: boolean) => {
     if (Platform.OS !== 'android') {
       this.opacity.setValue(active ? this.props.activeOpacity! : 0);
     }
 
     this.props.onActiveStateChange?.(active);
@@ -185,7 +191,7 @@
     const resolvedStyle = StyleSheet.flatten(style) ?? {};
 
     return (
-      <BaseButton
+      <LegacyBaseButton
         {...rest}
         ref={this.props.innerRef}
         style={resolvedStyle}
@@ -205,14 +211,17 @@
           ]}
         />
         {children}
-      </BaseButton>
+      </LegacyBaseButton>
     );
   }
 }
 
-export const RectButton = React.forwardRef<
+/**
+ * @deprecated use `RectButton` instead
+ */
+export const LegacyRectButton = React.forwardRef<
   React.ComponentType,
-  Omit<RectButtonProps, 'innerRef'>
+  Omit<LegacyRectButtonProps, 'innerRef'>
 >((props, ref) => <InnerRectButton innerRef={ref} {...props} />);
 
 class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps> {
@@ -251,9 +260,12 @@
   }
 }
 
-export const BorderlessButton = React.forwardRef<
+/**
+ * @deprecated use `BorderlessButton` instead
+ */
+export const LegacyBorderlessButton = React.forwardRef<
   React.ComponentType,
-  Omit<BorderlessButtonProps, 'innerRef'>
+  Omit<LegacyBorderlessButtonProps, 'innerRef'>
 >((props, ref) => <InnerBorderlessButton innerRef={ref} {...props} />);
 
-export { default as PureNativeButton } from './GestureHandlerButton';
+export { default as LegacyPureNativeButton } from './GestureHandlerButton';