Hi Guys,

Today, I will learn you how to add Tips in react native. we will show example of react native tips.You can easily create tooltip tips in react native. First i will import react-native-tip after I will create tips in react native.

Here, I will give you full example for simply display tips using react native as bellow.

In the first step Run the following command for create project.

expo init MyWebtutsProject

In the step,I will install yarn add react-native-tip package.

yarn add react-native-tip

In this step, You will open App.js file and put the code.

import React, { Component } from "react";
import { Text, View,StyleSheet, Button} from 'react-native';
import { Provider ,Appbar} from 'react-native-paper';
import Tips from 'react-native-tips';

const MyWebtutsComponent = () => {

    const CopilotText = walkthroughable(Text);

    const _goBack = () => console.log('Went back');

    const _handleSearch = () => console.log('Searching');

    const _handleMore = () => console.log('Shown more');

    return (
      <Provider>
          <Appbar.Header style={styles.header}>
            <Appbar.BackAction onPress={_goBack} />
            <Appbar.Content title="Home" />
            <Appbar.Action icon="magnify" onPress={_handleSearch} />
            <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
          </Appbar.Header>
          <View style={styles.container}>
            <Tips visible
              text="This is a tips !">
              <Button
                title="Learn More"
                color="#841584"
                accessibilityLabel="Learn more about this purple button"
              />
            </Tips>
          </View>
      </Provider>
  );
};


const styles = StyleSheet.create({
     container: {
        flex: 1,
        justifyContent: 'center',
        marginHorizontal: 16,
      },
    header:{
        backgroundColor: '#ffffff',
    }
});
export default MyWebtutsComponent;

In the last step run your project using bellow command.

expo start

It will help you..