React Native Walkthrough Tooltip

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

Used by react-native-walkthrough: a lightweight walkthrough library for React Native using react-native-walkthrough-tooltip

Table of Contents

• Installation
• Breaking Changes in Version 1.0
• Example Usage
• Screenshot
• How it works
• Props
• Style Props
• Class definitions for props
• TooltipChildrenContext

Installation

yarn add react-native-walkthrough-tooltip

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.6.1. 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
• Removed the "auto" option for placement - you must now specify a direction
• Added the "center" option for childless placement - option to center the tooltip within the bounds of the displayInsets when it does not point to a child
• Added useReactNativeModal prop - this allows you to enable/disable the usage of React Native's Modal component to render the tooltip content. It is true by default.

Changes to handling users pressing the tooltip child element:

• No more onChildPress and onChildLongPress props - touches are now passed to the child by default. This allows you to maintain the original functionality of the child element. Further, the tooltip will also automatically dismiss on interaction with the child element.
• Added closeOnChildInteraction prop - if you want the user to be able to interact with the child element, but not automatically dismiss the tooltip when they do so, set this to false (true by default)
• Added allowChildInteraction prop - if you'd like to disable interaction with the child element, set this to false (true by default). When false, tapping on the child element will call onClose as if the user touched the background element.

Example Usage

To see an expo snack example, click here

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 renders, it measures the location of the element, using React Native's measure. When the tooltip is displayed, it renders a copy of the wrapped element positioned absolutely on the screen at the coordinates returned after measuring (see TooltipChildrenContext below if you need to tell the difference between the copy and the original element). This allows you to touch the element in the tooltip modal rendered above your current screen.

Props

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.

Class definitions for props

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

TooltipChildrenContext

React Context that can be used to distinguish "real" children rendered inside parent's layout from their copies rendered inside tooltip's modal. The duplicate child rendered in the tooltip modal is wrapped in a Context.Provider which provides object with prop tooltipDuplicate set to true, so informed decisions may be made, if necessary, based on where the child rendered.

import Tooltip, { TooltipChildrenContext } from 'react-native-walkthrough-tooltip';
...
<Tooltip>
  <ComponentA />
  <ComponentB>
    <TooltipChildrenContext.Consumer>
      {({ tooltipDuplicate }) => (
        // will only assign a ref to the original component
        <FlatList {...(!tooltipDuplicate && { ref: this.listRef })} />
      )}
    </TooltipChildrenContext.Consumer>
  </ComponentB>
</Tooltip>