How can you add floating tooltips in react native?

Question

I am developing an application that takes the user through a short tour prior to going to the main page of the application (after initial sign up). What I would like to do is overlay the app pages (seen via the tabbar) with the following designs:

However React Native Overlay has a history of leaving a lot of errors in its wake - nor has it ever worked for me personally. The React Native ToolTip module is no longer being supported and does not work either. Has anyone ever accomplished this? If so, how? Thank you for your advice!

Answer 1

Rather than using already existing npm modules, what i suggest is to write yuor own stuff for this.

i think Modals from react-native would help you achieve this, you could easily place different Modals which would have your feature-introductory text/image and you could easily keep on toggling visibility of these texts/images.

say you overlay a Modal first which in initial state has descriptor text for 'menu' feature and then you could set its visibility to false when user clicks in the background and turn the next item visible and so on, on the last item you want to get displayed you can set the Modal itselfs visibility to false and move on with the main app flow.

does that sound convincing? ?

Answer 2

Have you tried create your own tabBarComponent ? https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig

You may copy build-in tabComponent and add your ToolTip components to render

Answer 3

Tooltip functionality can be implemented using this lib: rn-tooltip

Answer 4

I prefer to create my own component in this case as one of the answers, BUT you can use this component: react-native-popable

I am using it in some apps and it played really well.

Answer 5

I recommended to try the plug-in below. https://github.com/jasongaare/react-native-walkthrough-tooltip

Answer 6

You might want to try the following package:

https://github.com/jasongaare/react-native-walkthrough-tooltip

Answer 7

You may not be interested in using a framework for a single component, but in terms of popular and well-supported libraries, React Native Paper has a tooltip component, and is a robust and widely-used library.

Answer 8

UPDATED

Sorry forgot to update my answer, please let me explain more briefly how I end this up

so I deal with this using, create own component, with a style position absolute, and using useRef, get the component reference you want to add a tooltip, with reference get the y position on screen to put your tooltip component above on it or depends the logic you have, here is the assumption

// Tooltip.js
const styles = StyleSheet.create({
  toolTip: (x, y) => ({
    position: 'absolute',
    left: x,
    top: y
  }),
});

const Tooltip = ({pos}) => {
  return (
    <View style={styles.toolTip(pos.x, pos.y)} >
      <Text>Hi There!</Text>
    </View>
  )
}

// App.js
import {useRef} from 'react';
const bottomNavRef = useRef();
const [tooltip, setTooltip] = useState({visible: false, pos: {x: 0, y: 0}})

const showTooltip = () => {
  const x = bottomNavRef.current.clientX
  const y = bottomNavRef.current.clientY
  setTooltip({ visible: true, pos: {x, y} })
}

...
return (
  <View>
    <Tooltip visible={tooltip.visible} />
    <BottomNav ref={bottomNavRef}>
      ...
    </BottomNav>
  </View>
)

I know it is not tested, but I swear that this is the whole idea how you can create your own tooltip

Answer 9

Maybe you can just create your custom tooltip component. Here is a very basic example in how to make it appear in front of other components using some CSS tricks and zIndex property: https://codepen.io/vtisnado/pen/WEoGey

class SampleApp extends React.Component {
  render() {
    return (
      /******************* RENDER VISUAL COMPONENTS *******************/
      <View style={styles.container}>
        <View style={styles.mainView}>
          {/* Start: Tooltip */}
          <View style={styles.talkBubble}>
            <View style={styles.talkBubbleSquare}>
              <Text style={styles.talkBubbleMessage}>Put whatever you want here. This is just a test message :)</Text>
            </View>
            <View style={styles.talkBubbleTriangle} />
          </View>
          {/* End: Tooltip */}
          <View style={styles.anotherView} /> {/* The view with app content behind the tooltip */}
        </View>
      </View>
      /******************* /RENDER VISUAL COMPONENTS *******************/
    );
  }
}

/******************* CSS STYLES *******************/
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  mainView: {
    flex: 1,
    flexDirection: 'row',
  },
  talkBubble: {
    backgroundColor: 'transparent',
    position: 'absolute',
    zIndex: 2, // <- zIndex here
    flex: 1,
    left: 20,
    //left: (Dimensions.get('window').width / 2) - 300, // Uncomment this line when test in device.
    bottom: 60,
  },
  talkBubbleSquare: {
    width: 300,
    height: 120,
    backgroundColor: '#2C325D',
    borderRadius: 10
  },
  talkBubbleTriangle: {
    position: 'absolute',
    bottom: -20,
    left: 130,
    width: 0,
    height: 0,
    borderLeftWidth: 20,
    borderRightWidth: 20,
    borderTopWidth: 20,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderTopColor: '#2C325D',
  },
  talkBubbleMessage: {
    color: '#FFFFFF',
    marginTop: 40,
    marginLeft: 20,
    marginRight: 20,
  },
  anotherView: {
    backgroundColor: '#CCCCCC',
    width: 340,
    height: 300,
    position: 'absolute',
    zIndex: 1, // <- zIndex here
  },
});
/******************* /CSS STYLES *******************/

UPDATE: I removed the Codepen iframe widget since it could confuse some users, please follow the above link to see the example.