{"_id":"@antoniel/rn-tourguide","_rev":"2-58b1106de59beaeefffad25f3459af10","name":"@antoniel/rn-tourguide","dist-tags":{"latest":"3.4.0"},"versions":{"3.3.0":{"name":"@antoniel/rn-tourguide","version":"3.3.0","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":"TZ=Europe/Paris jest --no-watchman","tsc":"tsc --noEmit","tsc:watch":"tsc --noEmit --watch","build":"rm -rf lib/ && 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/antoniel/rn-tourguide.git"},"keywords":["react-native","react-native-joyride","react","copilot","intro.js","intro"],"author":{"name":"Xavier Carpentier","email":"xcapetir@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/xcarpentier/rn-tourguide/issues"},"homepage":"https://xcarpentier.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":"~17.0.21","@types/react-dom":"~17.0.9","@types/react-native":"~0.64.12","@types/react-test-renderer":"16.9.2","babel-preset-expo":"8.5.1","expo":"^43.0.0","gh-pages":"2.2.0","jest":"^26.0.1","jest-expo":"^43.0.1","jest-react-native":"^18.0.0","json":"^10.0.0","react":"17.0.1","react-dom":"17.0.1","react-native":"0.64.2","react-native-svg":"12.1.1","react-native-web":"0.17.1","react-test-renderer":">=16.8.0","tslint":"^5.20.1","tslint-config-prettier":"^1.18.0","typescript":"~4.3.5"},"jest":{"preset":"jest-expo","globals":{"__TEST__":true}},"dependencies":{"flubber":"~0.4.2","hoist-non-react-statics":"~3.0.1","lodash.clamp":"~4.0.3","memoize-one":"5.1.1","mitt":"~1.1.3"},"resolutions":{"logkitty":"^0.7.1","mem":"^4.0.0","set-value":"^4.0.1"},"gitHead":"26e870a8524085172a0c1ec63da09513c4e1e415","_id":"@antoniel/rn-tourguide@3.3.0","_nodeVersion":"14.18.1","_npmVersion":"9.1.2","dist":{"integrity":"sha512-ynK5grXzKxZwH9bFK3DNE74+uYsGj/U1SKux2RQCpl6wMhAJLGRhoYPgu6KGqb/i8CDX7iXsYXvpeCEjqfGKvw==","shasum":"ac2e9d3cf2ead73463edb8ba9ffca5da20e8be74","tarball":"https://registry.npmjs.org/@antoniel/rn-tourguide/-/rn-tourguide-3.3.0.tgz","fileCount":41,"unpackedSize":69597,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHf5RMJ0xvjBj8SBXLDSF9NqjVxKDUBMs2J8cCG7s06uAiANOxf5Lm17eWEJsX0gznU0Zthn2+1QAIM4LvkxvpCHjg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3FaMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomaw//fgY4h8s3xs22gZx69GrOblnhZdgefQfJNuyqBpXg22URQkFH\r\nfXJ+OIcooTLMUw6zdIlm4tnwCV2Yi8tN6Lzm6ttrO3MQMXLUnXgdXMxskhI2\r\nL/qCNjrIiCv0yrtX3nj9op+db0FG7lMMxfZ9Tz0qSmSzqOPthO5Zmtpx44oU\r\n9NqJPL8C7Ngp/P3dmic9wFJjB4R17p+bEkkGdeT2ONpMuX9oNKNcgWdhNrgh\r\nYw0S/a3+A1fkX7u3KoZkh3xs4p2zYWpA628KWEw6NtJyUsoieZZ7sK4QsEFD\r\nhvGIrMSNxxgO1XVQnZhROiP5cZ8fJS3CocsMgMg/O/Z7FxchVy2teBxYqbCf\r\nD6e78rnN0a0pxYwr+6i/jo/L7qTnZiYIjGQtoirvHnzEoGuLD9GC4EVuIbEs\r\n49jsE+jRy0Fl9RJMjVCI/i8y9LrXvHKKnvFjg2BTu1AOEk4MLn/k+0LVqdib\r\nbRg8MiO+ljoY3JdB24JUx+u88m/WCrBTw98mBf+eKuEDtOnd+LTeTV87nvLU\r\n57MvrgkvFa90Pg3vlQ/DQVMBtfpiJm343igI++3sh8mjZtmSvEBjh0kXUWEf\r\not1x76A6bsLKngAzfw6UOm4KHL2JISqUY+yyn5jFWrrnDMTw2iG05RFy4xj/\r\nT/1Sk0Kmm6xAb0gNGnXe/PhvLuejqc9gpOs=\r\n=dBp6\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"antoniel","email":"antoniel2210@gmail.com"},"directories":{},"maintainers":[{"name":"antoniel","email":"antoniel2210@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.3.0_1675384460316_0.4993320531527048"},"_hasShrinkwrap":false},"3.3.1":{"name":"@antoniel/rn-tourguide","version":"3.3.1","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":"TZ=Europe/Paris jest --no-watchman","tsc":"tsc --noEmit","tsc:watch":"tsc --noEmit --watch","build":"rm -rf lib/ && 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/antoniel/rn-tourguide.git"},"keywords":["react-native","react-native-joyride","react","copilot","intro.js","intro"],"author":{"name":"Xavier Carpentier","email":"xcapetir@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/xcarpentier/rn-tourguide/issues"},"homepage":"https://xcarpentier.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":"~17.0.21","@types/react-dom":"~17.0.9","@types/react-native":"~0.64.12","@types/react-test-renderer":"16.9.2","babel-preset-expo":"8.5.1","expo":"^43.0.0","gh-pages":"2.2.0","jest":"^26.0.1","jest-expo":"^43.0.1","jest-react-native":"^18.0.0","json":"^10.0.0","react":"17.0.1","react-dom":"17.0.1","react-native":"0.64.2","react-native-svg":"12.1.1","react-native-web":"0.17.1","react-test-renderer":">=16.8.0","tslint":"^5.20.1","tslint-config-prettier":"^1.18.0","typescript":"~4.3.5"},"jest":{"preset":"jest-expo","globals":{"__TEST__":true}},"dependencies":{"flubber":"~0.4.2","hoist-non-react-statics":"~3.0.1","lodash.clamp":"~4.0.3","memoize-one":"5.1.1","mitt":"~1.1.3"},"resolutions":{"logkitty":"^0.7.1","mem":"^4.0.0","set-value":"^4.0.1"},"gitHead":"730401cf48e7bef96f1401568793d49138006407","_id":"@antoniel/rn-tourguide@3.3.1","_nodeVersion":"14.18.1","_npmVersion":"9.1.2","dist":{"integrity":"sha512-0wjAGNmnICuryWWfe5ob0GEtZl4nPpBxqrXZkcRihNHw1gmUSjJpveOPI1knoA7YIEYdJsTYO0BLJpLtYYsFfA==","shasum":"a908582fb7a8e55b77e606474e4c206740aaecc9","tarball":"https://registry.npmjs.org/@antoniel/rn-tourguide/-/rn-tourguide-3.3.1.tgz","fileCount":41,"unpackedSize":69883,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAv4iEAmnIcmJGWhmdvsoDGDC8RWNpQfAx7qxa1TfdqgAiEAviLcT8PZsJ5yuDzOkhhNEDQMQcfvU2Khceig9/naL98="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4T8PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotSw/+LZU8vQvf0BODjo+c1rb4dV9LMMHMRZCG38ei6ZUl6AG/o8cy\r\nSttgSgqEJknblkh1fVvKSuuEwb2b6jFceRkysv2crf+ueLhsBx5DnKfAgXsd\r\n///lZKgriTIYA6mnQjlUm+xcz0H5/835x9cgDI+KWOHKNaDgpsAV5SJf9T4T\r\nYUh0+4b7YVFIDQ98S9aUOoPMP+g3qv3Pjkra8fydoehsCwwUplJ9cL3VEn+H\r\nYyM5k2phLxGPng8Z5oHWPIfUR6VTzu2zeuXI+ZxaVNe0qKHcEgOuArHk4zfc\r\nKxH1S0rHxigzPKkPJI4fZIR60R6Pptz6GtPq/mXizxM7s+nicnVwxYywhJIB\r\nUG54Q0fQ8FbcmkbQZV0w52HDycM8a090E7gaPzX8z6Q69Gk0Hfa6buD6KYh5\r\nCqjpcRrEV5TdQd30oqzI1pdAXduAg/vUBLO3J1ZFZOMTsECm+feZQctzx0uv\r\nIwDCGD8bDHOb9wXpfWZR3DnGXxqjNVaTslg44jFtzWDFXtlPngeajdaYIy+S\r\nRTYzZ/610mqJca/NjpbGtPkhgMl4v+cqFeL0NyqYHIYuIo+hEBqvkeWWd1Rj\r\nJlG/cwmy6mFK/jOS4fZEXkWuJEp7d+hGXPqTOifJ4K2QPK3eqCXEckn50NLt\r\nenPdON0oThRjDYXCk+VfYT6GA1ptCYxP08g=\r\n=zPRS\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"antoniel","email":"antoniel2210@gmail.com"},"directories":{},"maintainers":[{"name":"antoniel","email":"antoniel2210@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.3.1_1675706127704_0.9785849462043323"},"_hasShrinkwrap":false},"3.4.0":{"name":"@antoniel/rn-tourguide","version":"3.4.0","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":"TZ=Europe/Paris jest --no-watchman","tsc":"tsc --noEmit","tsc:watch":"tsc --noEmit --watch","build":"rm -rf lib/ && 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/antoniel/rn-tourguide.git"},"keywords":["react-native","react-native-joyride","react","copilot","intro.js","intro"],"author":{"name":"Xavier Carpentier","email":"xcapetir@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/xcarpentier/rn-tourguide/issues"},"homepage":"https://xcarpentier.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":"~17.0.21","@types/react-dom":"~17.0.9","@types/react-native":"~0.64.12","@types/react-test-renderer":"16.9.2","babel-preset-expo":"8.5.1","expo":"^43.0.0","gh-pages":"2.2.0","jest":"^26.0.1","jest-expo":"^43.0.1","jest-react-native":"^18.0.0","json":"^10.0.0","react":"17.0.1","react-dom":"17.0.1","react-native":"0.64.2","react-native-svg":"12.1.1","react-native-web":"0.17.1","react-test-renderer":">=16.8.0","tslint":"^5.20.1","tslint-config-prettier":"^1.18.0","typescript":"~4.3.5"},"jest":{"preset":"jest-expo","globals":{"__TEST__":true}},"dependencies":{"flubber":"~0.4.2","hoist-non-react-statics":"~3.0.1","lodash.clamp":"~4.0.3","memoize-one":"5.1.1","mitt":"~1.1.3"},"resolutions":{"logkitty":"^0.7.1","mem":"^4.0.0","set-value":"^4.0.1"},"gitHead":"730401cf48e7bef96f1401568793d49138006407","_id":"@antoniel/rn-tourguide@3.4.0","_nodeVersion":"14.18.1","_npmVersion":"9.1.2","dist":{"integrity":"sha512-Yb+bVCFH4bbmkJJ65HS1NsbB+DOGoM/3CWj9P+p84Bdlgkl2rk/KbKcaUMW7mh9yjK/gKF030DXcQXm3mVmyUg==","shasum":"fe913f411c5d3da3cde4f4852b754a7fb0ae5eb3","tarball":"https://registry.npmjs.org/@antoniel/rn-tourguide/-/rn-tourguide-3.4.0.tgz","fileCount":41,"unpackedSize":70290,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBCWzb4iT2++cmsEXZ96uVJf0szF9JnpVcnkbNOjkAP4AiBPugthfnLtMwGhXJm+iXoJszLkzSXCHfCbQVGRlKEWzQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7AFaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAmBAAi2xtbH/EX+k7lGWyBfKxofWzJLMjJtZgGw36pk/7vnIJ1yz0\r\nB7owscz72zOJflzImYLHeJWVP+zi0Sdk9tQ/AmlgVhetoKPq6yntvWtfuKq2\r\nVnW4+Yp3Xeyqgf9HtV8V7xk/ezm9nuv7KdBnjjyGGfeTAk1lww2RTNQjwINg\r\nbXLmMElvXDDAmwGkrlZVk0OfRNRjqtJIOaU6HZCOmZummpAjLLGSSQVejruM\r\ncRpIDDUMmG1paOSHEQgv9yVUvuhZnPu4KudHaTgXNsNFKUjSAYm7Y/ondFoX\r\nGAHRyJvaTIi2eGIWzp3HjVNUy/LY/UMiIYi9aOakSUDooXET8ITjNzFLl1mB\r\ne+eM5v6riSuSdVSyKF91LOSW9P78ntL3XUBIxa42Z4WUX2Ysu0LaZSXer6Ow\r\nwOR4Ezsgu2LMWvRdfCRnrkGh9ru9SxQbrV3bkGmMs4tfgSrQEbV8g+XLZoG4\r\nNmjUz9WYcsjuPMuoOs9HFfPIRDFaocqLv+FSPqsDrrNzC4Sn8p4cbCwCxcc0\r\nlO3nWPSILyA/I/k18aoqKvTI26piP8dy8F+eo1OIBny3p2DJc6pahEY+qSRw\r\nT3y0XsUDFmi+kkgIBTNSlPXeLRvfqqfApaOFyHBgctIRYcmUr1wNLHhOG06r\r\neUZU9do6Kv3aeXlt0Nv89qRwgejly/Z66yw=\r\n=I+4i\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"antoniel","email":"antoniel2210@gmail.com"},"directories":{},"maintainers":[{"name":"antoniel","email":"antoniel2210@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.4.0_1676411225969_0.08410803851292425"},"_hasShrinkwrap":false}},"time":{"created":"2023-02-03T00:34:20.208Z","3.3.0":"2023-02-03T00:34:20.589Z","modified":"2023-02-14T21:47:06.294Z","3.3.1":"2023-02-06T17:55:27.909Z","3.4.0":"2023-02-14T21:47:06.191Z"},"maintainers":[{"name":"antoniel","email":"antoniel2210@gmail.com"}],"description":"Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)","homepage":"https://xcarpentier.github.io/rn-tourguide/","keywords":["react-native","react-native-joyride","react","copilot","intro.js","intro"],"repository":{"type":"git","url":"git+https://github.com/antoniel/rn-tourguide.git"},"author":{"name":"Xavier Carpentier","email":"xcapetir@gmail.com"},"bugs":{"url":"https://github.com/xcarpentier/rn-tourguide/issues"},"license":"MIT","readme":"<h1 align=\"center\">RN-TourGuide</h1>\n\n<p align=\"center\">\n  A flexible <strong>tourguide</strong> for your react native app!\n  <br/><small>🎉 Webable 🎉</small>\n  <br/><small>(a rewriting of react-native-copilot)</small>\n</p>\n\n<p align=\"center\">\n  <img width=\"250\" src=\"https://www.dropbox.com/s/9heua3qgd66125k/rn-tourguide.gif?dl=0&raw=1\" alt=\"RN Tourguide\" />\n</p>\n<p align=\"center\">\n    <a href=\"https://xcarpentier.github.io/rn-tourguide/\">\n      🎉DEMO WEB 🎉\n    </a>\n</p>\n\n<div align=\"center\">\n  <p align=\"center\">\n    <a href=\"https://www.npmjs.com/package/rn-tourguide\">\n      <img alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/rn-tourguide.svg\"/>\n    </a>\n    <a href=\"https://www.npmjs.com/package/rn-tourguide\">\n      <img src=\"https://img.shields.io/npm/v/rn-tourguide.svg\" alt=\"NPM Version\" />\n    </a>\n    <a href=\"http://reactnative.gallery/xcarpentier/rn-tourguide\">\n      <img src=\"https://img.shields.io/badge/reactnative.gallery-%F0%9F%8E%AC-green.svg\"/></a>\n    </a>\n    <a href=\"#hire-an-expert\">\n      <img src=\"https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen\"/>\n    </a>\n  </p>\n</div>\n\n## Installation\n\n```\nyarn add 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 'rn-tourguide'\n\n// Add <TourGuideProvider/> at the root of you app!\nfunction App() {\n  return (\n    <TourGuideProvider {...{ borderRadius: 16 }}>\n      <AppContent />\n    </TourGuideProvider>\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    <View style={styles.container}>\n      {/*\n\n          Use TourGuideZone only to wrap your component\n\n      */}\n      <TourGuideZone\n        zone={2}\n        text={'A react-native-copilot remastered! 🎉'}\n        borderRadius={16}\n      >\n        <Text style={styles.title}>\n          {'Welcome to the demo of\\n\"rn-tourguide\"'}\n        </Text>\n      </TourGuideZone>\n      <View style={styles.middleView}>\n        <TouchableOpacity style={styles.button} onPress={() => start()}>\n          <Text style={styles.buttonText}>START THE TUTORIAL!</Text>\n        </TouchableOpacity>\n\n        <TourGuideZone zone={3} shape={'rectangle_and_keep'}>\n          <TouchableOpacity style={styles.button} onPress={() => start(4)}>\n            <Text style={styles.buttonText}>Step 4</Text>\n          </TouchableOpacity>\n        </TourGuideZone>\n        <TouchableOpacity style={styles.button} onPress={() => start(2)}>\n          <Text style={styles.buttonText}>Step 2</Text>\n        </TouchableOpacity>\n        <TouchableOpacity style={styles.button} onPress={stop}>\n          <Text style={styles.buttonText}>Stop</Text>\n        </TouchableOpacity>\n        <TourGuideZone\n          zone={1}\n          shape='circle'\n          text={'With animated SVG morphing with awesome flubber 🍮💯'}\n        >\n          <Image source={{ uri }} style={styles.profilePhoto} />\n        </TourGuideZone>\n      </View>\n      <View style={styles.row}>\n        <TourGuideZone zone={4} shape={'circle'}>\n          <Ionicons name='ios-contact' {...iconProps} />\n        </TourGuideZone>\n        <Ionicons name='ios-chatbubbles' {...iconProps} />\n        <Ionicons name='ios-globe' {...iconProps} />\n        <TourGuideZone zone={5}>\n          <Ionicons name='ios-navigate' {...iconProps} />\n        </TourGuideZone>\n        <TourGuideZone zone={6} shape={'circle'}>\n          <Ionicons name='ios-rainy' {...iconProps} />\n        </TourGuideZone>\n        <TourGuideZoneByPosition\n          zone={7}\n          shape={'circle'}\n          isTourGuide\n          bottom={30}\n          left={35}\n          width={300}\n          height={300}\n        />\n      </View>\n    </View>\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  tourKey?: string // A string indicating which tour the zone belongs to\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  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<TooltipProps>\n  tooltipStyle?: StyleProp<ViewStyle>\n  labels?: Labels\n  startAtMount?: boolean | string //  start at mount, boolean for single tours, string for multiple tours\n  androidStatusBarVisible?: boolean\n  backdropColor?: string\n  verticalOffset?: number\n  wrapperStyle?: StyleProp<ViewStyle>\n  maskOffset?: number\n  borderRadius?: number\n  animationDuration?: number\n  children: React.ReactNode\n  dismissOnPress?: boolean\n  preventOutsideInteraction?: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## Using Multiple Tours\n\nIf you'd like to have multiple tours (different pages, differnt user types, etc) you can pass in a `tourKey` to `useTourGuideController` to create a tour that is keyed to that `tourKey`. **Important** If you use a keyed tour, in order for the `TourGuideZone` components to register correctly you _must_ do one of two things. Either (1) pass along the `tourKey` to the `TourGuideZone` components, or (2) extract the `TourGuideZone` components from the hook itself\n\n(1) If you want to pass along the tourKey\n\n```ts\nimport { TourGuideZone, useTourGuideController } from 'rn-tourguide'\nconst {\n  canStart, // <-- These are all keyed to the tourKey\n  start, // <-- These are all keyed to the tourKey\n  stop, // <-- These are all keyed to the tourKey\n  eventEmitter, // <-- These are all keyed to the tourKey\n  tourKey, // <-- Extract the tourKey\n} = useTourGuideController('results')\n\nreturn (\n  <TourGuideZone\n    tourKey={tourKey} // <-- Pass in the tourKey\n    zone={2}\n    text='Check on your results'\n  >\n    {/** Children */}\n  </TourGuideZone>\n)\n```\n\nOr (2) if you want to extract the components directly from the hook\n\n```ts\nimport { useTourGuideController } from 'rn-tourguide'\nconst { canStart, start, stop, TourGuideZone } =\n  useTourGuideController('results')\n\nreturn (\n  <TourGuideZone // <-- No need to pass in the tourKey\n    zone={2}\n    text='Check on your results'\n  >\n    {/** Children */}\n  </TourGuideZone>\n)\n```\n\nIf you use multiple tours and would like to use the `startAtMount` prop on the `TourGuideProvider` component, then pass in the string of the tour you'd like to start\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<TourGuideProvider {...{tooltipComponent: TooltipComponent}}>\n// ...\n</TourGuideProvider>\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<TourGuideProvider {...{ tooltipStyle: style }}>\n// ...\n</TourGuideProvider>\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<TourGuideProvider {...{ backdropColor: 'rgba(50, 50, 100, 0.9)' }}>\n  // ...\n</TourGuideProvider>\n```\n\n### Custom labels (for i18n)\n\nYou can localize labels:\n\n```tsx\n<TourGuideProvider\n  {...{\n    labels: {\n      previous: 'Vorheriger',\n      next: 'Nächster',\n      skip: 'Überspringen',\n      finish: 'Beenden',\n    },\n  }}\n>\n  // ...\n</TourGuideProvider>\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\n### Prevent Outside Interaction\n\nSometimes you need to prevent users to interact with app while tour is shown, in such case `preventOutsideInteraction` prop is up for you.\n\n```default: false```\n\n```jsx\n<TourGuideProvider preventOutsideInteraction>\n  <AppContent />\n</TourGuideProvider>\n```\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"}