react-native-walkthrough-tooltip

React Native Walkthrough Tooltip

Much credit belongs to @jeanregisser and the react-native-popover library. Most of the animations and geometry computation belong to his library. Please check it out! It was an invaluable resource.

Tooltip

React Native Walkthrough Tooltip is a fullscreen modal that highlights whichever element it wraps.
When not visible, the wrapped element is displayed normally.

Breaking Changes in Version 1.0

For Version 1.0, the library was refactored and simplified.

• No more animated prop - if you want to have your tooltips animated, use the last stable version: 0.5.3. Hopefully animations can be added again in the sure (great idea for a PR!)

• No more displayArea and childlessPlacementPadding props - these have been replaced with the displayInsets prop, which allows you to simply declare how many pixels in from each side of the screen to inset the area the tooltip may display.

• Tooltips are now bound by the displayInsets - before if your content was larger than the displayArea prop, the tooltip would render outside of the display area. Now the tooltip should always resize to be inside the display area as defined by the displayInsets prop

Installation

yarn add react-native-walkthrough-tooltip

Example Usage

import Tooltip from 'react-native-walkthrough-tooltip';

<Tooltip
  isVisible={this.state.toolTipVisible}
  content={<Text>Check this out!</Text>}
  placement="top"
  onClose={() => this.setState({ toolTipVisible: false })}
>
  <TouchableHighlight style={styles.touchable}>
    <Text>Press me</Text>
  </TouchableHighlight>
</Tooltip>

Screenshot

How it works

The tooltip wraps an element in place in your React Native rendering. When it initially renders, it measures the location of the element in the window, utilizing React Native's measureInWindow. When the tooltip is displayed, it renders a copy of the wrapped element positioned absolutely on the screen at the coordinates returned after measuring. This allows you to touch the element in the tooltip modal rendered above your current screen.

Listening for touches on highlighted child element

Optionally, you can provide the props onChildPress or onChildLongPress to override any functionality of the current element, should you find that useful. More information on this can be found below.

Props

Prop name	Type	Default value	Description
arrowSize	Size	{ width: 16, height: 8 }	The dimensions of the arrow on the bubble pointing to the highlighted element
backgroundColor	string	'rgba(0,0,0,0.5)'	Color of the fullscreen background beneath the tooltip. Overrides the backgroundStyle prop
content	function/Element	<View />	This is the view displayed in the tooltip popover bubble
displayInsets	object	{ top: 24, bottom: 24, left: 24, right: 24 }	The number of pixels to inset the tooltip on the screen (think of it like padding). The tooltip bubble should never render outside of these insets, so you may need to adjust your content accordingly
isVisible	bool	false	When true, tooltip is displayed
onChildLongPress	function	null	Callback when user long presses on wrapped child. Overrides any touches in wrapped child element. See below for more info
onChildPress	function	null	Callback when user long presses on wrapped child. Overrides any touches in wrapped child element. See below for more info
onClose	function	null	Callback fired when the user taps the tooltip background overlay
placement	string	"auto"	Where to position the tooltip - options: top, bottom, left, right, auto. When auto is specified, the library will determine the ideal placement so that the popover is fully visible within displayArea.
showChildInTooltip	bool	true	Set this to false if you do NOT want to display the child alongside the tooltip when the tooltip is visible
supportedOrientations	array	["portrait", "landscape"]	This prop allows you to control the supported orientations the tooltip modal can be displayed. It correlates directly with the prop for React Native's Modal component
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

Style Props

The tooltip styles should work out-of-the-box for most use cases, however should you need you can customize the styles of the tooltip using these props.

Prop name	Effect
arrowStyle	Styles the triangle that points to the called out element
backgroundStyle	Styles the overlay view that sits behind the tooltip, but over the current view
contentStyle	Styles the content wrapper that surrounds the content element
tooltipStyle	Styles the tooltip that wraps the arrow and content elements

Class definitions for props

• Size is an object with properties: { width: number, height: number }

onChildPress and onChildLongPress

When providing either of these functions, React Native Walkthrough Tooltip will wrap your entire child element in a touchable like so:

<TouchableWithoutFeedback onPress={onChildPress} onLongPress={onChildLongPress}>
  {childElement}
</TouchableWithoutFeedback>

NOTE: This will disable and override any touch events on your child element

One possible use case for these functions would be a scenerio where you are highlighting new functionality and want to restrict a user to ONLY do a certain action when they press on an element. While perhaps uncommon, this use case was relevant for another library I am working on, so it may be useful for you. When these props are NOT provided, all touch events on children occur as expected.