New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-native-joyride

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-joyride

Make an interactive step by step tour guide for you react-native app

  • 1.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
42
increased by23.53%
Maintainers
1
Weekly downloads
 
Created
Source

React Native Joyride

Step-by-step walkthrough for your react native app

React Native Joyride

Demo

Installation

npm install --save react-native-joyride

Usage

Use the joyride() higher order component for the screen component that you want to use joyride with:

import { joyride } from 'react-native-joyride';

class HomeScreen extends Component { /* ... */ }

export default joyride()(HomeScreen);

Before defining walkthrough steps for your react elements, you must make them joyridable. The easiest way to do that for built-in react native components, is using the joyridable HOC. Then you must wrap the element with JoyrideStep.

import { joyride, joyridable, JoyrideStep } from 'react-native-joyride';

const JoyrideText = joyridable(Text);

class HomeScreen {
  render() {
    return (
      <View>
        <JoyrideStep text="This is a hello world example!" order={1} name="hello">
          <JoyrideText>Hello world!</JoyrideText>
        </JoyrideStep>
      </View>
    );
  }
}

Every JoyrideStep must have these props:

  1. name: A unique name for the walkthrough step.
  2. order: A positive number indicating the order of the step in the entire walkthrough.
  3. text: The text shown as the description for the step.

Custom components as steps

The components wrapped inside JoyrideStep, will receive a joyride prop of type Object which the outermost rendered element of the component or the element that you want the tooltip be shown around, must extend.

import { joyride, JoyrideStep } from 'react-native-joyride';

const CustomComponent = ({ joyride }) => <View {...joyride}><Text>Hello world!</Text></View>;

class HomeScreen {
  render() {
    return (
      <View>
        <JoyrideStep text="This is a hello world example!" order={1} name="hello">
          <CustomComponent />
        </JoyrideStep>
      </View>
    );
  }
}

Contributing

Issues and Pull Requests are always welcome.

Please read OK Grow's global contribution guidelines.

If you are interested in becoming a maintainer, get in touch with us by sending an email or opening an issue. You should already have code merged into the project. Active contributors are encouraged to get in touch.

Please note that all interactions in @okgrow's repos should follow our Code of Conduct.

License

MIT © 2017 OK GROW!, https://www.okgrow.com.

Keywords

FAQs

Package last updated on 07 Oct 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc