Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can you add floating tooltips in react native?

Tags:

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:

enter image description here

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!

like image 598
Robert Tomas G IV Avatar asked Jan 19 '17 21:01

Robert Tomas G IV


People also ask

How do I add a popup in react-native?

In your components folder, create a file called Modal. tsx and add the following code: import React from "react"; import { StyleSheet, View, Text, Button } from "react-native"; import RNModal from "react-native-modal"; type ModalProps = { isVisible: boolean; children: React.

How do I create a custom Tooltip in react?

The Tooltip can be customized by using the cssClass property, which accepts custom CSS class names that define specific user-defined styles and themes to be applied on the Tooltip element.

How do I add Tooltip to disabled button react?

Show Tooltip on disabled elementsAdd a disabled element like the button element into a div whose display style is set to inline-block . Set the pointer event as none for the disabled element (button) through CSS. Now, initialize the Tooltip for outer div element that holds the disabled button element.


1 Answers

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? ?

like image 100
Suhail Jain Avatar answered Sep 19 '22 15:09

Suhail Jain