Popup Tip Utility For React Native

Description:

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: