Add the dependency:

npm i react-native-tooltip-2

import Tooltip from "react-native-tooltip-2";

 <Tooltip
    isVisible={toolTipVisible}
    content={<Text>Check this out!</Text>}
    placement={Placement.TOP}
    onClose={() => setToolTipVisible(false)}>
    <Pressable
        style={styles.button}
        onPress={() => setToolTipVisible(true)}>
        <Text>Press me</Text>
    </Pressable>
</Tooltip>

You can checkout the example project 🥰

Simply run

• npm i && npx pod-install
• react-native run-ios/android

should work of the example project.

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.

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.

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

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>

This library is a fork of react-native-walkthrough-tooltip

• Full typescript re-written
• Much better types and props
• Better customizability

• LICENSE
• Code separation rely on separation of concern(SoC)
• Code cleanup and refactoring
• Better README and documentation
• Write an article about the lib on Medium

FreakyCoder, [email protected]

React Native Tooltip 2 is available under the MIT license. See the LICENSE file for more info.