chore: wrap TouchableRipple in forwardRef

callstack · Nov 20, 2023 · b2874d4 · b2874d4
1 parent e7df069
commit b2874d4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 25 deletions.
diff --git a/src/components/TouchableRipple/TouchableRipple.native.tsx b/src/components/TouchableRipple/TouchableRipple.native.tsx
@@ -16,6 +16,7 @@ import { getTouchableRippleColors } from './utils';
 import { Settings, SettingsContext } from '../../core/settings';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 
 const ANDROID_VERSION_LOLLIPOP = 21;
@@ -37,17 +38,20 @@ export type Props = PressableProps & {
   theme?: ThemeProp;
 };
 
-const TouchableRipple = ({
-  style,
-  background,
-  borderless = false,
-  disabled: disabledProp,
-  rippleColor,
-  underlayColor,
-  children,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
+const TouchableRipple = (
+  {
+    style,
+    background,
+    borderless = false,
+    disabled: disabledProp,
+    rippleColor,
+    underlayColor,
+    children,
+    theme: themeOverrides,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>
+) => {
   const theme = useInternalTheme(themeOverrides);
   const { rippleEffectEnabled } = React.useContext<Settings>(SettingsContext);
 
@@ -88,6 +92,7 @@ const TouchableRipple = ({
     return (
       <Pressable
         {...rest}
+        ref={ref}
         disabled={disabled}
         style={[borderless && styles.overflowHidden, style]}
         android_ripple={androidRipple}
@@ -100,6 +105,7 @@ const TouchableRipple = ({
   return (
     <Pressable
       {...rest}
+      ref={ref}
       disabled={disabled}
       style={[borderless && styles.overflowHidden, style]}
     >
@@ -134,4 +140,6 @@ const styles = StyleSheet.create({
   },
 });
 
-export default TouchableRipple;
+const Component = forwardRef(TouchableRipple);
+
+export default Component as typeof Component & { supported: boolean };
diff --git a/src/components/TouchableRipple/TouchableRipple.tsx b/src/components/TouchableRipple/TouchableRipple.tsx
@@ -5,6 +5,7 @@ import {
   Platform,
   StyleProp,
   StyleSheet,
+  View,
   ViewStyle,
 } from 'react-native';
 
@@ -16,6 +17,7 @@ import { getTouchableRippleColors } from './utils';
 import { Settings, SettingsContext } from '../../core/settings';
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 
 export type Props = PressableProps & {
@@ -101,17 +103,20 @@ export type Props = PressableProps & {
  *
  * @extends Pressable props https://reactnative.dev/docs/Pressable#props
  */
-const TouchableRipple = ({
-  style,
-  background: _background,
-  borderless = false,
-  disabled: disabledProp,
-  rippleColor,
-  underlayColor: _underlayColor,
-  children,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
+const TouchableRipple = (
+  {
+    style,
+    background: _background,
+    borderless = false,
+    disabled: disabledProp,
+    rippleColor,
+    underlayColor: _underlayColor,
+    children,
+    theme: themeOverrides,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>
+) => {
   const theme = useInternalTheme(themeOverrides);
   const { calculatedRippleColor } = getTouchableRippleColors({
     theme,
@@ -267,6 +272,7 @@ const TouchableRipple = ({
   return (
     <Pressable
       {...rest}
+      ref={ref}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       disabled={disabled}
@@ -287,7 +293,6 @@ const TouchableRipple = ({
     </Pressable>
   );
 };
-
 /**
  * Whether ripple effect is supported.
  */
@@ -306,4 +311,6 @@ const styles = StyleSheet.create({
   },
 });
 
-export default TouchableRipple;
+const Component = forwardRef(TouchableRipple);
+
+export default Component as typeof Component & { supported: boolean };