feat: add hover support to web

src/components/TouchableRipple/Pressable.tsx

@@ -0,0 +1,35 @@
+import type * as React from 'react';
+import type {
+  PressableProps as PressableNativeProps,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { Pressable as PressableNative } from 'react-native';
+
+// This component is added to support type-safe hover and focus states on web
+// https://necolas.github.io/react-native-web/docs/pressable/
+
+export type PressableStateCallbackType = {
+  pressed: boolean;
+  focused: boolean;
+  hovered: boolean;
+};
+
+export type PressableProps = Omit<
+  PressableNativeProps,
+  'children' | 'style'
+> & {
+  children:
+    | React.ReactNode
+    | ((state: PressableStateCallbackType) => React.ReactNode)
+    | undefined;
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
+    | undefined;
+};
+
+export const Pressable: React.ForwardRefExoticComponent<
+  PressableProps & React.RefAttributes<View>
+> = PressableNative as any;

src/components/TouchableRipple/TouchableRipple.native.tsx

@@ -5,18 +5,20 @@ import {
   Platform,
   ViewStyle,
   StyleSheet,
-  Pressable,
   GestureResponderEvent,
 } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
+import type { InternalTheme } from '../../types';
+import type { PressableProps } from './Pressable';
+import { Pressable } from './Pressable';
 import type { ThemeProp } from '../../types';
 import { getTouchableRippleColors } from './utils';
 
 const ANDROID_VERSION_LOLLIPOP = 21;
 const ANDROID_VERSION_PIE = 28;
 
-export type Props = React.ComponentProps<typeof Pressable> & {
+type Props = PressableProps & {
   borderless?: boolean;
   background?: PressableAndroidRippleConfig;
   centered?: boolean;

src/components/TouchableRipple/TouchableRipple.tsx

@@ -2,17 +2,20 @@ import * as React from 'react';
 import {
   GestureResponderEvent,
   Platform,
-  Pressable,
   StyleProp,
   StyleSheet,
   ViewStyle,
 } from 'react-native';
 
+import Color from 'color';
+
 import { useInternalTheme } from '../../core/theming';
 import type { ThemeProp } from '../../types';
+import type { PressableProps, PressableStateCallbackType } from './Pressable';
+import { Pressable } from './Pressable';
 import { getTouchableRippleColors } from './utils';
 
-export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
+export type Props = PressableProps & {
   /**
    * Whether to render the ripple outside the view bounds.
    */
@@ -49,8 +52,13 @@ export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
   /**
    * Content of the `TouchableRipple`.
    */
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
+  children:
+    | ((state: PressableStateCallbackType) => React.ReactNode)
+    | React.ReactNode;
+  style?:
+    | StyleProp<ViewStyle>
+    | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>)
+    | undefined;
   /**
    * @optional
    */
@@ -100,16 +108,16 @@ const TouchableRipple = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
+  const { calculatedRippleColor } = getTouchableRippleColors({
+    theme,
+    rippleColor,
+  });
+  const hoverColor = Color(calculatedRippleColor).fade(0.5).rgb().string();
   const handlePressIn = (e: any) => {
     const { centered, onPressIn } = rest;
 
     onPressIn?.(e);
 
-    const { calculatedRippleColor } = getTouchableRippleColors({
-      theme,
-      rippleColor,
-    });
-
     const button = e.currentTarget;
     const style = window.getComputedStyle(button);
     const dimensions = button.getBoundingClientRect();
@@ -236,9 +244,20 @@ const TouchableRipple = ({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       disabled={disabled}
-      style={[styles.touchable, borderless && styles.borderless, style]}
+      style={(state) => [
+        styles.touchable,
+        borderless && styles.borderless,
+        // focused state is not ready yet: https://github.com/necolas/react-native-web/issues/1849
+        // state.focused && { backgroundColor: ___ },
+        state.hovered && { backgroundColor: hoverColor },
+        typeof style === 'function' ? style(state) : style,
+      ]}
     >
-      {React.Children.only(children)}
+      {(state) =>
+        React.Children.only(
+          typeof children === 'function' ? children(state) : children
+        )
+      }
     </Pressable>
   );
 };
@@ -251,7 +270,10 @@ TouchableRipple.supported = true;
 const styles = StyleSheet.create({
   touchable: {
     position: 'relative',
-    ...(Platform.OS === 'web' && { cursor: 'pointer' }),
+    ...(Platform.OS === 'web' && {
+      cursor: 'pointer',
+      transition: '150ms background-color',
+    }),
   },
   borderless: {
     overflow: 'hidden',