feat(tooltip): modernize Tooltip to Material Design 3

docs/src/components/BannerExample.tsx

@@ -6,8 +6,8 @@ import { BrowserOnly } from '@rspress/core/runtime';
 import {
   Avatar,
   Button,
-  DarkTheme,
   FAB,
+  DarkTheme,
   LightTheme,
   ProgressBar,
   Provider,

example/src/Examples/FABExample.tsx

@@ -1,17 +1,24 @@
 import * as React from 'react';
-import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
-import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import {
+  FlatList,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native';
 
 import {
   Chip,
   Divider,
   FAB,
+  FABSize,
+  FABVariant,
   List,
   Switch,
   Text,
   useTheme,
 } from 'react-native-paper';
-import type { FABSize, FABVariant } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 type FabType = 'icon' | 'extended' | 'extendedTransforming' | 'menu';

example/src/Examples/TooltipExample.tsx

@@ -6,6 +6,7 @@ import {
   Appbar,
   Avatar,
   Banner,
+  Button,
   Chip,
   FAB,
   IconButton,
@@ -46,17 +47,28 @@ const TooltipExample = () => {
       header: () => (
         <Appbar.Header elevated>
           <Tooltip title="Go back">
-            <Appbar.BackAction onPress={() => navigation.goBack()} />
+            {(props) => (
+              <Appbar.BackAction
+                {...props}
+                onPress={() => navigation.goBack()}
+              />
+            )}
           </Tooltip>
           <Appbar.Content title="Tooltips" />
           <Tooltip title="Print ⌘ + P">
-            <Appbar.Action icon="printer" onPress={() => {}} />
+            {(props) => (
+              <Appbar.Action {...props} icon="printer" onPress={() => {}} />
+            )}
           </Tooltip>
           <Tooltip title="Search">
-            <Appbar.Action icon="magnify" onPress={() => {}} />
+            {(props) => (
+              <Appbar.Action {...props} icon="magnify" onPress={() => {}} />
+            )}
           </Tooltip>
           <Tooltip title="More options">
-            <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
+            {(props) => (
+              <Appbar.Action {...props} icon={MORE_ICON} onPress={() => {}} />
+            )}
           </Tooltip>
         </Appbar.Header>
       ),
@@ -83,11 +95,14 @@ const TooltipExample = () => {
                 enterTouchDelay={transport.enterTouchDelay}
                 leaveTouchDelay={transport.leaveTouchDelay}
               >
-                <IconButton
-                  icon={transport.title.split(' ')[0].toLowerCase()}
-                  size={24}
-                  onPress={() => {}}
-                />
+                {(props) => (
+                  <IconButton
+                    {...props}
+                    icon={transport.title.split(' ')[0].toLowerCase()}
+                    size={24}
+                    onPress={() => {}}
+                  />
+                )}
               </Tooltip>
             ))}
           </View>
@@ -99,57 +114,106 @@ const TooltipExample = () => {
             onValueChange={setTextAlign}
           >
             <Tooltip title="Align left">
-              <ToggleButton icon="format-align-left" value="left" />
+              {(props) => (
+                <ToggleButton
+                  {...props}
+                  icon="format-align-left"
+                  value="left"
+                />
+              )}
             </Tooltip>
             <Tooltip title="Align center">
-              <ToggleButton icon="format-align-center" value="center" />
+              {(props) => (
+                <ToggleButton
+                  {...props}
+                  icon="format-align-center"
+                  value="center"
+                />
+              )}
             </Tooltip>
             <Tooltip title="Align right">
-              <ToggleButton icon="format-align-right" value="right" disabled />
+              {(props) => (
+                <ToggleButton
+                  {...props}
+                  icon="format-align-right"
+                  value="right"
+                  disabled
+                />
+              )}
             </Tooltip>
           </ToggleButton.Row>
         </List.Section>
         <List.Section title="Avatar">
           <View style={styles.avatarContainer}>
             <Tooltip title="Username">
-              <Avatar.Text label="U" />
+              {(props) => <Avatar.Text {...props} label="U" />}
             </Tooltip>
           </View>
         </List.Section>
         <List.Section title="Chip">
           <View style={styles.chipContainer}>
             <Tooltip title="Copied">
-              <Chip
-                mode="outlined"
-                avatar={
-                  <Image
-                    source={require('../../assets/images/avatar.png')}
-                    accessibilityIgnoresInvertColors
-                  />
-                }
-              >
-                John Doe
-              </Chip>
+              {(props) => (
+                <Chip
+                  {...props}
+                  mode="outlined"
+                  avatar={
+                    <Image
+                      source={require('../../assets/images/avatar.png')}
+                      accessibilityIgnoresInvertColors
+                    />
+                  }
+                >
+                  John Doe
+                </Chip>
+              )}
             </Tooltip>
           </View>
         </List.Section>
         <List.Section title="Card">
           <Tooltip title="Cafeteria, 1st floor">
-            <Card style={styles.cardContainer}>
-              <Card.Title
-                title="Lunch break"
-                subtitle="1:00-2:00 PM"
-                left={(props) => (
-                  <Avatar.Icon {...props} icon="food-fork-drink" />
-                )}
-              />
-            </Card>
+            {(props) => (
+              <Card {...props} style={styles.cardContainer}>
+                <Card.Title
+                  title="Lunch break"
+                  subtitle="1:00-2:00 PM"
+                  left={(leftProps) => (
+                    <Avatar.Icon {...leftProps} icon="food-fork-drink" />
+                  )}
+                />
+              </Card>
+            )}
           </Tooltip>
         </List.Section>
+        <List.Section title="Rich tooltips">
+          <View style={styles.iconButtonContainer}>
+            <Tooltip.Rich
+              title="Add to library"
+              content="Save this item to read it later from any of your devices."
+              actions={({ dismiss }) => (
+                <>
+                  <Button compact onPress={dismiss}>
+                    Learn more
+                  </Button>
+                  <Button compact mode="contained" onPress={dismiss}>
+                    Add
+                  </Button>
+                </>
+              )}
+            >
+              {(props) => <IconButton {...props} icon="plus" size={24} />}
+            </Tooltip.Rich>
+            <Tooltip.Rich content="A rich tooltip with body text only — no title or actions.">
+              {(props) => (
+                <IconButton {...props} icon="information" size={24} />
+              )}
+            </Tooltip.Rich>
+          </View>
+        </List.Section>
       </ScreenWrapper>
       <View style={styles.fabContainer}>
         <Tooltip title="Press Me">
-          <FAB icon="plus" onPress={() => {}} />
+          {(props) => <FAB {...props} icon="plus" onPress={() => {}} />}
         </Tooltip>
       </View>
     </>

jest/testSetup.js

@@ -8,9 +8,15 @@ jest.mock('react-native-worklets', () =>
   require('react-native-worklets/lib/module/mock')
 );
 
-jest.mock('react-native-reanimated', () =>
-  require('react-native-reanimated/mock')
-);
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = require('react-native-reanimated/mock');
+
+  // The mock doesn't ship the CSS easing helpers; stub the ones we use.
+  return {
+    ...Reanimated,
+    cubicBezier: (...points) => `cubic-bezier(${points.join(', ')})`,
+  };
+});
 
 jest.mock('@react-native-vector-icons/material-design-icons', () => {
   const React = require('react');

package.json

@@ -68,6 +68,7 @@
     "@release-it/conventional-changelog": "^1.1.0",
     "@testing-library/react-native": "^14.0.0",
     "@types/color": "^3.0.0",
+    "@types/jest": "^30.0.0",
     "@types/node": "^24.0.0",
     "@types/react": "^19.2.7",
     "all-contributors-cli": "^6.24.0",

src/components/FAB/Content.tsx

@@ -1,12 +1,15 @@
-import { StyleSheet, View } from 'react-native';
-import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import {
+  ColorValue,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 
-import Reanimated from 'react-native-reanimated';
-import type { AnimatedStyle } from 'react-native-reanimated';
+import Reanimated, { AnimatedStyle } from 'react-native-reanimated';
 
 import type { TypescaleKey } from '../../theme/types';
-import Icon from '../Icon';
-import type { IconSource } from '../Icon';
+import Icon, { IconSource } from '../Icon';
 import AnimatedText from '../Typography/AnimatedText';
 
 export type ContentProps = {

src/components/FAB/Extended.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
-import type {
+import {
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
+  StyleSheet,
+  View,
   ViewStyle,
 } from 'react-native';
 
@@ -18,7 +19,7 @@ import Reanimated, {
 import { scheduleOnUI } from 'react-native-worklets';
 
 import Shell from './Shell';
-import type { Size, Variant } from './tokens';
+import { Size, Variant } from './tokens';
 import { getDimensions } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import { useReduceMotion } from '../../theme/accessibility/ReduceMotionContext';
@@ -110,7 +111,10 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
-  ref?: React.Ref<View>;
+  /**
+   * @optional
+   */
+  ref?: React.RefObject<View>;
 };
 
 /**

src/components/FAB/FAB.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { View } from 'react-native';
-import type {
+import {
   ColorValue,
   GestureResponderEvent,
   PressableAndroidRippleConfig,
   StyleProp,
+  View,
   ViewStyle,
 } from 'react-native';
 
 import Shell from './Shell';
-import type { Size, Variant } from './tokens';
+import { Size, Variant } from './tokens';
 import type { ThemeProp } from '../../types';
 import type { IconSource } from '../Icon';
 
@@ -43,6 +43,26 @@ export type Props = {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute when a touch is released.
+   */
+  onPressOut?: (e: GestureResponderEvent) => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
+  /**
+   * Called when the pointer enters the element (web only).
+   */
+  onHoverIn?: () => void;
+  /**
+   * Called when the pointer leaves the element (web only).
+   */
+  onHoverOut?: () => void;
   /**
    * Accessibility label. Falls back to nothing if unset.
    */
@@ -82,7 +102,7 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
-  ref?: React.Ref<View>;
+  ref?: React.RefObject<View>;
 };
 
 /**
@@ -120,6 +140,11 @@ const FAB = ({
   size = 'default',
   visible = true,
   onPress,
+  onLongPress,
+  onPressOut,
+  delayLongPress,
+  onHoverIn,
+  onHoverOut,
   containerColor,
   contentColor,
   'aria-label': ariaLabel,
@@ -140,6 +165,11 @@ const FAB = ({
     size={size}
     visible={visible}
     onPress={onPress}
+    onLongPress={onLongPress}
+    onPressOut={onPressOut}
+    delayLongPress={delayLongPress}
+    onHoverIn={onHoverIn}
+    onHoverOut={onHoverOut}
     containerColor={containerColor}
     contentColor={contentColor}
     aria-label={ariaLabel}