{"id":3997,"url":"https://github.com/mohebifar/react-native-copilot","last_synced_at":"2026-01-12T03:01:37.984Z","repository":{"id":37493301,"uuid":"106032326","full_name":"mohebifar/react-native-copilot","owner":"mohebifar","description":"Step-by-step walkthrough tooltip for your react native app","archived":false,"fork":false,"pushed_at":"2024-12-17T21:36:24.000Z","size":951,"stargazers_count":2385,"open_issues_count":122,"forks_count":431,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-10-21T01:04:21.061Z","etag":null,"topics":["intro","react-native","tooltip","tutorial","walkthrough"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohebifar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"mohebifar","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2017-10-06T17:32:03.000Z","updated_at":"2025-10-14T18:06:53.000Z","dependencies_parsed_at":"2024-05-02T04:56:35.989Z","dependency_job_id":"5ba538d5-fd22-4093-9b97-986e0324e30a","html_url":"https://github.com/mohebifar/react-native-copilot","commit_stats":{"total_commits":162,"total_committers":35,"mean_commits":4.628571428571429,"dds":0.6728395061728395,"last_synced_commit":"854cfe31156c86ee7ea35bae3086fe55ef5206e5"},"previous_names":["okgrow/react-native-copilot","okgrow/react-native-joyride"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/mohebifar/react-native-copilot","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-copilot","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-copilot/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-copilot/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-copilot/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohebifar","download_url":"https://codeload.github.com/mohebifar/react-native-copilot/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohebifar%2Freact-native-copilot/sbom","scorecard":{"id":656893,"data":{"date":"2025-08-11","repo":{"name":"github.com/mohebifar/react-native-copilot","commit":"bd17230694566e1680b5f45d83105cba0af8ccc3"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.7,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":2,"reason":"Found 6/21 approved changesets -- score normalized to 2","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/release.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/mohebifar/react-native-copilot/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/mohebifar/react-native-copilot/release.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/mohebifar/react-native-copilot/release.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 19 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"21 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-6w63-h3fj-q4vw","Warn: Project is vulnerable to: GHSA-mpg4-rc92-vx8v","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-m5qc-5hw7-8vg7","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-3mv9-4h5g-vhg3"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T14:55:42.789Z","repository_id":37493301,"created_at":"2025-08-21T14:55:42.789Z","updated_at":"2025-08-21T14:55:42.789Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28332840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["intro","react-native","tooltip","tutorial","walkthrough"],"created_at":"2024-01-05T20:16:58.013Z","updated_at":"2026-01-12T03:01:37.950Z","avatar_url":"https://github.com/mohebifar.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mohebifar"],"categories":["Components","JavaScript","TypeScript","tutorial"],"sub_categories":["UI"],"readme":"\u003ch1 align=\"center\"\u003eReact Native Copilot\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/mohebifar/react-native-copilot/actions/workflows/release.yml\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/mohebifar/react-native-copilot/release.yml?branch=master\u0026style=flat-square\" alt=\"Build Status\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-native-copilot\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/react-native-copilot.svg?style=flat-square\" alt=\"NPM Version\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-native-copilot\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dm/react-native-copilot.svg?style=flat-square\" alt=\"NPM Downloads\" /\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  Step-by-step walkthrough for your react native app!\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://media.giphy.com/media/65VKIzGWZmHiEgEBi7/giphy.gif\" alt=\"React Native Copilot\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://expo.io/@mohebifar/copilot-example\" \u003e\n    Demo\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\n```\nyarn add react-native-copilot\n\n# or with npm:\n\nnpm install --save react-native-copilot\n```\n\n**Optional**: If you want to have the smooth SVG animation, you should install and link [`react-native-svg`](https://github.com/software-mansion/react-native-svg).\n\n## Usage\n\nWrap the portion of your app that you want to use copilot with inside `\u003cCopilotProvider\u003e`:\n\n```js\nimport { CopilotProvider } from \"react-native-copilot\";\n\nconst AppWithCopilot = () =\u003e {\n  return (\n    \u003cCopilotProvider\u003e\n      \u003cHomeScreen /\u003e\n    \u003c/CopilotProvider\u003e\n  );\n};\n```\n\n**NOTE**: The old way of using copilot with the `copilot()` HOC maker is deprecated in v3. It will continue to work but it's not recommended and may be removed in the future.\n\nBefore 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`.\n\n```jsx\nimport {\n  CopilotProvider,\n  CopilotStep,\n  walkthroughable,\n} from \"react-native-copilot\";\n\nconst CopilotText = walkthroughable(Text);\n\nconst HomeScreen = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cCopilotStep text=\"This is a hello world example!\" order={1} name=\"hello\"\u003e\n        \u003cCopilotText\u003eHello world!\u003c/CopilotText\u003e\n      \u003c/CopilotStep\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\nEvery `CopilotStep` must have these props:\n\n1. **name**: A unique name for the walkthrough step.\n2. **order**: A positive number indicating the order of the step in the entire walkthrough.\n3. **text**: The text shown as the description for the step.\n\nAdditionally, a step may set the **active** prop, a boolean that controls whether the step is used or skipped.\n\nIn order to start the tutorial, you can call the `start` function from the `useCopilot` hook:\n\n```js\nconst HomeScreen = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cButton title=\"Start tutorial\" onPress={() =\u003e start()} /\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\nIf you are looking for a working example, please check out [this link](https://github.com/mohebifar/react-native-copilot/blob/master/example/App.jsx).\n\n### Overlays and animation\n\nThe overlay in react-native-copilot is the component that draws the dark transparent over the screen. React-native-copilot comes with two overlay options: `view` and `svg`.\n\nThe `view` overlay uses 4 rectangles drawn around the target element using the `\u003cView /\u003e` component. We don't recommend using animation with this overlay since it's sluggish on some devices specially on Android.\n\nThe `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 can install it using:\n\n```\nexpo install react-native-svg\n```\n\nOr if you are using react-native-cli:\n\n```\nyarn add react-native-svg\n\n# or with npm\n\nnpm install --save react-native-svg\n\ncd ios \u0026\u0026 pod install\n```\n\nYou can specify the overlay by passing the `overlay` prop to the `\u003cCopilotProvider /\u003e` component:\n\n```js\n\u003cCopilotProvider overlay=\"svg\" {/* or \"view\" */}\u003e\n  \u003cApp /\u003e\n\u003c/CopilotProvider\u003e\n```\n\nBy default, if overlay is not explicitly specified, the `svg` overlay will be used if `react-native-svg` is installed, otherwise the `view` overlay will be used.\n\n### Custom tooltip and step number UI components\n\nYou can customize the tooltip and the step number components by passing a component to the `CopilotProvider` component. If you are looking for an example tooltip component, take a look at [the default ui implementations](https://github.com/mohebifar/react-native-copilot/blob/master/src/components/default-ui).\n\n```js\nconst TooltipComponent = () =\u003e {\n  const {\n    isFirstStep,\n    isLastStep,\n    goToNext,\n    goToNth,\n    goToPrev,\n    stop,\n    currentStep,\n  } = useCopilot();\n\n  return (\n    // ...\n  )\n};\n\n\n\u003cCopilotProvider tooltipComponent={TooltipComponent} stepNumberComponent={StepComponent}\u003e\n  \u003cApp /\u003e\n\u003c/CopilotProvider\u003e\n```\n\n### Navigating through the tour\n\nThe above code snippet shows the functions passed to the tooltip. These are your primary navigation functions. Some notes on navigation:\n\n- `handleNext` and `handlePrev` will move the mask from the current wrapped component immediately to the next.\n\n- You can use `handleStop` in conjunction with `handleNth` to effectively \"pause\" a tour, allowing for user input, animations or any other interaction that shouldn't have the mask applied. Once you want to pick the tour back up, call `handleNth` on the next tour step.\n\nNote that `handleNth` is 1-indexed, which is in line with what your step orders should look like.\n\n### Custom tooltip styling\n\nYou can customize tooltip's wrapper style:\n\n```js\nconst style = {\n  backgroundColor: \"#9FA8DA\",\n  borderRadius: 10,\n  paddingTop: 5,\n};\n\n\u003cCopilotProvider tooltipStyle={style}\u003e\n  \u003cApp /\u003e\n\u003c/CopilotProvider\u003e;\n```\n\n#### Manage tooltip width\n\nBy default, the tooltip width is calculated dynamically. You can make it fixed-size by overriding both `width` and `maxWidth`, check the example bellow:\n\n```js\nconst MARGIN = 8;\nconst WIDTH = Dimensions.get(\"window\").width - 2 * MARGIN;\n\n\u003cCopioltProvider tooltipStyle={{ width: WIDTH, maxWidth: WIDTH, left: MARGIN }}\u003e\n  \u003cApp /\u003e\n\u003c/CopilotProvider\u003e;\n```\n\n### Custom tooltip arrow color\n\nYou can customize the tooltip's arrow color:\n\n```js\n\u003cCopilotProvider arrowColor=\"#9FA8DA\"\u003e\n  \u003cApp /\u003e\n\u003c/CopilotProvider\u003e\n```\n\n### Custom overlay color\n\nYou can customize the mask color - default is `rgba(0, 0, 0, 0.4)`, by passing a color string to the `CopilotProvider` component.\n\n```js\n\u003cCopilotProvider backdropColor=\"rgba(50, 50, 100, 0.9)\"\u003e\n  \u003cApp /\u003e\n\u003c/CopilotProvider\u003e\n```\n\n### Custom svg mask Path\n\nYou can customize the mask svg path by passing a function to the `CopilotProvider` component.\n\n```ts\nfunction SvgMaskPathFn(args: {\n  size: Animated.valueXY;\n  position: Animated.valueXY;\n  canvasSize: {\n    x: number;\n    y: number;\n  };\n  step: Step;\n}): string;\n```\n\nExample with circle:\n\n```js\nconst circleSvgPath = ({ position, canvasSize }) =\u003e\n  `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`;\n\n\u003cCopilotProvider svgMaskPath={circleSvgPath}\u003e\n  \u003cApp /\u003e\n\u003c/CopilotProvider\u003e;\n```\n\nExample with different overlay for specific step:\n\nGive name prop for the step\n\n```js\n\u003cCopilotStep text=\"This is a hello world example!\" order={1} name=\"hello\"\u003e\n  \u003cCopilotText\u003eHello world!\u003c/CopilotText\u003e\n\u003c/CopilotStep\u003e\n```\n\nNow you can return different svg path depending on step name\n\n```js\nconst customSvgPath = (args) =\u003e {\n  if (args.step?.name === \"hello\") {\n    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`;\n  } else {\n    return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${position.x._value},${\n      position.y._value\n    }H${position.x._value + size.x._value}V${\n      position.y._value + size.y._value\n    }H${position.x._value}V${position.y._value}Z`;\n  }\n};\n\n\u003cCopilotProvider svgMaskPath={customSvgPath}\u003e\n  \u003cApp /\u003e\n\u003c/CopilotProvider\u003e;\n```\n\n### Custom components as steps\n\nThe components wrapped inside `CopilotStep`, will receive a `copilot` prop with a mutable `ref` and `onLayou` which the outermost rendered element of the component or the element that you want the tooltip be shown around, must extend.\n\n```js\nimport { CopilotStep } from \"react-native-copilot\";\n\nconst CustomComponent = ({ copilot }) =\u003e (\n  \u003cView {...copilot}\u003e\n    \u003cText\u003eHello world!\u003c/Text\u003e\n  \u003c/View\u003e\n);\n\nconst HomeScreen = () =\u003e {\n  return (\n    \u003cView\u003e\n      \u003cCopilotStep text=\"This is a hello world example!\" order={1} name=\"hello\"\u003e\n        \u003cCustomComponent /\u003e\n      \u003c/CopilotStep\u003e\n    \u003c/View\u003e\n  );\n};\n```\n\n### Custom labels (for i18n)\n\nYou can localize labels:\n\n```js\n\u003cCopilotProvider\n  labels={{\n    previous: \"Vorheriger\",\n    next: \"Nächster\",\n    skip: \"Überspringen\",\n    finish: \"Beenden\"\n  }}\n\u003e\n```\n\n### Adjust vertical position\n\nIn order to adjust vertical position pass `verticalOffset` to the `CopilotProvider` component.\n\n```js\n\u003cCopilotProvider verticalOffset={36}\u003e\n```\n\n### Triggering the tutorial\n\nUse `const {start} = useCopilot()` to trigger the tutorial. You can either invoke it with a touch event or in `useEffect` to start after the comopnent mounts. Note that the component and all its descendants must be mounted before starting the tutorial since the `CopilotStep`s need to be registered first.\n\n### Usage inside a ScrollView\n\nPass the ScrollView reference as the second argument to the `start()` function.\neg `start(undefined, scrollViewRef)`\n\n```js\nimport { ScrollView } from \"react-native\";\n\nclass HomeScreen {\n  componentDidMount() {\n    // Starting the tutorial and passing the scrollview reference.\n    this.props.start(false, this.scrollView);\n  }\n\n  componentWillUnmount() {\n    // Don't forget to disable event handlers to prevent errors\n    this.props.copilotEvents.off(\"stop\");\n  }\n\n  render() {\n    \u003cScrollView ref={(ref) =\u003e (this.scrollView = ref)}\u003e// ...\u003c/ScrollView\u003e;\n  }\n}\n```\n\n### Listening to the events\n\n`useCopilot` provides a `copilotEvents` function prop to allow you to track the progress of the tutorial. It utilizes [mitt](https://github.com/developit/mitt) under the hood.\n\nList of available events is:\n\n- `start` — Copilot tutorial has started.\n- `stop` — Copilot tutorial has ended or skipped.\n- `stepChange` — Next step is triggered. Passes [`Step`](https://github.com/mohebifar/react-native-copilot/blob/master/src/types.js#L2) instance as event handler argument.\n\n**Example:**\n\n```js\nimport { useCopilot } from \"react-native-copilot\";\n\nconst HomeScreen = () =\u003e {\n  const { copilotEvents } = useCopilot();\n\n  useEffect(() =\u003e {\n    const listener = () =\u003e {\n      // Copilot tutorial finished!\n    };\n\n    copilotEvents.on(\"stop\", listener);\n\n    return () =\u003e {\n      copilotEvents.off(\"stop\", listener)\n    };\n  }, []);\n\n  return (\n    // ...\n  );\n}\n```\n\n## Contributing\n\nIssues and Pull Requests are always welcome.\n\nIf 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.\n\nCreation of this project was sponsored by OK GROW!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohebifar%2Freact-native-copilot","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohebifar%2Freact-native-copilot","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohebifar%2Freact-native-copilot/lists"}