feat: touch to display tooltip

.gitignore

@@ -64,3 +64,6 @@ CHANGELOG.md
 lib/
 
 .expo
+
+# yarn
+.yarn

example/src/Examples/TooltipExample.tsx

@@ -10,6 +10,7 @@ import {
   FAB,
   IconButton,
   List,
+  TextInput,
   ToggleButton,
   Tooltip,
   Card,
@@ -148,6 +149,30 @@ const TooltipExample = ({ navigation }: Props) => {
             </Card>
           </Tooltip>
         </List.Section>
+        <List.Section title="Info Tooltip">
+          <TextInput
+            placeholder="IBAN"
+            mode="outlined"
+            style={styles.textInput}
+            right={
+              <TextInput.Icon
+                icon={() => (
+                  <Tooltip
+                    title="International Bank Account Number"
+                    touchToDisplay={true}
+                  >
+                    <IconButton
+                      icon={'information'}
+                      size={24}
+                      onPress={() => {}}
+                    />
+                  </Tooltip>
+                )}
+              />
+            }
+          />
+        </List.Section>
+        <View style={styles.listBottomMargin} />
       </ScreenWrapper>
       <View style={styles.fabContainer}>
         <Tooltip title="Press Me">
@@ -181,11 +206,17 @@ const styles = StyleSheet.create({
   cardContainer: {
     margin: 16,
   },
+  textInput: {
+    margin: 16,
+  },
   toggleButtonRow: {
     paddingHorizontal: 16,
   },
   iconButtonContainer: {
     flexDirection: 'row',
     flexWrap: 'wrap',
   },
+  listBottomMargin: {
+    marginBottom: 128,
+  },
 });

src/components/Tooltip/Tooltip.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
   Dimensions,
-  View,
   LayoutChangeEvent,
-  StyleSheet,
   Platform,
   Pressable,
+  StyleSheet,
+  View,
   ViewStyle,
 } from 'react-native';
 
@@ -42,6 +42,10 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * Whether the tooltip should be displayed on touch instead long press on mobile.
+   */
+  touchToDisplay?: boolean;
 };
 
 /**
@@ -67,6 +71,7 @@ const Tooltip = ({
   children,
   enterTouchDelay = 500,
   leaveTouchDelay = 1500,
+  touchToDisplay = false,
   title,
   theme: themeOverrides,
   titleMaxFontSizeMultiplier,
@@ -155,13 +160,18 @@ const Tooltip = ({
 
   const mobilePressProps = {
     onPress: React.useCallback(() => {
+      if (touchToDisplay) {
+        touched.current = true;
+        setVisible(true);
+        return null;
+      }
       if (touched.current) {
         return null;
       } else {
         if (children.props.disabled) return null;
         return children.props.onPress?.();
       }
-    }, [children.props]),
+    }, [children.props, touchToDisplay]),
     onLongPress: () => handleTouchStart(),
     onPressOut: () => handleTouchEnd(),
     delayLongPress: enterTouchDelay,