
Popup Tip Utility For React Native
A simple Popup Tip Utility that helps you to show a quick tip or guided tour to the user and highlight some important items in your React Native app.
How to use it:
1. Install the package.
# Yarn
$ yarn add react-native-tip
# NPM
$ npm i react-native-tip
2. Import the TipProvider.
import React from "react"; import { SafeAreaView } from "react-native"; import TipProvider from "react-native-tip"; export default class App extends React.Component { render() { return ( <SafeAreaView style={{ flex: 1 }}> ... all your stuff <TipProvider ...global options, see below /> </SafeAreaView> ); } }
3. Show a tooltip around your component.
import React from "react"; import { Text } from "react-native"; import { Tip } from "react-native-tip"; class App extends React.Component { render() { return ( <Tip title="Title" body="body" > <Text style={{ padding: 10, fontWeight: 'bold', fontSize: 20 }} > Show tip </Text> </Tip> ); } }
4. Create a guided tour.
import React from 'react' import { TouchableOpacity, Text } from 'react-native' import { showTipTour } from '../Tip' import { useNavigation } from '@react-navigation/core' const TourButton = () => { const navigation = useNavigation() return ( <TouchableOpacity onPress={() => showTipTour([ { id: 'center', prevId: 'top-right', nextId: 'bottom-left' }, { id: 'bottom-left', prevId: 'center', nextId: 'bottom-right' }, { id: 'bottom-right', prevId: 'bottom-left', nextId: 'tab1' }, { id: 'tab1', prevId: 'bottom-right', nextId: 'tab2' }, { id: 'tab2', prevId: 'tab1', nextId: 'heart', delay: 300, nextAction: () => navigation.navigate('AnotherScreen'), prevAction: () => navigation.navigate('HomeScreen') }, { id: 'heart', prevId: 'tab2', nextId: 'top-left', delay: 300, nextAction: () => navigation.navigate('HomeScreen') }, { id: 'top-left', prevId: 'heart', delay: 300, prevAction: () => navigation.navigate('AnotherScreen') } ])} style={{ position: 'absolute', top: 180, left: 20, borderWidth: 1, borderRadius: 5 }} > <Text style={{ padding: 10, borderRadius: 5, fontWeight: 'bold', fontSize: 16, color: 'black', textTransform: 'uppercase' }} >Start tip tour</Text> </TouchableOpacity> ) }
5. Available props for TipProvider
.
TipProvider.propTypes = { overlayOpacity: PropTypes.number, titleStyle: Text.propTypes.style, bodyStyle: Text.propTypes.style, tipContainerStyle: ViewPropTypes.style, showItemPulseAnimation: PropTypes.bool, darkMode: PropTypes.bool, prevButtonLabel: PropTypes.string, nextButtonLabel: PropTypes.string, closeButtonLabel: PropTypes.string, prevNextTextStyle: Text.propTypes.style, prevNextButtonStyle: ViewPropTypes.style }
6. Available props for Tip
.
Tip.propTypes = { id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), children: PropTypes.node.isRequired, dismissable: PropTypes.bool, title: PropTypes.string, body: PropTypes.string, titleStyle: Text.propTypes.style, bodyStyle: Text.propTypes.style, tipContainerStyle: ViewPropTypes.style, style: ViewPropTypes.style, renderTip: PropTypes.func, overlayOpacity: PropTypes.number, showItemPulseAnimation: PropTypes.bool, pulseColor: PropTypes.string, onPressItem: PropTypes.func, onTipPress: PropTypes.func, onDismiss: PropTypes.func, active: PropTypes.bodyStyle }
Preview:
Download Details:
Author: MaiconGilton
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/MaiconGilton/react-native-tip
License: MIT
Credit: Source link