A simple popup tip utility with react native

react-native-tip

React Native Tip is a simple package inspired in MaterialUI-Tooltip that helps you to show a quick tip to the user and highlight some important item in your app. It is useful to explain the user some funcionality.

Installation

To install the latest version of react-native-tip you only need to run:

npm install --save react-native-tip

yarn add react-native-tip

Try it out

You can find the examples above on src/example.

Basic Usage

Import TipProvider and place it at the very bottom of your App.js as below:

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>
        );
    }
}

Show a tip

To show a tip you need to import the Tip component and wrap the component you want to highlight inside it as shown below:

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>
    );
  }
}

When you wrap a component inside <Tip> it becomes a touchable.

When you press it, it shows the tip automatically by default but you can change that by setting the props active = false.

OBS: if the item is already a pressable component, you have to show or close the tip manually by importing showTip(), closeTip() help functions.

import React from 'react'
import { View, StyleSheet, TouchableOpacity, Button } from 'react-native'
import { showTip, closeTip, Tip } from './Tip'
import Icon from 'react-native-vector-icons/Ionicons'

const Screen = ({ navigation }) => {
    const [_showTip, setShowTip] = React.useState(true)

    return (
        <View style={styles.container}>
            <Tip
                id='heart'
                title="Do you liked it?"
                body="Remember to hit the heart if you enjoyed the content"
                showItemPulseAnimation
                pulseColor='#ff8080'
                active={false}
            >
                <TouchableOpacity
                    onPress={() => {
                        _showTip && showTip('heart')
                        setShowTip(false)
                    }}
                    style={{ padding: 10, borderRadius: 50 }}
                >
                    <Icon name='heart' color='red' size={35}/>
                </TouchableOpacity>
            </Tip>

            <View style={{ width: 200 }}>
                <Button
                    title="Show heart tip"
                    onPress={() => showTip('heart')}
                />
            </View>
        </View>
    )
}

Show a tip tour

You can create a tour with the tips you choose by setting a list of steps and pass it as a param of showTipTour(steps) helper function.

Each step receives a series of params specified in TipStep Props below.

You can find a complete example in src/example/components/TourButton

Tip Props

Property	Type	Description
id	`string` or `number`	The tip's id, useful to control it.
title	`string`	The title text of your tip.
titleStyle	`TextStyle`	Style for the title of your tip.
body	`string`	The body text of your tip.
bodyStyle	`TextStyle`	Style for the body of your tip.
style	`ViewStyle`	Style of the item wrapper component: `<Tip style={style}>`.
tipContainerStyle	`ViewStyle`	Style for the tip. Use carefully, this can mess up the tip's position.
overlayOpacity	`number`	Set opacity intensity of overlay. default `0.6`
renderTip	`({ titleStyle:TextStyle, bodyStyle:TextStyle }) => React.Component;`	Set a custom component to be rendered inside your tip. You can inject your current tip's global titleStyle and bodyStyle (if you defined one in your `TipProvider`) props direct in your custom tip component with `titleStyle` and `bodyStyle` params.
showItemPulseAnimation	`boolean`	Show item pulse animation when tip is open.
pulseColor	`string`	Set pulse animation color.
dismissable	`boolean`	Allow auto dismiss on touch overlay.
active	`boolean` Default = true	If true the item becomes pressable and shows the tip automatically when pressed. OBS: if the item is already a pressable component, you should show or close it manually by using `showTip()`, `closeTip()` help functions.
onPressItem	`() => void`	Trigger your custom action on item press.
onTipPress	`() => void`	Trigger your custom action on tip press.
onDismiss	`() => void`	Override dismiss natural action.

TipProvider Props

You can set a default style for all your tips with the following:

Property	Type	Description
tipContainerStyle	`ViewStyle`	Set global style for the tip wrapper
titleStyle	`TextStyle`	Set global style for the title of your tip
bodyStyle	`TextStyle`	Set global style for the body of your tip.
overlayOpacity	`number`	Set global opacity intensity of overlay. default `0.6`
showItemPulseAnimation	`boolean`	Set global pulse animation on item when tip is open.
darkMode	`boolean`	When `true` set a dark custom color scheme for your tip. It can be overwritten by `titleStyle` and `bodyStyle` props.
prevButtonLabel	`string`	Label for `Prev` action button on tip tour mode.
nextButtonLabel	`string`	Label for `Next` action button on tip tour mode.
closeButtonLabel	`string`	Label for `Close` action button on tip tour mode.
prevNextButtonStyle	`ViewStyle`	Style for `Next, Prev, Close` action buttons on tip tour mode.
prevNextTextStyle	`TextStyle`	Style for `Next, Prev, Close` action buttons text on tip tour mode.

Helper functions

Property	Type	Description
showTip	`(tipId?: string, delay?: number) => void`	Show your tip, can be called anywhere in your code. * You can show a specific tip by passing its id. * You can delay your tip's appearing by passing a delay number in `milliseconds`, useful to await async tasks live navigate to another screen, default=0
closeTip	`()=>void`	Close the current opened tip, can be called anywhere in your code.
showTipTour	`(steps: ITipStep[])=>void`	Set a tip tour sequence.

TipStep Props

Property	Type	Description
id	`string`	Current tip id, `required`
prevId	`string`	Previous tip id, `optional`
nextId	`string`	Next tip id, `optional`
delay	`number`	Timeout before triggering the tip change to next or previous one.
prevAction	`() => void`	Action to be executed right before `Prev` button is pressed. Use it with `delay` prop for async tasks.
nextAction	`() => void`	Action to be executed right before `Next` button is pressed. Use it with `delay` prop for async tasks.

GitHub

https://github.com/MaiconGilton/react-native-tip