Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-native-tip

Package Overview
Dependencies
0
Maintainers
1
Versions
17
Issues
File Explorer

Advanced tools

react-native-tip

React Native tip utility

    0.0.18latest

Version published
Maintainers
1
Yearly downloads
9,842
increased by1608.68%

Weekly downloads

Changelog

Source

0.0.18 (2021-07-31)

Readme

Source

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.



Demo of react-native-tip

npm version npm downloads npm licence



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

PropertyTypeDescription
idstring or numberThe tip's id, useful to control it.
titlestringThe title text of your tip.
titleStyleTextStyleStyle for the title of your tip.
bodystringThe body text of your tip.
bodyStyleTextStyleStyle for the body of your tip.
styleViewStyleStyle of the item wrapper component: <Tip style={style}>.
activeItemStyleViewStyleStyle for the item when the tip is open.>`.
tipContainerStyleViewStyleStyle for the tip. Use carefully, this can mess up the tip's position.
overlayOpacitynumberSet 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.
showItemPulseAnimationbooleanShow item pulse animation when tip is open.
pulseColorstringSet pulse animation color.
pulseStyleViewStyleStyle for the pulse animation.
dismissablebooleanAllow auto dismiss on touch overlay.
activeboolean Default = trueIf 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() => voidTrigger your custom action on item press.
onTipPress() => voidTrigger your custom action on tip press.
onDismiss() => voidOverride dismiss natural action.



TipProvider Props

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

PropertyTypeDescription
tipContainerStyleViewStyleSet global style for the tip wrapper
titleStyleTextStyleSet global style for the title of your tip
bodyStyleTextStyleSet global style for the body of your tip.
overlayOpacitynumberSet global opacity intensity of overlay. default 0.6
showItemPulseAnimationbooleanSet global pulse animation on item when tip is open.
darkModebooleanWhen true set a dark custom color scheme for your tip. It can be overwritten by titleStyle and bodyStyle props.
prevButtonLabelstringLabel for Prev action button on tip tour mode.
nextButtonLabelstringLabel for Next action button on tip tour mode.
closeButtonLabelstringLabel for Close action button on tip tour mode.
prevNextButtonStyleViewStyleStyle for Next, Prev, Close action buttons on tip tour mode.
prevNextTextStyleTextStyleStyle for Next, Prev, Close action buttons text on tip tour mode.



Helper functions

PropertyTypeDescription
showTip(tipId?: string, delay?: number, props?: Partial<ITip>) => voidShow 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()=>voidClose the current opened tip, can be called anywhere in your code.
showTipTour(steps: ITipStep[])=>voidSet a tip tour sequence.


TipStep Props

PropertyTypeDescription
idstringCurrent tip id, required
prevIdstringPrevious tip id, optional
nextIdstringNext tip id, optional
delaynumberTimeout before triggering the tip change to next or previous one.
prevAction() => voidAction to be executed right before Prev button is pressed. Use it with delay prop for async tasks.
nextAction() => voidAction to be executed right before Next button is pressed. Use it with delay prop for async tasks.



License

MIT

Keywords

FAQs

What is react-native-tip?

React Native tip utility

Is react-native-tip popular?

The npm package react-native-tip receives a total of 221 weekly downloads. As such, react-native-tip popularity was classified as not popular.

Is react-native-tip well maintained?

We found that react-native-tip demonstrated a healthy version release cadence and project activity. It has 1 open source maintainer collaborating on the project.

Last updated on 31 Jul 2021
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc