Step-by-step walkthrough for your react native app

Last update: Aug 3, 2022

React Native Copilot

Step-by-step walkthrough for your react native app!

React Native Copilot

Demo

Creation of this project was sponsored by OK GROW!

Installation

npm install --save react-native-copilot

Optional: If you want to have the smooth SVG animation, you should install and link react-native-svg. If you are using Expo, you can skip this as Expo comes with react-native-svg.

npm install --save react-native-svg
react-native link react-native-svg

Usage

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

import { copilot } from "react-native-copilot";

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

export default copilot()(HomeScreen);

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

import { copilot, walkthroughable, CopilotStep } from "react-native-copilot";

const CopilotText = walkthroughable(Text);

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

Every CopilotStep 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.

In order to start the tutorial, you can call the start prop function in the root component that is injected by copilot:

class HomeScreen extends Component {
  handleStartButtonPress() {
    this.props.start();
  }

  render() {
    // ...
  }
}

export default copilot()(HomeScreen);

If you are looking for a working example, please check out this link.

Overlays and animation

The overlay in react-native copilot is the component that draws the dark transparent over the root component. React-native copilot comes with two overlay components: view and svg.

The view overlay uses 4 rectangles drawn around the target element using the <View /> component. We don't recommend using animation with this overlay since it's sluggish on some devices specially on Android devices.

The svg overlay uses an SVG path component for drawing the overlay. It offers a nice and smooth animation but it depends on react-native-svg. If you are using expo, you don't need to install anything and the svg overlay works out of the box. If not, you need to install and this package:

npm install --save react-native-svg
react-native link react-native-svg

You can specify the overlay when applying the copilot HOC:

copilot({
  overlay: "svg", // or 'view'
  animated: true // or false
})(RootComponent);

Custom tooltip component

You can customize the tooltip by passing a component to the copilot HOC maker. If you are looking for an example tooltip component, take a look at the default tooltip implementation.

const TooltipComponent = ({
  isFirstStep,
  isLastStep,
  handleNext,
  handlePrev,
  handleStop,
  currentStep,
}) => (
  // ...
);

copilot({
  tooltipComponent: TooltipComponent
})(RootComponent)

Custom tooltip styling

You can customize tooltip's style:

const style = {
  backgroundColor: "#9FA8DA",
  borderRadius: 10,
  paddingTop: 5
};

copilot({
  tooltipStyle: style
})(RootComponent);

Manage tooltip width

Due to the dynamic way tooltip width is calculated, it is required to override both width and maxWidth, check the example bellow:

const MARGIN = 8;
const WIDTH = Dimensions.get('window').width - (2 * MARGIN);
copilot({
  //....
  tooltipStyle: {
    width: WIDTH,
    maxWidth: WIDTH,
    left: MARGIN,
  },
});

Custom tooltip arrow color

You can customize the tooltip's arrow color:

copilot({
  arrowColor: '#FF00FF'
})(RootComponent);

Custom step number component

You can customize the step number by passing a component to the copilot HOC maker. If you are looking for an example step number component, take a look at the default step number implementation.

const StepNumberComponent = ({
  isFirstStep,
  isLastStep,
  currentStep,
  currentStepNumber,
}) => (
  // ...
);

copilot({
  stepNumberComponent: StepNumberComponent
})(RootComponent)

Custom mask color

You can customize the mask color - default is rgba(0, 0, 0, 0.4), by passing a color string to the copilot HOC maker.

copilot({
  backdropColor: "rgba(50, 50, 100, 0.9)"
})(RootComponent);

Custom svg mask Path

You can customize the mask svg path by passing a function to the copilot HOC maker.

function signature:

SvgMaskPathFn = (args: {
  size: Animated.valueXY,
  position: Animated.valueXY,
  canvasSize: {
    x: number,
    y: number
  },
  step: Step
}) => string;

Example with circle:

const circleSvgPath = ({ position, canvasSize }): string =>
  `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${position.x._value},${position.y._value}Za50 50 0 1 0 100 0 50 50 0 1 0-100 0`;

copilot({
  svgMaskPath: circleSvgPath
})(RootComponent);

Example with different overlay for specific step:

Give name prop for the step

  <CopilotStep
    text="This is a hello world example!"
    order={1}
    name="hello"
  >
    <CopilotText>Hello world!</CopilotText>
  </CopilotStep>

Now you can return different svg path depending on step name

const customSvgPath = ({ position, size, canvasSize, step }): string => {
  if (step && step.name === 'hello') return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${position.x._value},${position.y._value}Za50 50 0 1 0 100 0 50 50 0 1 0-100 0`;

  else return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${position.x._value},${position.y._value}H${position.x._value + size.x._value}V${position.y._value + size.y._value}H${position.x._value}V${position.y._value}Z`;
};

copilot({
  svgMaskPath: circleSvgPath
})(RootComponent);

Custom components as steps

The components wrapped inside CopilotStep, will receive a copilot 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 { copilot, CopilotStep } from "react-native-copilot";

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

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

Custom labels (for i18n)

You can localize labels:

copilot({
  labels: {
    previous: "Vorheriger",
    next: "Nächster",
    skip: "Überspringen",
    finish: "Beenden"
  }
})(RootComponent);

Adjust vertical position

In order to adjust vertical position pass verticalOffset to the copilot HOC.

copilot({
  verticalOffset: 36
})(RootComponent);

Triggering the tutorial

Use this.props.start() in the root component in order to trigger the tutorial. You can either invoke it with a touch event or in componentDidMount. Note that the component and all its descendants must be mounted before starting the tutorial since the CopilotSteps need to be registered first.

Usage inside a ScrollView

Pass the ScrollView reference as the second argument to the this.props.start() function. eg this.props.start(false, ScrollViewRef)

import { ScrollView } from "react-native";
import { copilot } from "react-native-copilot";

class HomeScreen {
  componentDidMount() {
    // Starting the tutorial and passing the scrollview reference.
    this.props.start(false, this.scrollView);
  }

  componentWillUnmount() {
    // Don't forget to disable event handlers to prevent errors
    this.props.copilotEvents.off("stop");
  }

  render() {
    <ScrollView ref={ref => (this.scrollView = ref)}>// ...</ScrollView>;
  }
}
export default copilot()(HomeScreen);

Listening to the events

Along with this.props.start(), copilot HOC passes copilotEvents function to the component to help you with tracking of tutorial progress. It utilizes mitt under the hood, you can see how full API there.

List of available events is:

  • start — Copilot tutorial has started.
  • stop — Copilot tutorial has ended or skipped.
  • stepChange — Next step is triggered. Passes Step instance as event handler argument.

Example:

import { copilot, CopilotStep } from "react-native-copilot";

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

class HomeScreen {
  componentDidMount() {
    this.props.copilotEvents.on("stop", () => {
      // Copilot tutorial finished!
    });
  }

  componentWillUnmount() {
    // Don't forget to disable event handlers to prevent errors
    this.props.copilotEvents.off("stop");
  }

  render() {
    // ...
  }
}

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 's repos should follow our Code of Conduct.

License

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

GitHub

https://github.com/okgrow/react-native-copilot
Comments
  • 1. Use copilot with custom native-base components

    It seems not possible to highlight buttons in the walkthrough. I call this.props.start(); so that shouldn't be the problem. It might have to do with the custom components in native-base. If we are using the normal components it works perfectly, but with the custom components, it won't. image

    How can I make copilot work with custom native-base components?

    Reviewed by dirkvanherpen at 2018-05-20 17:35
  • 2. Undefined is not an object

    screen_shot

    import {
      copilot,
      walkthroughable,
      CopilotStep
    } from '@okgrow/react-native-copilot';
    
    ...
    
    const Step1 = ({ copilot }) => <View {...copilot}><Text>Step 1</Text></View>;
    
    ...
    
    <CopilotStep text="This is a hello world example!" order={1} name="hello">
      <Step1 />
    </CopilotStep>
    
    "dependencies": {
        "@okgrow/react-native-copilot": "^1.0.0",
        "expo": "24.0.2",
        "react": "^16.0.0",
        "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
      },
    
    Reviewed by appjitsu at 2018-01-17 21:58
  • 3. Is there a way to make the element of the current CopilotStep touchable/pressable?

    Hi is it possible for me to be able to allow the users to click on touchable elements in the current CopilotStep? Right now even though it has a white background while everywhere else on the screen is black, it is still not possible to click on that element. I have tried both 'view' and 'svg' overlay's.

    Would greatly appreciate your help!

    Reviewed by AngSin at 2018-07-04 21:33
  • 4. Two Default Export Problem

    Hello

    I have a problem for react native copilot. My js file has export like export default connect( (state) => { return { selectedCategories: state.mainMenu.items, user: state.user } } )(NewSelectTopic);

    Because of these i don't added export default copilot(NewSelectTopic) . how can i do a solution here?

    Thanks.

    Reviewed by leventyildirim61 at 2018-03-20 10:55
  • 5. Bug: Vertical Offset on Android

    Current Behavior

    Tutorial tooltips work on iOS, but on Android they have a - Y offset, which is not the desired behavior.

    Input Code

    I created a blank RN project with: react-native init CopilotTest, and added these lines to App.js:

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow
     */
    
    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';
    
    +import { copilot, walkthroughable, CopilotStep } from '@okgrow/react-native-copilot'
    
    +const CopilotView = walkthroughable(View)
    +const CopilotText = walkthroughable(Text)
    
    const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
      android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
    });
    
    type Props = {};
    class App extends Component<Props> {
    
    +  componentDidMount() {
    +    this.props.start()
    +  }
    
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>Welcome to React Native!</Text>
            <Text style={styles.instructions}>To get started, edit App.js</Text>
            <Text style={styles.instructions}>{instructions}</Text>
    +        <CopilotStep text='Test Copilot Step' order={1} name='test'>
    +          <CopilotText>Test</CopilotText>
    +        </CopilotStep>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    
    -export default App
    +export default copilot()(App)
    

    Expected behavior/code Android should work the same way it does on iOS

    Environment

    • Device iOS: iPhone 5 [iOS 10], Simulators: iPhone 6, 7 [iOS 12]

    • Device : Xiaomi Mi A2, Android Studio Emulators [Oreo, Marshmallow]

    • react-native-copilot: GitHub dependency, SHA-1: 13ecbca5c9dc1597bd3a7d83d778ecd1a568eb66

    • react-native: v0.56, v0.57

    • react-native-svg: 8.0.10

    Possible Solution I will look into it...

    Additional context/Screenshots

    iOS (working properly): screen-ios

    Android (NOT working properly): screen-android

    Reviewed by DusanDimitric at 2019-01-14 10:13
  • 6. Improve the documentation

    There are 5 parameters in the copilot() HOC function, but only overlay and animated are documented. Can you explain how to use other parameters?

    I use this library on Android device, and I follow the example to create the tour guide. But I found if I don't add androidStatusBarVisible: false into copliot(), the Modal will have some offset so that part of view will be cut. In fact, the statusBar is visible on my screen, I don't understand why I should pass androidStatusBarVisible as false.

    Reviewed by jordenchang55 at 2018-07-03 10:31
  • 7. Allow to set tool tips as full width

    When tool tips are pointed for an object close to the middle, the tool tip bubble becomes very small, which makes it hard to read when there's quite some text.

    Before

    cramped tooltip with half of the width

    After

    full width tooltip with some margins

    ~~Couldn't run the tests locally, if someone can help me with this I'll gladly fix and update the tests!~~

    Thank you for the very useful tool! 👏

    If this feature is something you don't wish to have it (for any reason), feel free to close the pull request, we needed it, so we've forked and are currently using the fork, so if this feature ends on the tool great! If not, we'll manage it 😃

    Reviewed by mloureiro at 2019-09-10 11:25
  • 8. Copilot steps doesn't display in the screen

    This is my code, what should I do to see Copilot steps which will show hints one by one? I saw that in example there is props.start() to start the tutorial, however, how to make it work, if Copilot steps inside the render function?

    import { copilot,walkthroughable, CopilotStep } from '@okgrow/react-native-copilot';
    const CopilotText = walkthroughable(Text);
    
    class Home extends Component {
    
    render() {
    return (
      <View>     
        <CopilotStep text="Hint 1" order={1} name="openApp">
           <CopilotText>Step 1 !</CopilotText>
        </CopilotStep>
        </View>
        <View>
          <CopilotStep text="Hint 2" order={2} name="openApp2">
           <CopilotText>Step 2!</CopilotText>
        </CopilotStep>
        </View>
        <View>
        <CopilotStep text="Hint 3!" order={3} name="openApp3">
           <CopilotText>Step 3</CopilotText>
        </CopilotStep>
        </View>
    )}
    }
    
    export default copilot()(Home);
    
    Reviewed by Luckygirlllll at 2018-02-09 11:34
  • 9. Described event emitters in readme

    Hi and thanks for the project, it saved lots of time to us!

    I needed events and discovered that they exist (#50), but undocumented, so here is my attempt to pure the light on this section 😄

    It might have some grammatical issues, feel free to correct me.

    Reviewed by naffiq at 2018-07-17 12:13
  • 10. App shows all steps together, instead of showing them step by step

    I have added 3 steps, I thought that they will display one by one, however, they all displayed together at the same time. Why is that?

    import { copilot,walkthroughable, CopilotStep } from '@okgrow/react-native-copilot';
    const CopilotText = walkthroughable(Text);
    
    class Home extends Component {
    
    render() {
    return (
      <View>     
        <CopilotStep text="step 1" order={1} name="openApp">
           <CopilotText>Step 1 !</CopilotText>
        </CopilotStep>
        </View>
        <View>
          <CopilotStep text="Step 2" order={2} name="openApp2">
           <CopilotText>Step 2!</CopilotText>
        </CopilotStep>
        </View>
        <View>
        <CopilotStep text="Step 3!" order={3} name="openApp3">
           <CopilotText>Step 3</CopilotText>
        </CopilotStep>
        </View>
    )}
    }
    
    
    export default copilot()(Home);
    
    
    
    
    Reviewed by Luckygirlllll at 2018-02-08 12:23
  • 11. this.props.start() being called but not starting copilot.

    Current Behavior I have a Menu component wrapped in a copilot() and a Home screen wrapped in a copilot(). The home screen is contained in a react-navigation drawer. The menu component is the component shown when the drawer is open. I activate the tutorial by setting an asyncstorage variable tutorialModeOn in a menu available in the open drawer. The tutorial starts on the Menu component, but does not start on the Home screen next time it is in focus.

    Input Code

    I set up the following in componentDidMount() for the menu:

      componentDidMount() {
        this.focusListener = this.props.navigation.addListener('didFocus', async () => {
          if(this.props.navigation.state.isDrawerOpen) {
            const tutorialModeOn = await utils.getCurrentTutorialMode();
            if(tutorialModeOn) {
              this.props.start();
            }
          }
        });
      }
    

    and in the Home component, similarly:

     componentDidMount() {
        this.focusListener = this.props.navigation.addListener('didFocus', async () => {
          const parent = this.props.navigation.dangerouslyGetParent();
          const grandparent = parent && parent.dangerouslyGetParent();
          const isDrawerOpen = grandparent && grandparent.state && grandparent.state.isDrawerOpen;
          if(!isDrawerOpen) {
            const tutorialModeOn = await utils.getCurrentTutorialMode();
            if(tutorialModeOn) {
              this.props.start();
            }
          }
        });
      }
    

    Expected behavior/code When the Home component receives focus it should activate the tutorial. this.props.start() is called, but doesn't start the tutorial. If I show the Home component first, the menu component's start call is activated next time it receives focus, but doesn't start either. It seems as if the start call called first is interfering with the other start call on the same Drawer Navigator. If so, how I can I prevent this?

    Environment

    • Device: [e.g. iPhone 7]
    • OS: [e.g. iOS12]
    • react-native-copilot: [e.g. v2.4.3]
    • react-native: [e.g. v0.57.8]
    • react-native-svg: [e.g. v9.2.4]

    Possible Solution Perhaps implementing this.props.stop() would solve this.

    Reviewed by sinewave440hz at 2019-05-02 15:59
  • 12. chore(deps): bump simple-plist from 1.0.0 to 1.3.1 in /example

    Bumps simple-plist from 1.0.0 to 1.3.1.

    Release notes

    Sourced from simple-plist's releases.

    TypeScript

    This release is a rewrite of the JavaScript code into TypeScript code to add strong typing for those who would choose to use it.

    As this is a minor release there should be minimal risk in upgrading from v1.1.1

    1.1.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-02 00:03
  • 13. chore(deps): bump simple-plist from 1.0.0 to 1.3.1

    Bumps simple-plist from 1.0.0 to 1.3.1.

    Release notes

    Sourced from simple-plist's releases.

    TypeScript

    This release is a rewrite of the JavaScript code into TypeScript code to add strong typing for those who would choose to use it.

    As this is a minor release there should be minimal risk in upgrading from v1.1.1

    1.1.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-06-02 00:03
  • 14. chore(deps): bump async from 2.6.0 to 2.6.4

    Bumps async from 2.6.0 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)

    v2.6.1

    • Updated lodash to prevent npm audit warnings. (#1532, #1533)
    • Made async-es more optimized for webpack users (#1517)
    • Fixed a stack overflow with large collections and a synchronous iterator (#1514)
    • Various small fixes/chores (#1505, #1511, #1527, #1530)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 19:26
  • 15. chore(deps): bump plist from 3.0.1 to 3.0.4

    Bumps plist from 3.0.1 to 3.0.4.

    Changelog

    Sourced from plist's changelog.

    3.0.4 / 2021-08-27

    3.0.3 / 2021-08-04

    • update xmldom to 0.6.0 to patch critical vulnerability (Mike Reinstein)
    • remove flaky saucelabs teseting badge (Mike Reinstein)

    3.0.2 / 2021-03-25

    • update xmldom to 0.5.0 to patch critical vulnerability (Mike Reinstein)
    • update saucelab credentials to point at mreinstein's saucelabs account (Mike Reinstein)
    • remove a bunch of test versions from the matrix because they weren't working in zuul + sauce (Mike Reinstein)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-01 23:46
  • 16. chore(deps): bump plist from 3.0.1 to 3.0.4 in /example

    Bumps plist from 3.0.1 to 3.0.4.

    Changelog

    Sourced from plist's changelog.

    3.0.4 / 2021-08-27

    3.0.3 / 2021-08-04

    • update xmldom to 0.6.0 to patch critical vulnerability (Mike Reinstein)
    • remove flaky saucelabs teseting badge (Mike Reinstein)

    3.0.2 / 2021-03-25

    • update xmldom to 0.5.0 to patch critical vulnerability (Mike Reinstein)
    • update saucelab credentials to point at mreinstein's saucelabs account (Mike Reinstein)
    • remove a bunch of test versions from the matrix because they weren't working in zuul + sauce (Mike Reinstein)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-03-01 23:45
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

react-native-step-indicator A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView. Features Can be

Jul 31, 2022
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Aug 3, 2022
🚀 Organize your games easily. Create groups to play your favorite games with your friends.
🚀  Organize your games easily. Create groups to play your favorite games with your friends.

?? Introduction ?? Technologies This project was developed using the following technologies: React Native Expo ??️ Features OAuth2 Social Authenticati

Sep 10, 2021
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Aug 6, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Jul 15, 2022
react-native-egg make your react native app infinitely more fun !!

react-native-egg react-native-egg make your react native app infinitely more fun !! Implementation simple gestures detection achieve trigger easter eg

Aug 4, 2022
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

May 7, 2022
[NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app
[NOT MAINTAINED] :bar_chart: Add line, area, pie, and bar charts to your React Native app

react-native-chart NOTE: I have not been able to maintain this repo. Recommend switching to Victory Charts. Getting Started npm i react-native-chart -

Jun 20, 2022
Tinder-like swipe cards for your React Native app
Tinder-like swipe cards for your React Native app

Swipe Cards for React Native A package based on @brentvatne's awesome example. Quick Start npm install --save react-native-swipe-cards Create a module

Jul 22, 2022
A clean and lightweight progress HUD for your React Native app.

React Native Progress HUD React Native Progress HUD is a React Native port of the popular SVProgressHUD. It is a clean and easy-to-use HUD meant to di

Jul 12, 2022
Make your app reactive with MobX and react-native-router-flux
Make your app reactive with MobX and react-native-router-flux

Package is obsolete with latest react-native-router-flux v4 - RNRF allows now wrapping all scenes and navbar by passing wrapBy param (equal to MobX ob

Jul 29, 2022
tinder-like loader for your react native app
tinder-like loader for your react native app

Pulse Loader for React Native tinder-like loader for your react native app Installation npm i react-native-pulse-loader --save Example import React fr

Jul 24, 2022
A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app

react-native-idle-timer A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app Install npm insta

Jul 18, 2022
Simple and lightweight What's New style component that shows your React Native app new features
Simple and lightweight What's New style component that shows your React Native app new features

React Native New Feature ☀️ Simple and lightweight What's New style component that shows your React Native app new features ☀️ If you like this projec

Mar 22, 2022
RN-TourGuide - A flexible tourguide for your react native app
RN-TourGuide - A flexible tourguide for your react native app

??Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)

Jul 26, 2022
Tailwindcss-react-native: Use Tailwindcss in your cross platform React Native applications

tailwindcss-react-native Use Tailwindcss in your cross platform React Native applications. This library is currently stabilising for a v1 release. Fol

Aug 7, 2022
MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects
MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects

AwesomeClockView MindInventory react-native-awesome-clock package can be used to show this awesome Clock UI in your react-native projects. Installatio

Jul 28, 2022
This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.
This module brings

react-native-display This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app per

Jul 29, 2022
Swap your app with an offline version while there's no connectivity

react-native-offline-mode A higher-order component for React Native which will conditionally show a component OR something else depending on internet

May 17, 2022