fix: support ReactNode children in TouchableRipple

Author: skainguyen1412

src/components/TouchableRipple/TouchableRipple.native.tsx

@@ -10,7 +10,7 @@ import {
   ColorValue,
 } from 'react-native';
 
-import type { PressableProps } from './Pressable';
+import type { PressableProps, PressableStateCallbackType } from './Pressable';
 import { Pressable } from './Pressable';
 import { getTouchableRippleColors } from './utils';
 import { Settings, SettingsContext } from '../../core/settings';
@@ -33,7 +33,9 @@ export type Props = PressableProps & {
   onPressOut?: (e: GestureResponderEvent) => void;
   rippleColor?: ColorValue;
   underlayColor?: string;
-  children: React.ReactNode;
+  children:
+    | ((state: PressableStateCallbackType) => React.ReactNode)
+    | React.ReactNode;
   style?: StyleProp<ViewStyle>;
   theme?: ThemeProp;
 };
@@ -73,6 +75,18 @@ const TouchableRipple = (
       underlayColor,
     });
 
+  const getStyle = (state: unknown) => [
+    borderless && styles.overflowHidden,
+    typeof style === 'function'
+      ? (style as (state: unknown) => StyleProp<ViewStyle>)(state)
+      : style,
+  ];
+
+  const getChildren = (state: unknown) =>
+    typeof children === 'function'
+      ? (children as (state: unknown) => React.ReactNode)(state)
+      : children;
+
   // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
   // https://github.com/facebook/react-native/issues/6480
   const useForeground =
@@ -94,24 +108,19 @@ const TouchableRipple = (
         {...rest}
         ref={ref}
         disabled={disabled}
-        style={[borderless && styles.overflowHidden, style]}
+        style={getStyle}
         android_ripple={androidRipple}
       >
-        {React.Children.only(children)}
+        {getChildren}
       </Pressable>
     );
   }
 
   return (
-    <Pressable
-      {...rest}
-      ref={ref}
-      disabled={disabled}
-      style={[borderless && styles.overflowHidden, style]}
-    >
-      {({ pressed }) => (
+    <Pressable {...rest} ref={ref} disabled={disabled} style={getStyle}>
+      {(state) => (
         <>
-          {pressed && rippleEffectEnabled && (
+          {state.pressed && rippleEffectEnabled && (
             <View
               testID="touchable-ripple-underlay"
               style={[
@@ -120,7 +129,7 @@ const TouchableRipple = (
               ]}
             />
           )}
-          {React.Children.only(children)}
+          {getChildren(state)}
         </>
       )}
     </Pressable>

src/components/TouchableRipple/TouchableRipple.tsx

@@ -286,11 +286,7 @@ const TouchableRipple = (
         typeof style === 'function' ? style(state) : style,
       ]}
     >
-      {(state) =>
-        React.Children.only(
-          typeof children === 'function' ? children(state) : children
-        )
-      }
+      {(state) => (typeof children === 'function' ? children(state) : children)}
     </Pressable>
   );
 };

src/components/__tests__/TouchableRipple.test.tsx

@@ -42,6 +42,55 @@ describe('TouchableRipple', () => {
     expect(onPress).not.toHaveBeenCalled();
   });
 
+  it('supports children as a function', () => {
+    const children = ({ pressed }: { pressed: boolean }) => (
+      <Text>{pressed ? 'Pressed' : 'Button'}</Text>
+    );
+
+    const { getByText } = render(
+      <TouchableRipple onPress={jest.fn()}>{children}</TouchableRipple>
+    );
+
+    expect(getByText('Button')).toBeTruthy();
+  });
+
+  it('supports children as an array of nodes', () => {
+    const { getByText } = render(
+      <TouchableRipple onPress={jest.fn()}>
+        {[<Text key="a">Button A</Text>, <Text key="b">Button B</Text>]}
+      </TouchableRipple>
+    );
+
+    expect(getByText('Button A')).toBeTruthy();
+    expect(getByText('Button B')).toBeTruthy();
+  });
+
+  it('supports function children returning an array of nodes', () => {
+    const children = ({ pressed }: { pressed: boolean }) => [
+      <Text key="a">{pressed ? 'Pressed A' : 'Button A'}</Text>,
+      <Text key="b">{pressed ? 'Pressed B' : 'Button B'}</Text>,
+    ];
+
+    const { getByText } = render(
+      <TouchableRipple onPress={jest.fn()}>{children}</TouchableRipple>
+    );
+
+    expect(getByText('Button A')).toBeTruthy();
+    expect(getByText('Button B')).toBeTruthy();
+  });
+
+  it('supports style as a function', () => {
+    const style = jest.fn(() => ({ opacity: 0.5 }));
+
+    render(
+      <TouchableRipple onPress={jest.fn()} style={style as any}>
+        <Text>Button</Text>
+      </TouchableRipple>
+    );
+
+    expect(style).toHaveBeenCalled();
+  });
+
   describe('on iOS', () => {
     Platform.OS = 'ios';