{"_id":"@anybyte/rn-tourguide","_rev":"1-e3a7471bf6316780f88758587f06fa83","name":"@anybyte/rn-tourguide","dist-tags":{"latest":"2.7.5"},"versions":{"2.7.5":{"name":"@anybyte/rn-tourguide","version":"2.7.5","description":"Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)","main":"lib/index.js","types":"lib/index.d.ts","private":false,"scripts":{"start":"yarn config:dev && expo start -c","start:web":"yarn config:dev && expo start -c -w","test":"jest --no-watchman","tsc":"node_modules/.bin/tsc --noEmit","tsc:watch":"node_modules/.bin/tsc --noEmit --watch","build":"node_modules/.bin/tsc","config:dev":"json -I -f package.json -e 'this.main=\"node_modules/expo/AppEntry.js\"'","config:npm":"json -I -f package.json -e 'this.main=\"lib/index.js\"'","lint":"tslint --project .","verify":"yarn test && yarn lint && yarn tsc && yarn build","prepublishOnly":"yarn verify && yarn config:npm","postpublish":"yarn config:dev","cleaning":"rm -rf node_modules && rm -f yarn.lock && yarn cache clean && yarn install && watchman watch-del-all && rm -fr $TMPDIR/react-*","deploy":"gh-pages -d web-build","predeploy":"yarn verify && expo build:web"},"repository":{"type":"git","url":"git+https://github.com/anybyte/rn-tourguide.git"},"keywords":["react-native","react-native-joyride","react","copilot","intro.js","intro"],"author":{"name":"Maxim Lyaskovskiy","email":"m.lyaskovskiy@anybyte.org"},"license":"MIT","bugs":{"url":"https://github.com/anybyte/rn-tourguide/issues"},"homepage":"https://anybyte.github.io/rn-tourguide/","devDependencies":{"@types/hoist-non-react-statics":"3.3.1","@types/jest":"25.2.3","@types/lodash.clamp":"4.0.6","@types/react":"^16.9.11","@types/react-dom":"16.9.4","@types/react-native":"^0.60.22","@types/react-test-renderer":"16.9.2","babel-preset-expo":"^8.1.0","expo":"^37.0.0","gh-pages":"2.2.0","jest":"^26.0.1","jest-react-native":"^18.0.0","json":"^9.0.6","react":"16.13.1","react-dom":"16.13.1","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-svg":"11.0.1","react-native-web":"0.12.2","react-test-renderer":">=16.8.0","tslint":"^5.20.1","tslint-config-prettier":"^1.18.0","typescript":"^3.8.3"},"jest":{"preset":"react-native","transform":{"^.+\\.tsx?$":"/node_modules/react-native/jest/preprocessor.js"},"transformIgnorePatterns":["node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"],"modulePathIgnorePatterns":["example"],"globals":{"__TEST__":true}},"dependencies":{"eventemitter2":"^6.4.4","flubber":"~0.4.2","hoist-non-react-statics":"~3.0.1","lodash.clamp":"~4.0.3","memoize-one":"5.1.1"},"resolutions":{"logkitty":"^0.7.1","mem":"^4.0.0"},"licenseText":"MIT License\n\nCopyright (c) 2020 Xavier Carpentier SAS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\nMIT License\n\nCopyright (c) 2017 OK GROW!\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@anybyte/rn-tourguide@2.7.5","dist":{"shasum":"755bde53138d982ada9e4afb999acf6a9293158d","integrity":"sha512-1u4JCW6QK0HNddtRhXHeBp2E4ZnhM3qwSY2id7zDLrZcN/Yx7BUBDQ9drj5j4e9UfaG+pp6nIiP+4iL+u5GxWQ==","tarball":"https://registry.npmjs.org/@anybyte/rn-tourguide/-/rn-tourguide-2.7.5.tgz","fileCount":43,"unpackedSize":63865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhB/+oCRA9TVsSAnZWagAAdPQQAJzjPKkqU7B5o+qtBcgj\nZ++pXb0ev2OXndfPGVIlBzpCr0ZxcORmi1RhJaYDrL4maFhVtWdz4SRkK/vx\n0+mzXalv6G1gw9Dz116Ii5j3Zxs8/81YrrbV5izjYJvrx0BJX0Zki2AGfN1P\noOPPtl3PSbg/bLpN6ybCq0sxd5L/VbSVc/k9Vp4hgivtGejNW4PePtR6O1vA\nRzV09EFgviNQeyGj7wRX+msTeioAS0FHzTpgJv4D2yXn+0tLuOHGQaqy6ZOM\nnNKPvxQTffo1ASNttMsn+ljkrS5pIFsX5IpuG2G7XnioIUvYwNY7lEvZIi8N\nr7j4X4tVRq0ELYuPsZAZvTV6epkxO4AkNfJjj2H6znFzDI+NYoz1JyCKr8IE\ny7XIs3DUgWKsVogsa813xY1PxYb/4EBFDqaT2HrBO+QPisc2fJMUFmcx+0EW\nIuZ7vYKETeA9zJ6bGg6Y4G6Zl8xbF3E7hNIrNptMvEuOUghLmLZhVAt5e+Qk\n2yP2BHF95A6myaWXhxGHZv7wIHqk1uITtxIR7HaXUA5lsQ8DIKYxHtYECD1P\n6i15ShZHpMsIOfzhO30vLCuFwzSuAOKNC85cJg1puU4plfpuaeIoAtUw5PKA\nftnJdHg1G6qx4ixE1t7ko4/BycTPqK9ucot8rACM7vBTBQojjbGOAZhCNWOV\nbZXT\r\n=ILKu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDt0NYL/QkWzfZHjo82VMqoK9syK69VloGuGqJitFVXqAiEA4x8yA1vRLZGGSEHsP2oIjXaZ+uVfhvn8RWj+aRvjIHU="}]},"_npmUser":{"name":"anybyte","email":"maxavatar007@gmail.com"},"directories":{},"maintainers":[{"name":"anybyte","email":"maxavatar007@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_2.7.5_1627914152170_0.06656498903158004"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-02T14:22:32.120Z","2.7.5":"2021-08-02T14:22:32.394Z","modified":"2022-04-04T14:26:37.185Z"},"maintainers":[{"name":"anybyte","email":"maxavatar007@gmail.com"}],"description":"Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)","homepage":"https://anybyte.github.io/rn-tourguide/","keywords":["react-native","react-native-joyride","react","copilot","intro.js","intro"],"repository":{"type":"git","url":"git+https://github.com/anybyte/rn-tourguide.git"},"author":{"name":"Maxim Lyaskovskiy","email":"m.lyaskovskiy@anybyte.org"},"bugs":{"url":"https://github.com/anybyte/rn-tourguide/issues"},"license":"MIT","readme":"

RN-TourGuide

\n\n

\n A flexible tourguide for your react native app!\n
๐ŸŽ‰ Webable ๐ŸŽ‰\n
(a rewriting of react-native-copilot)\n

\n\n

\n \"RN\n

\n

\n \n ๐ŸŽ‰DEMO WEB ๐ŸŽ‰\n \n

\n\n
\n

\n \n \"npm\n \n \n \"NPM\n \n \n \n \n \n \n \n

\n
\n\n## Installation\n\n```\nyarn add @anybyte/rn-tourguide\n```\n\n```\nyarn add react-native-svg\nreact-native link react-native-svg\n```\n\nIf you are using Expo:\n\n```\nexpo install react-native-svg\n```\n\n## Usage\n\n```tsx\nimport {\n TourGuideProvider, // Main provider\n TourGuideZone, // Main wrapper of highlight component\n TourGuideZoneByPosition, // Component to use mask on overlay (ie, position absolute)\n useTourGuideController, // hook to start, etc.\n} from '@anybyte/rn-tourguide'\n\n// Add at the root of you app!\nfunction App() {\n return (\n \n \n \n )\n}\n\nconst AppContent = () => {\n const iconProps = { size: 40, color: '#888' }\n\n // Use Hooks to control!\n const {\n canStart, // a boolean indicate if you can start tour guide\n start, // a function to start the tourguide\n stop, // a function to stopping it\n eventEmitter, // an object for listening some events\n } = useTourGuideController()\n\n // Can start at mount ๐ŸŽ‰\n // you need to wait until everything is registered ๐Ÿ˜\n React.useEffect(() => {\n if (canStart) {\n // ๐Ÿ‘ˆ test if you can start otherwise nothing will happen\n start()\n }\n }, [canStart]) // ๐Ÿ‘ˆ don't miss it!\n\n const handleOnStart = () => console.log('start')\n const handleOnStop = () => console.log('stop')\n const handleOnStepChange = () => console.log(`stepChange`)\n\n React.useEffect(() => {\n eventEmitter.on('start', handleOnStart)\n eventEmitter.on('stop', handleOnStop)\n eventEmitter.on('stepChange', handleOnStepChange)\n\n return () => {\n eventEmitter.off('start', handleOnStart)\n eventEmitter.off('stop', handleOnStop)\n eventEmitter.off('stepChange', handleOnStepChange)\n }\n }, [])\n\n return (\n \n {/*\n\n Use TourGuideZone only to wrap your component\n\n */}\n \n \n {'Welcome to the demo of\\n\"rn-tourguide\"'}\n \n \n \n start()}>\n START THE TUTORIAL!\n \n\n \n start(4)}>\n Step 4\n \n \n start(2)}>\n Step 2\n \n \n Stop\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n```\n\n`TourGuide` props:\n\n```ts\ninterface TourGuideZoneProps {\n zone: number // A positive number indicating the order of the step in the entire walkthrough.\n isTourGuide?: boolean // return children without wrapping id false\n text?: string // text in tooltip\n shape?: Shape // which shape\n maskOffset?: number // offset around zone\n borderRadius?: number // round corner when rectangle\n startAtMount?: boolean // start at mount\n keepTooltipPosition?: boolean\n tooltipBottomOffset?: number\n children: React.ReactNode\n}\n\ntype Shape = 'circle' | 'rectangle' | 'circle_and_keep' | 'rectangle_and_keep'\n\nexport interface TourGuideProviderProps {\n tooltipComponent?: React.ComponentType\n tooltipStyle?: StyleProp\n labels?: Labels\n androidStatusBarVisible?: boolean\n backdropColor?: string\n verticalOffset?: number\n wrapperStyle?: StyleProp\n maskOffset?: number\n borderRadius?: number\n animationDuration?: number\n children: React.ReactNode\n dismissOnPress: boolean\n}\n\ninterface TooltipProps {\n isFirstStep?: boolean\n isLastStep?: boolean\n currentStep: Step\n labels?: Labels\n handleNext?(): void\n handlePrev?(): void\n handleStop?(): void\n}\n\ninterface Labels {\n skip?: string\n previous?: string\n next?: string\n finish?: string\n}\n```\n\nIn order to start the tutorial, you can call the `start` function from `useTourGuideController` hook:\n\n```js\nfunction HomeScreen() {\n const { start } = useTourGuideController()\n\n React.useEffect(() => {\n start()\n }, [])\n\n\n render() {\n // ...\n }\n}\n\nexport default HomeScreen\n```\n\nIf you are looking for a working example, please check out [this link](https://github.com/xcarpentier/rn-tourguide/blob/master/App.tsx).\n\n### Custom tooltip component\n\nYou 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](https://github.com/xcarpentier/rn-tourguide/blob/master/src/components/Tooltip.tsx).\n\n```js\nconst TooltipComponent = ({\n isFirstStep,\n isLastStep,\n handleNext,\n handlePrev,\n handleStop,\n currentStep,\n}) => (\n // ...\n);\n\n\n// ...\n\n```\n\n### Custom tooltip styling\n\nYou can customize tooltips style:\n\n```tsx\nconst style = {\n backgroundColor: '#9FA8DA',\n borderRadius: 10,\n paddingTop: 5,\n}\n\n\n// ...\n\n```\n\n### Custom mask color\n\nYou can customize the mask color - default is `rgba(0, 0, 0, 0.4)`, by passing a color string to the `copilot` HOC maker.\n\n```tsx\n\n // ...\n\n```\n\n### Custom labels (for i18n)\n\nYou can localize labels:\n\n```tsx\n\n // ...\n\n```\n\n### Listening to the events\n\nAlong with `start()`, `useTourGuideController` passes `copilotEvents` function to the component to help you with tracking of tutorial progress. It utilizes [mitt](https://github.com/developit/mitt) under the hood, you can see how full API there.\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## Contributing\n\nIssues and Pull Requests are always welcome.\n\n## Hire an expert!\n\nLooking for a ReactNative freelance expert with more than 14 years experience? Contact me from myย [website](https://xaviercarpentier.com)!\n\n## License\n\n- [MIT](LICENSE) ยฉ 2020 Xavier CARPENTIER SAS, https://xaviercarpentier.com.\n- [MIT](LICENSE) ยฉ 2017 OK GROW!, https://www.okgrow.com.\n","readmeFilename":"README.md"}