diff --git a/.gitignore b/.gitignore index 5813369d59..116ccc5725 100644 --- a/.gitignore +++ b/.gitignore @@ -64,3 +64,6 @@ CHANGELOG.md lib/ .expo + +# yarn +.yarn diff --git a/example/src/Examples/TooltipExample.tsx b/example/src/Examples/TooltipExample.tsx index 011d7c6692..2196f4a234 100644 --- a/example/src/Examples/TooltipExample.tsx +++ b/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) => { + + ( + + {}} + /> + + )} + /> + } + /> + + @@ -181,6 +206,9 @@ const styles = StyleSheet.create({ cardContainer: { margin: 16, }, + textInput: { + margin: 16, + }, toggleButtonRow: { paddingHorizontal: 16, }, @@ -188,4 +216,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', flexWrap: 'wrap', }, + listBottomMargin: { + marginBottom: 128, + }, }); diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index e3a051b397..c78f20104b 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/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,