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!
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.
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.
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.
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? ?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With