From d0e46ddc708a4132eaeb51591f50ecc46c970e41 Mon Sep 17 00:00:00 2001 From: Christoph Byza Date: Fri, 24 Mar 2023 14:48:50 +0100 Subject: [PATCH] Add new prop "interactionManagerTimeout" --- README.md | 1 + src/tooltip.d.ts | 8 +++++++- src/tooltip.js | 13 +++++++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 88a43eb..20b9312 100644 --- a/README.md +++ b/README.md @@ -90,6 +90,7 @@ The tooltip wraps an element _in place_ in your React Native rendering. When it | topAdjustment | number | 0 | Value which provides additional vertical offest for the child element displayed in a tooltip. Commonly set to: `Platform.OS === 'android' ? -StatusBar.currentHeight : 0` due to an issue with React Native's measure function on Android | horizontalAdjustment | number | 0 | Value which provides additional horizontal offest for the child element displayed in a tooltip. This is useful for adjusting the horizontal positioning of a highlighted child element if needed | useInteractionManager | bool | false | Set this to true if you want the tooltip to wait to become visible until the callback for `InteractionManager.runAfterInteractions` is executed. Can be useful if you need to wait for navigation transitions to complete, etc. [See docs on InteractionManager here](https://facebook.github.io/react-native/docs/interactionmanager) +| interactionManagerTimeout | number | undefined | In some rare cases `InteractionManager.runAfterInteractions` is not executed. This can be useful to trigger the measurement after a maximal amount of time (in milliseconds). | useReactNativeModal | bool| true | By default, this library uses a `` component from React Native. If you need to disable this, and simply render an absolutely positioned full-screen view, set `useReactNativeModal={false}`. This is especially useful if you desire to render a Tooltip while you have a different `Modal` rendered. ### Style Props diff --git a/src/tooltip.d.ts b/src/tooltip.d.ts index bfbc296..6ef20a7 100644 --- a/src/tooltip.d.ts +++ b/src/tooltip.d.ts @@ -46,7 +46,7 @@ declare module 'react-native-walkthrough-tooltip' { childrenWrapperStyle?: StyleProp; // Styles the view element that wraps the original children - parentWrapperStyle?: StyleProp + parentWrapperStyle?: StyleProp; } export interface TooltipProps extends Partial { @@ -105,6 +105,12 @@ declare module 'react-native-walkthrough-tooltip' { */ useInteractionManager?: boolean; + /** + * In some rare cases InteractionManager.runAfterInteractions is not executed. This can be useful + * to trigger the measurement after a maximal amount of time (in milliseconds). + */ + interactionManagerTimeout?: number; + /** * When false, will not use a React Native Modal component to display tooltip, * but rather an absolutely positioned view diff --git a/src/tooltip.js b/src/tooltip.js index 3098692..6f11dd6 100644 --- a/src/tooltip.js +++ b/src/tooltip.js @@ -105,6 +105,7 @@ class Tooltip extends Component { showChildInTooltip: PropTypes.bool, supportedOrientations: PropTypes.arrayOf(PropTypes.string), useInteractionManager: PropTypes.bool, + interactionManagerTimeout: PropTypes.number, useReactNativeModal: PropTypes.bool, topAdjustment: PropTypes.number, horizontalAdjustment: PropTypes.number, @@ -294,7 +295,19 @@ class Tooltip extends Component { if (this.interactionPromise) { this.interactionPromise.cancel(); } + + let interactionTimeout; + if (this.props.interactionManagerTimeout !== undefined) { + // Make sure doMeasurement runs, also if runAfterInteractions doesn't run (rare case) + interactionTimeout = setTimeout(() => { + doMeasurement(); + }, this.props.interactionManagerTimeout); + } + this.interactionPromise = InteractionManager.runAfterInteractions(() => { + if (interactionTimeout) { + clearTimeout(interactionTimeout); + } doMeasurement(); }); } else {