react-native-tip v0.0.25

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

or

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

TipProvider Props

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

Helper functions

TipStep Props

License

MIT