0.0.12 • Published 6 years ago

react-native-tips v0.0.12

Weekly downloads
114
License
ISC
Repository
github
Last release
6 years ago

react-native-tips

Build Status

This module is used to guide your new comers throughout your app. Easily and Effectively.

Ios Android 
alt text alt text

Update to v0.0.8 - Deprecation warning

  • onRequestNext is deprecated. It will be removed in the next update. Be sure to replace it by onRequestClose which does the same thing.

How to install

# Install via npm
npm install react-native-tips --save

# Install via yarn
yarn add react-native-tips

How to use it

To use it, just import it directly into your components

import Tips from 'react-native-tips'

Example

The most basic example of this module is to use it like this :

import React from 'react'
import { View, Button } from 'react-native'
import Tips from 'react-native-tips'


const MyButton = (props = {}) => (
  <View>
    <Tips
      visible
      text="This is a tips !"
    >
      <Button title="Hello world !">
    </Tips>
  </View>
)

export default MyButton

Configuration

Properties of Tips:

PropertyTypeRequirementDescription
childrennodeOptionalThe Tips children are elements that will be highlighted when the tips will be visible
childrenStyleObjectOptional Override the style of the container of the children 
contentnodeOptionalUse this property if you want to add more than a simple text inside your Tips.
contentStyleObjectOptionalOverride the style of the content of the Modal (used for positioning the highlighted elements and tips)
delayNumber Optional (default: 250) Add a delay before showing the Tips
modalStyleObjectOptionalOverride the style of the Modal Component (react-native) 
offsetLeftNumberOptionalAdd an offset on the Tips in x axis.
offsetTopNumberOptionalAdd an offset on the Tips in y axis.
onRequestClosefunctionOptionalTriggered when the user taps on the screen.
onRequestNextfunctionDeprecated !!! Optional Deprecated !!! Use onRequestClose instead. (See #waterfall-tips for more.)
positionenum (top, left, right, bottom or none)Default: topDefine the position of your tips related to their children.
style ObjectOptionalOverride the style of your tips
textStringOptionalText inside the Tips.
textStyleObjectOptionalOverride the style of the text inside the Tips
tooltipArrowStyleObjectOptionalOverride the style of the arrow outside the Tips
tooltipContainerStyleObjectOptional Override the style of the container of your tips (used for positionning)
visible BooleanDefault: falseSet the visibility of your Tips
enableChildrenInteraction BooleanDefault: falseIf set to true, interation with children won't close the Tips

Waterfall Tips

You sometimes need to show tips one after another. This module has a helper to execute this scheme. You can use new Tips.Waterfall() to create a new helper that helps you to show/hide tips in a waterfall manner.

import React, { PureComponent } from 'react'
import { View, Button, Text } from 'react-native'
import Tips from 'react-native-tips'


export default class MyButton extends PureComponent {
  constructor(props) {
    super(props)

    // 1st step - Create your helper with keys that will represent your tips
    this.waterfallTips = new Tips.Waterfall([
      'myTips1', 'myTips2'
    ])

    this.state = {
      tipsVisible: null
    }

    // This method will trigger the changement of tips
    this.handleNextTips = this.handleNextTips.bind(this)
  }

  componentDidMount() {
    // the 'start' method will set the first Tips key into your state.
    this.setState({
      tipsVisible: this.waterfallTips.start()
    })
  }

  handleNextTips() {
    // the 'next' method will set the next tips key into your state until it has no more keys.
    this.setState({
      tipsVisible: this.waterfallTips.next()
    })
  }

  render() {
    const { tipsVisible } = this.state

    return (
      <View>
        <Tips
          visible={tipsVisible === 'myTips1'}
          onRequestClose={this.handleNextTips}
        >
          <Button text="My button">
        </Tips>

        <Tips
          visible={tipsVisible === 'myTips2'}
          onRequestClose={this.handleNextTips}
        >
          <Text>My text</Text>
        </Tips>
      </View>
    )
  }
}

Use Tips only one time

In most of the cases, you only want these tips when the user arrives for the first time on your app or when your app has been updated. It is possible to do this with the Waterfall Tips helper :

  this.waterfallTips = new Tips.Waterfall(
    ['myTips1', 'myTips2'],
    {
      onEnd: async () => {
        await AsyncStorage.setItem('@Tips', true)
      }
    }
  )

  const isWaterfallAlreadyFinished = await AsyncStorage.getItem('@Tips')

  if (isWaterfallAlreadyFinished) {
    this.waterfallTips.options.disabled = true
  }

Options can be instanciated at the constructor or wherever you want.

methods of Tips.Waterfall:

MethodDescription
new Tips.Waterfall(indexes: Array< String >, options: optionsObject): Tips.WaterfallInstanciate a new waterfallTips helper.
start(): StringStart the waterfall and set the first index as the current index.
isVisible(index: String): BooleanCheck if the index passed in parameter is the current index.
createIndex(index: String): StringCreate a new index key.
next(): StringSet the next index as the current index. If it was the last key, the value will be null
previous(): String Set the previous index as the current index. If it was the first key, the value will be the first key.

options of Tips.Waterfall:

NameType Description
onIndexChangeFunction (index: Boolean)Triggered when the index has changed.
onEndFunction Triggered when all tips have been shown.
disabledBooleanIf true, the index will always return null and no Tips will be shown.
0.0.12

6 years ago

0.0.11

6 years ago

0.0.10

6 years ago

0.0.9

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago