{"_id":"@dariast03/rn-tourguide","_rev":"5-0cea9d4bcc6d2752c7b1f9944efd7dd2","name":"@dariast03/rn-tourguide","dist-tags":{"latest":"3.3.5"},"versions":{"3.3.0":{"name":"@dariast03/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":"node_modules/expo/AppEntry.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 .","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-*"},"repository":{"type":"git","url":"git+https://github.com/dariast03/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/dariast03/rn-tourguide/issues"},"homepage":"https://dariast03.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":"@dariast03/rn-tourguide@3.3.0","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-WagoCjU8vdPej69lNyS/Ps074xKVCPaZkXAMVe2zDER22eL7TGMTEkBslcwGJGtf+euPhHqOMbVivRkgEhgJUw==","shasum":"e538de54b8b341c7a0fbe497d416e2089a2a8c92","tarball":"https://registry.npmjs.org/@dariast03/rn-tourguide/-/rn-tourguide-3.3.0.tgz","fileCount":3,"unpackedSize":16276,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIODDdN9IKKPX2OqT/To4oGUsF7ydhG77w5NDsXZtEywIgX0NomOlgPmAW9f0wmOZu94kY2WsHi8od2F3zEJMHz8Q="}]},"_npmUser":{"name":"dariast03","email":"danteariastarifa@gmail.com"},"directories":{},"maintainers":[{"name":"dariast03","email":"danteariastarifa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.3.0_1711048036026_0.5760847110546077"},"_hasShrinkwrap":false},"3.3.1":{"name":"@dariast03/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":"node_modules/expo/AppEntry.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":"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 .","cleaning":"rm -rf node_modules && rm -f yarn.lock && yarn cache clean && yarn install && watchman watch-del-all && rm -fr $TMPDIR/react-*"},"repository":{"type":"git","url":"git+https://github.com/dariast03/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/dariast03/rn-tourguide/issues"},"homepage":"https://dariast03.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"},"_id":"@dariast03/rn-tourguide@3.3.1","gitHead":"26e870a8524085172a0c1ec63da09513c4e1e415","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-tuFxEXzQ2a3yf0j9KTr4zShu6h5CGeW8zIbqSvcojGv7b5R4PpQEDdH+77WuTEehQvAnGBvk5wmiP4n1LEeK5w==","shasum":"9078e55e7ddb981bbef9cd493bbe5fae144a52f1","tarball":"https://registry.npmjs.org/@dariast03/rn-tourguide/-/rn-tourguide-3.3.1.tgz","fileCount":32161,"unpackedSize":326919640,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA79lj2Qchb2QENilo/WWorDRG8KDT2I0LrLXFcgvSVgAiEAvnY/WIxnYGSFPuHLX55EyL9a68jVWNKYpUOMhXoX4ss="}]},"_npmUser":{"name":"dariast03","email":"danteariastarifa@gmail.com"},"directories":{},"maintainers":[{"name":"dariast03","email":"danteariastarifa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.3.1_1711051066422_0.5780235671718772"},"_hasShrinkwrap":false},"3.3.2":{"name":"@dariast03/rn-tourguide","version":"3.3.2","description":"Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)","main":"node_modules/expo/AppEntry.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":"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","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/dariast03/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/dariast03/rn-tourguide/issues"},"homepage":"https://dariast03.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"},"_id":"@dariast03/rn-tourguide@3.3.2","gitHead":"26e870a8524085172a0c1ec63da09513c4e1e415","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-nTKcNcr02HRXnVTd1xnUJErT4gbKGQek0sIGDp/TOT1KSlVY0k2kByu+JUL1H+NhycdXNnQifX6/+EM7k5tvcQ==","shasum":"6b9781818e0ad3eefe5d16254bcb7e5b6d8c001e","tarball":"https://registry.npmjs.org/@dariast03/rn-tourguide/-/rn-tourguide-3.3.2.tgz","fileCount":41,"unpackedSize":71331,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC7Z4CZp+lXcoMmUEDYJ60dbBZPZ9cczIt+3f7P4YwKDAiAuTS/RPE1ns3rrIDHnSkXKc+/W7eo34l3Bl9iWNImBxQ=="}]},"_npmUser":{"name":"dariast03","email":"danteariastarifa@gmail.com"},"directories":{},"maintainers":[{"name":"dariast03","email":"danteariastarifa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.3.2_1711051807745_0.17547015993844184"},"_hasShrinkwrap":false},"3.3.3":{"name":"@dariast03/rn-tourguide","version":"3.3.3","description":"Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)","main":"node_modules/expo/AppEntry.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":"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/dariast03/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/dariast03/rn-tourguide/issues"},"homepage":"https://dariast03.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"},"_id":"@dariast03/rn-tourguide@3.3.3","gitHead":"26e870a8524085172a0c1ec63da09513c4e1e415","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-tTVEuYK6l2icdATomTX4DEB4FyXhwc41x+3UDUyxPx1sQiTH5S6LCQKx1f390ObhI2BjIyP137pEq05efm+V0Q==","shasum":"fb30684ed6b727a3c695a7fd921cb3a5926e8b40","tarball":"https://registry.npmjs.org/@dariast03/rn-tourguide/-/rn-tourguide-3.3.3.tgz","fileCount":19044,"unpackedSize":239054187,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcFLM83Vxy1mXp/lMsnO190Or/92lj7DKGiaNoCqdHcgIgC4uZ13Oveh3lPZ+Op1NzT0kuk2j6XqQduqcR/oliYkk="}]},"_npmUser":{"name":"dariast03","email":"danteariastarifa@gmail.com"},"directories":{},"maintainers":[{"name":"dariast03","email":"danteariastarifa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.3.3_1711052736322_0.14632779080040414"},"_hasShrinkwrap":false},"3.3.4":{"name":"@dariast03/rn-tourguide","version":"3.3.4","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":"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","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/dariast03/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/dariast03/rn-tourguide/issues"},"homepage":"https://dariast03.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"},"_id":"@dariast03/rn-tourguide@3.3.4","gitHead":"26e870a8524085172a0c1ec63da09513c4e1e415","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-cI3sx0vR2YYbXiPzCNrAYcxRc4W+QULIhg1SysurvCd1gDYmIQ+2I9Se8EQdAYCDE9mrlj1U/EchoYE9pI4YPQ==","shasum":"648131ef185cade3a3d556db8a29bb8820ff74ad","tarball":"https://registry.npmjs.org/@dariast03/rn-tourguide/-/rn-tourguide-3.3.4.tgz","fileCount":41,"unpackedSize":71314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJcxBjGc4HKpjtqnm8i+/BLI+jRivhMxmYfLgUwFumCgIgaFo7RxxOX+NxQlu6TMk4E6yM7P6HcKYInz8EZ7tvm7E="}]},"_npmUser":{"name":"dariast03","email":"danteariastarifa@gmail.com"},"directories":{},"maintainers":[{"name":"dariast03","email":"danteariastarifa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.3.4_1711052994713_0.26540155533711607"},"_hasShrinkwrap":false},"3.3.5":{"name":"@dariast03/rn-tourguide","version":"3.3.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":"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","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/dariast03/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/dariast03/rn-tourguide/issues"},"homepage":"https://dariast03.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"},"_id":"@dariast03/rn-tourguide@3.3.5","gitHead":"26e870a8524085172a0c1ec63da09513c4e1e415","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-EDOq0rCMCIUr9kDBEBBKIXCfZpr0Ka+YpmveIxH8yICPkUi+GpoZLGgd9MPC7u3tH0c2sQO/tp37mbNvRwxM1w==","shasum":"8a7d91e5fb1d947109a41a1233c3d164c6974e4c","tarball":"https://registry.npmjs.org/@dariast03/rn-tourguide/-/rn-tourguide-3.3.5.tgz","fileCount":41,"unpackedSize":69883,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZpBtybp45gLZ+FJWeG2xu1HYOj5D8moNZFgCFoJJFlwIhAPWr8GsMnkrYrIveF8n6oROd9MPB9MEZwKXS04mpzEs9"}]},"_npmUser":{"name":"dariast03","email":"danteariastarifa@gmail.com"},"directories":{},"maintainers":[{"name":"dariast03","email":"danteariastarifa@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-tourguide_3.3.5_1711058848965_0.17360176002218775"},"_hasShrinkwrap":false}},"time":{"created":"2024-03-21T19:07:15.887Z","3.3.0":"2024-03-21T19:07:16.170Z","modified":"2024-03-21T22:07:29.575Z","3.3.1":"2024-03-21T19:57:48.316Z","3.3.2":"2024-03-21T20:10:07.902Z","3.3.3":"2024-03-21T20:25:37.813Z","3.3.4":"2024-03-21T20:29:54.903Z","3.3.5":"2024-03-21T22:07:29.142Z"},"maintainers":[{"name":"dariast03","email":"danteariastarifa@gmail.com"}],"description":"Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)","homepage":"https://dariast03.github.io/rn-tourguide/","keywords":["react-native","react-native-joyride","react","copilot","intro.js","intro"],"repository":{"type":"git","url":"git+https://github.com/dariast03/rn-tourguide.git"},"author":{"name":"Xavier Carpentier","email":"xcapetir@gmail.com"},"bugs":{"url":"https://github.com/dariast03/rn-tourguide/issues"},"license":"MIT","readme":"<h1 align=\"center\">RN-TourGuide</h1>\r\n\r\n<p align=\"center\">\r\n  A flexible <strong>tourguide</strong> for your react native app!\r\n  <br/><small>🎉 Webable 🎉</small>\r\n  <br/><small>(a rewriting of react-native-copilot)</small>\r\n</p>\r\n\r\n<p align=\"center\">\r\n  <img width=\"250\" src=\"https://www.dropbox.com/s/9heua3qgd66125k/rn-tourguide.gif?dl=0&raw=1\" alt=\"RN Tourguide\" />\r\n</p>\r\n<p align=\"center\">\r\n    <a href=\"https://xcarpentier.github.io/rn-tourguide/\">\r\n      🎉DEMO WEB 🎉\r\n    </a>\r\n</p>\r\n\r\n<div align=\"center\">\r\n  <p align=\"center\">\r\n    <a href=\"https://www.npmjs.com/package/rn-tourguide\">\r\n      <img alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/rn-tourguide.svg\"/>\r\n    </a>\r\n    <a href=\"https://www.npmjs.com/package/rn-tourguide\">\r\n      <img src=\"https://img.shields.io/npm/v/rn-tourguide.svg\" alt=\"NPM Version\" />\r\n    </a>\r\n    <a href=\"http://reactnative.gallery/xcarpentier/rn-tourguide\">\r\n      <img src=\"https://img.shields.io/badge/reactnative.gallery-%F0%9F%8E%AC-green.svg\"/></a>\r\n    </a>\r\n    <a href=\"#hire-an-expert\">\r\n      <img src=\"https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen\"/>\r\n    </a>\r\n  </p>\r\n</div>\r\n\r\n## Installation\r\n\r\n```\r\nyarn add rn-tourguide\r\n```\r\n\r\n```\r\nyarn add react-native-svg\r\nreact-native link react-native-svg\r\n```\r\n\r\nIf you are using Expo:\r\n\r\n```\r\nexpo install react-native-svg\r\n```\r\n\r\n## Usage\r\n\r\n```tsx\r\nimport {\r\n  TourGuideProvider, // Main provider\r\n  TourGuideZone, // Main wrapper of highlight component\r\n  TourGuideZoneByPosition, // Component to use mask on overlay (ie, position absolute)\r\n  useTourGuideController, // hook to start, etc.\r\n} from 'rn-tourguide'\r\n\r\n// Add <TourGuideProvider/> at the root of you app!\r\nfunction App() {\r\n  return (\r\n    <TourGuideProvider {...{ borderRadius: 16 }}>\r\n      <AppContent />\r\n    </TourGuideProvider>\r\n  )\r\n}\r\n\r\nconst AppContent = () => {\r\n  const iconProps = { size: 40, color: '#888' }\r\n\r\n  // Use Hooks to control!\r\n  const {\r\n    canStart, // a boolean indicate if you can start tour guide\r\n    start, // a function to start the tourguide\r\n    stop, // a function  to stopping it\r\n    eventEmitter, // an object for listening some events\r\n  } = useTourGuideController()\r\n\r\n  // Can start at mount 🎉\r\n  // you need to wait until everything is registered 😁\r\n  React.useEffect(() => {\r\n    if (canStart) {\r\n      // 👈 test if you can start otherwise nothing will happen\r\n      start()\r\n    }\r\n  }, [canStart]) // 👈 don't miss it!\r\n\r\n  const handleOnStart = () => console.log('start')\r\n  const handleOnStop = () => console.log('stop')\r\n  const handleOnStepChange = () => console.log(`stepChange`)\r\n\r\n  React.useEffect(() => {\r\n    eventEmitter.on('start', handleOnStart)\r\n    eventEmitter.on('stop', handleOnStop)\r\n    eventEmitter.on('stepChange', handleOnStepChange)\r\n\r\n    return () => {\r\n      eventEmitter.off('start', handleOnStart)\r\n      eventEmitter.off('stop', handleOnStop)\r\n      eventEmitter.off('stepChange', handleOnStepChange)\r\n    }\r\n  }, [])\r\n\r\n  return (\r\n    <View style={styles.container}>\r\n      {/*\r\n\r\n          Use TourGuideZone only to wrap your component\r\n\r\n      */}\r\n      <TourGuideZone\r\n        zone={2}\r\n        text={'A react-native-copilot remastered! 🎉'}\r\n        borderRadius={16}\r\n      >\r\n        <Text style={styles.title}>\r\n          {'Welcome to the demo of\\n\"rn-tourguide\"'}\r\n        </Text>\r\n      </TourGuideZone>\r\n      <View style={styles.middleView}>\r\n        <TouchableOpacity style={styles.button} onPress={() => start()}>\r\n          <Text style={styles.buttonText}>START THE TUTORIAL!</Text>\r\n        </TouchableOpacity>\r\n\r\n        <TourGuideZone zone={3} shape={'rectangle_and_keep'}>\r\n          <TouchableOpacity style={styles.button} onPress={() => start(4)}>\r\n            <Text style={styles.buttonText}>Step 4</Text>\r\n          </TouchableOpacity>\r\n        </TourGuideZone>\r\n        <TouchableOpacity style={styles.button} onPress={() => start(2)}>\r\n          <Text style={styles.buttonText}>Step 2</Text>\r\n        </TouchableOpacity>\r\n        <TouchableOpacity style={styles.button} onPress={stop}>\r\n          <Text style={styles.buttonText}>Stop</Text>\r\n        </TouchableOpacity>\r\n        <TourGuideZone\r\n          zone={1}\r\n          shape='circle'\r\n          text={'With animated SVG morphing with awesome flubber 🍮💯'}\r\n        >\r\n          <Image source={{ uri }} style={styles.profilePhoto} />\r\n        </TourGuideZone>\r\n      </View>\r\n      <View style={styles.row}>\r\n        <TourGuideZone zone={4} shape={'circle'}>\r\n          <Ionicons name='ios-contact' {...iconProps} />\r\n        </TourGuideZone>\r\n        <Ionicons name='ios-chatbubbles' {...iconProps} />\r\n        <Ionicons name='ios-globe' {...iconProps} />\r\n        <TourGuideZone zone={5}>\r\n          <Ionicons name='ios-navigate' {...iconProps} />\r\n        </TourGuideZone>\r\n        <TourGuideZone zone={6} shape={'circle'}>\r\n          <Ionicons name='ios-rainy' {...iconProps} />\r\n        </TourGuideZone>\r\n        <TourGuideZoneByPosition\r\n          zone={7}\r\n          shape={'circle'}\r\n          isTourGuide\r\n          bottom={30}\r\n          left={35}\r\n          width={300}\r\n          height={300}\r\n        />\r\n      </View>\r\n    </View>\r\n  )\r\n}\r\n```\r\n\r\n`TourGuide` props:\r\n\r\n```ts\r\ninterface TourGuideZoneProps {\r\n  zone: number // A positive number indicating the order of the step in the entire walkthrough.\r\n  tourKey?: string // A string indicating which tour the zone belongs to\r\n  isTourGuide?: boolean // return children without wrapping id false\r\n  text?: string // text in tooltip\r\n  shape?: Shape // which shape\r\n  maskOffset?: number // offset around zone\r\n  borderRadius?: number // round corner when rectangle\r\n  keepTooltipPosition?: boolean\r\n  tooltipBottomOffset?: number\r\n  children: React.ReactNode\r\n}\r\n\r\ntype Shape = 'circle' | 'rectangle' | 'circle_and_keep' | 'rectangle_and_keep'\r\n\r\nexport interface TourGuideProviderProps {\r\n  tooltipComponent?: React.ComponentType<TooltipProps>\r\n  tooltipStyle?: StyleProp<ViewStyle>\r\n  labels?: Labels\r\n  startAtMount?: boolean | string //  start at mount, boolean for single tours, string for multiple tours\r\n  androidStatusBarVisible?: boolean\r\n  backdropColor?: string\r\n  verticalOffset?: number\r\n  wrapperStyle?: StyleProp<ViewStyle>\r\n  maskOffset?: number\r\n  borderRadius?: number\r\n  animationDuration?: number\r\n  children: React.ReactNode\r\n  dismissOnPress?: boolean\r\n  preventOutsideInteraction?:boolean\r\n}\r\n\r\ninterface TooltipProps {\r\n  isFirstStep?: boolean\r\n  isLastStep?: boolean\r\n  currentStep: Step\r\n  labels?: Labels\r\n  handleNext?(): void\r\n  handlePrev?(): void\r\n  handleStop?(): void\r\n}\r\n\r\ninterface Labels {\r\n  skip?: string\r\n  previous?: string\r\n  next?: string\r\n  finish?: string\r\n}\r\n```\r\n\r\nIn order to start the tutorial, you can call the `start` function from `useTourGuideController` hook:\r\n\r\n```js\r\nfunction HomeScreen() {\r\n  const { start } = useTourGuideController()\r\n\r\n  React.useEffect(() => {\r\n    start()\r\n  }, [])\r\n\r\n\r\n  render() {\r\n    // ...\r\n  }\r\n}\r\n\r\nexport default HomeScreen\r\n```\r\n\r\nIf you are looking for a working example, please check out [this link](https://github.com/xcarpentier/rn-tourguide/blob/master/App.tsx).\r\n\r\n## Using Multiple Tours\r\n\r\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\r\n\r\n(1) If you want to pass along the tourKey\r\n\r\n```ts\r\nimport { TourGuideZone, useTourGuideController } from 'rn-tourguide'\r\nconst {\r\n  canStart, // <-- These are all keyed to the tourKey\r\n  start, // <-- These are all keyed to the tourKey\r\n  stop, // <-- These are all keyed to the tourKey\r\n  eventEmitter, // <-- These are all keyed to the tourKey\r\n  tourKey, // <-- Extract the tourKey\r\n} = useTourGuideController('results')\r\n\r\nreturn (\r\n  <TourGuideZone\r\n    tourKey={tourKey} // <-- Pass in the tourKey\r\n    zone={2}\r\n    text='Check on your results'\r\n  >\r\n    {/** Children */}\r\n  </TourGuideZone>\r\n)\r\n```\r\n\r\nOr (2) if you want to extract the components directly from the hook\r\n\r\n```ts\r\nimport { useTourGuideController } from 'rn-tourguide'\r\nconst { canStart, start, stop, TourGuideZone } =\r\n  useTourGuideController('results')\r\n\r\nreturn (\r\n  <TourGuideZone // <-- No need to pass in the tourKey\r\n    zone={2}\r\n    text='Check on your results'\r\n  >\r\n    {/** Children */}\r\n  </TourGuideZone>\r\n)\r\n```\r\n\r\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\r\n\r\n### Custom tooltip component\r\n\r\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).\r\n\r\n```js\r\nconst TooltipComponent = ({\r\n  isFirstStep,\r\n  isLastStep,\r\n  handleNext,\r\n  handlePrev,\r\n  handleStop,\r\n  currentStep,\r\n}) => (\r\n  // ...\r\n);\r\n\r\n<TourGuideProvider {...{tooltipComponent: TooltipComponent}}>\r\n// ...\r\n</TourGuideProvider>\r\n```\r\n\r\n### Custom tooltip styling\r\n\r\nYou can customize tooltips style:\r\n\r\n```tsx\r\nconst style = {\r\n  backgroundColor: '#9FA8DA',\r\n  borderRadius: 10,\r\n  paddingTop: 5,\r\n}\r\n\r\n<TourGuideProvider {...{ tooltipStyle: style }}>\r\n// ...\r\n</TourGuideProvider>\r\n```\r\n\r\n### Custom mask color\r\n\r\nYou can customize the mask color - default is `rgba(0, 0, 0, 0.4)`, by passing a color string to the `copilot` HOC maker.\r\n\r\n```tsx\r\n<TourGuideProvider {...{ backdropColor: 'rgba(50, 50, 100, 0.9)' }}>\r\n  // ...\r\n</TourGuideProvider>\r\n```\r\n\r\n### Custom labels (for i18n)\r\n\r\nYou can localize labels:\r\n\r\n```tsx\r\n<TourGuideProvider\r\n  {...{\r\n    labels: {\r\n      previous: 'Vorheriger',\r\n      next: 'Nächster',\r\n      skip: 'Überspringen',\r\n      finish: 'Beenden',\r\n    },\r\n  }}\r\n>\r\n  // ...\r\n</TourGuideProvider>\r\n```\r\n\r\n### Listening to the events\r\n\r\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.\r\n\r\nList of available events is:\r\n\r\n- `start` — Copilot tutorial has started.\r\n- `stop` — Copilot tutorial has ended or skipped.\r\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.\r\n\r\n\r\n### Prevent Outside Interaction\r\n\r\nSometimes you need to prevent users to interact with app while tour is shown, in such case `preventOutsideInteraction` prop is up for you.\r\n\r\n```default: false```\r\n\r\n```jsx\r\n<TourGuideProvider preventOutsideInteraction>\r\n  <AppContent />\r\n</TourGuideProvider>\r\n```\r\n\r\n## Contributing\r\n\r\nIssues and Pull Requests are always welcome.\r\n\r\n## Hire an expert!\r\n\r\nLooking for a ReactNative freelance expert with more than 14 years experience? Contact me from my [website](https://xaviercarpentier.com)!\r\n\r\n## License\r\n\r\n- [MIT](LICENSE) © 2020 Xavier CARPENTIER SAS, https://xaviercarpentier.com.\r\n- [MIT](LICENSE) © 2017 OK GROW!, https://www.okgrow.com.\r\n","readmeFilename":"README.md"}