feat: GenericPressable prop to customize the component wrapping int…

…eractive views Also, drop `Pressable` in favor of `TouchableNativeFeedback` and `TouchableHighlight` for RN retro-compatibility. Fix #472
meliorence · Jun 4, 2021 · 707374a · 707374a
1 parent 51e962f
commit 707374a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 26 deletions.
diff --git a/packages/render-html/src/GenericPressable.tsx b/packages/render-html/src/GenericPressable.tsx
@@ -1,40 +1,51 @@
 import React, { PropsWithChildren } from 'react';
 import {
-  StyleSheet,
-  Pressable,
-  PressableProps,
-  StyleProp,
-  Platform
+  Platform,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  View
 } from 'react-native';
 import { DEFAULT_PRESSABLE_RIPPLE_COLOR } from './constants';
-
-const styles = StyleSheet.create({
-  pressed: {
-    opacity: Platform.select({ default: 0.8 })
-  }
-});
-
-export interface GenericPressableProps extends PressableProps {
-  style?: StyleProp<any>;
-  borderless?: boolean;
-}
+import { useSharedProps } from './context/SharedPropsProvider';
+import { GenericPressableProps } from './shared-types';
 
 export default function GenericPressable({
-  onPress,
   style,
   children,
-  hitSlop,
   borderless = false,
   ...otherProps
 }: PropsWithChildren<GenericPressableProps>) {
+  const {
+    pressableHightlightColor = DEFAULT_PRESSABLE_RIPPLE_COLOR,
+    GenericPressable: UserProvidedPressable
+  } = useSharedProps();
+  if (UserProvidedPressable) {
+    return (
+      <UserProvidedPressable style={style} {...(otherProps as any)}>
+        {children}
+      </UserProvidedPressable>
+    );
+  }
+  if (Platform.OS === 'android') {
+    return (
+      <TouchableNativeFeedback
+        useForeground
+        background={TouchableNativeFeedback.Ripple(
+          pressableHightlightColor,
+          borderless
+        )}
+        style={style}
+        {...(otherProps as any)}>
+        <View>{children}</View>
+      </TouchableNativeFeedback>
+    );
+  }
   return (
-    <Pressable
-      android_ripple={{ borderless, color: DEFAULT_PRESSABLE_RIPPLE_COLOR }}
-      style={({ pressed }) => [style, pressed && styles.pressed]}
-      onPress={onPress}
-      hitSlop={hitSlop}
-      {...otherProps}>
-      {children}
-    </Pressable>
+    <TouchableHighlight
+      underlayColor={pressableHightlightColor}
+      style={style}
+      {...(otherProps as any)}>
+      <View>{children}</View>
+    </TouchableHighlight>
   );
 }
diff --git a/packages/render-html/src/shared-types.ts b/packages/render-html/src/shared-types.ts
@@ -1,8 +1,10 @@
 import {
+  AccessibilityProps,
   GestureResponderEvent,
   StyleProp,
   TextProps,
   TextStyle,
+  TouchableHighlightProps,
   ViewProps,
   ViewStyle
 } from 'react-native';
@@ -32,6 +34,12 @@ export interface ImageDimensions {
   height: number;
 }
 
+export interface GenericPressableProps extends AccessibilityProps {
+  style?: StyleProp<ViewStyle>;
+  borderless?: boolean;
+  onPress?: TouchableHighlightProps['onPress'];
+}
+
 export interface HtmlAttributesDictionary {
   [attribute: string]: string;
 }
@@ -151,6 +159,15 @@ export interface RenderHTMLSharedProps<
    * See [@native-html/plugins](/~https://github.com/native-html/plugins).
    */
   WebView?: ComponentType<any>;
+  /**
+   * A component used to wrap pressable elements (e.g. when provided `onPress`).
+   * Note that textual elements will not be wrapped; `TextProps.onPress` will
+   * be used instead.
+   *
+   * @remarks
+   * Changes to this prop will cause a react tree update. Always memoize it.
+   */
+  GenericPressable?: ComponentType<GenericPressableProps>;
   /**
    * Set custom markers from a TNode and all its descendants. Markers will be
    * accessible in custom renderers via `markers` prop.