{"_id":"expo-next-react-navigation","_rev":"53-7dafba94bb0a05911666c9d951855f80","name":"expo-next-react-navigation","dist-tags":{"latest":"2.0.2","dev":"0.0.21","v5":"1.1.14","true":"1.1.2","v6":"2.0.1"},"versions":{"0.0.2":{"name":"expo-next-react-navigation","version":"0.0.2","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/src/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && npm publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.2","dist":{"shasum":"1259bb4abd5c218d5113cf7950a7487e74dcb167","integrity":"sha512-FcsAk47gab1TQFuQbHM/ejlI+hNM1j599YbE+oVx71fInkKgBJHwEGoiuLpVbaHcEtjdGcNU6IYNtqFAq4aeDA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.2.tgz","fileCount":54,"unpackedSize":24685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8+1YCRA9TVsSAnZWagAAL/kQAI2Q+nDom5GGtGfTRF+J\nmIadABzcnd+ffmRb3xp3P7zfP24G2yqYIJeo9mMtrrzH8COpFIXib7a0brE2\nnxfgakduLLpJbDqVMwPkBfugzrtREN5eC6sGX6k9WQMG4Dn4mD+AEKc6Vg7U\nNta7y3GJQRElLjicsDQQIB84Uq+DnIKvwXU3iYz+uDkAZRJOa9PIiXvZt3Ji\nDr2Ayu837XPEWegkKyT9P2MnJeE0xFw79eiFDyYTCte494MlxC9OP9kRrNXK\nm21Fz4fJza0Znt09rXtW3Yo8cL6VkgBPG/7RTnWeaHZusj+EfY3Ivup1LbYh\njxFL6bZNk6/mAnAf0VvAXNNtxWmCWBTjFhdums3Ovj0ORLuplXpqRl+MXI3j\nAgRUgu6EH9nPBNJBAI8ObYk0fLyxGa8wcVScciiz1qFe1VGwVASFtox3D3Sn\nREb0dLLlgPO/MDC5sFoPCmB2UR9jPRIukhmiIvm3qWXVC3dQZsHU5laacXw1\n7djbcX5f0pv83XZpAGcLpTPXqpbEoaal7UDbsAfPa5A9R6zmdImry9UT7IjP\n3ecz38xxNlqQ5laLO552Ptc7TeruhSnZ2uVxjkzVQk8vgFtNfX8rSyKYJS73\n13mjJQu9ZJlnsnItlA/N+PZAEABWb9ODfsoYmW4rm8DclaSf8tSUmoOhrZaY\nivCh\r\n=XADc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeO26G99pCM7yAx1Tiw7NwUzYMLwmRwjrr0ff2tkUXTgIhAJhzuyrPBx0wIzWGKtvScbWLMJUbDVL/ykRdV7nxM9eo"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.2_1576267095921_0.0943970301303183"},"_hasShrinkwrap":false},"0.0.3":{"name":"expo-next-react-navigation","version":"0.0.3","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/src/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.3","dist":{"shasum":"7deb0db9c60788b75655c2a75210849317a85934","integrity":"sha512-Xl4EHJ3G47JSn4Y+ZZRuqx0Sem0EpPX2/MtMQa6YiKmxUhcGqJngjBqgoACLwqTQ7FvCZoTpzfH7955Mq1NiMA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.3.tgz","fileCount":54,"unpackedSize":24625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8+37CRA9TVsSAnZWagAA2i4P+gMSSW4rK7RQ3OOD8oyH\nuJM/Bd8Riz2tKVwiqmysE3nnWHD3htifmSv8acM701PFS9lgHB11tl6rFSom\nuGF9h8xR42clH6NsxynhQ4vqylOMtD4UdgxviJUNDTPtG5t9N7EC1WLVSzxl\n5EsMgw55UB56QZEJuY7h6WXh+AK+sWl8VaUsyLV06ROZX+KRllwpia0BANJR\nZoNcc/jkYbC+KxwvzSwhy+OCy7IndGWJetHbcZpruv56frnE12pK2Jrvv3Ta\ncDtppqDPmM7H3YIATq+KJ4ignt4QmEL9ZeIqsejiDq17rJXewfx1e6EV0jos\ngtvYkPlOwLekv2ptuuNWRrMD22DbsBPI14V947ahPjdqpJH0X5TkWaXxxYTT\nrkKWrvklky4TRfu+m1O1i9mZbNaJ10m5S0NahFx/r0lJSylru3y1EUYiILX2\nlgQrdgRzpacZBpOGkV/l5YfIJm9UvegoFXpGHn+TlbT6cTr/9LUuNXtaG0SQ\nDQYhRRQOxN4a208kc+vzh4NMwDIW1EuxA9aFDaogRkYk93sBr9Lgb5QpOktz\nyIk+CuvBflPqTysu0cf21Tg8qVcFsLCASIfp7QA0NtVfbo2qAoiWo8yKxBR4\niY9RpjniaS8lwvAi1iedPEQgf+YgMCaz+yW6HlRH88CT4VFc7tqhCY0yLzCB\n5bRP\r\n=e/DQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZSBM7IYxJpMmPcpBkFyBJVjcB9KvwP6l+pE+tKEUsXAiB9dK0J9nQLefop3fN56Rf+uJCTS6Fw20EqliTFx/m1Qw=="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.3_1576267258816_0.8130693176932662"},"_hasShrinkwrap":false},"0.0.4":{"name":"expo-next-react-navigation","version":"0.0.4","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/src/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.4","dist":{"shasum":"e9afdc15c810d07881097712216b837960e5ead7","integrity":"sha512-ZI8S/5JX0maeSQ25GVsJf7kfhjZy4t2iP7UXntyA5PC4sPuYwfyyQIfLE+mxFc5w/gPc/ZoyWetnq1Ifxvf7nw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.4.tgz","fileCount":68,"unpackedSize":27194,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8/xICRA9TVsSAnZWagAAFhQP/RFSoC1Q0nC6BhQej75+\nUGV9VcQh9SL1sRGHn7tlrEYO5Zdc4d54kZXSs842nkb8Pc00YuvM6UJ83x3e\nk219ScCHZkFockgNg1dSh7siyyMcNQ4Nc+1Ggzfk35KEut0MBw5OhhCcJcF6\nBGqwDdE/kdDSGxrKCFcDyUX8DQUjUDQyfUg/y0G/HBGagmm+eMQ+jqtbueIa\np+s41ud44tG0UWkycNQmD4sBcgwgxk8A8uH/BeSiOeZJtQi3p2GKhbI8F2g2\nsXMpu5Kqs8MgQDu287YQ3PBnMZyRWcrxVbWfrXytdK1laVdpMlgc9lDOH9iz\neTt+/pm4WKkuKtRPORkK1nMOZCN+VuQAEovDDdSwSUx/quMqi8ZiRzx2ITWz\n8zyOGI6ohDOscCAMpEyUllkCuBQmwKnfbK/AIcZ5HiJ0fmTR1UcTH7J3EV10\nQdgGZx9vV6bKqAZOrMmqzaRI1VhVzjT3eJT0KpOVEbIji1DMYDEP0kca26+h\nQVI4RsWYPon7j1XIZKxqIe5v9l9lvLUgllJtEirdLVyVdYcN/YtENX9Saa4b\nket2YMeH2ClkTC8XfnNWRg9leNSZ5HemW3cfP0JyuQFdgHe7kXkUhXOEk4KO\nxvz/u7i6EhPvL6Swf1HV4T+SnYDtOlNKmR3Y6CeGFpzwEaf6eVvwrLHKQfpS\nBynB\r\n=FYct\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuS5maXL9VGtY8HEMTJDrHsudEcI1f3vVFiK/qN47N7gIhAOe13cfzzzGjcHcqAlDaUj0YuDndg1oBNcYWQ9VsNPVo"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.4_1576270919531_0.15692953957053857"},"_hasShrinkwrap":false},"0.0.5":{"name":"expo-next-react-navigation","version":"0.0.5","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.5","dist":{"shasum":"1466b52d7e17b47f594537e31366f21c2a1aabb9","integrity":"sha512-e3RsQOM0bWpj6AqdRBDRyU7qm3SOiYo9M2p2Dte3L7O0xg8sewZmCdZO1qYlS5Ru/Mf671PUjHQm5/QkUlpczQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.5.tgz","fileCount":68,"unpackedSize":27190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8/yUCRA9TVsSAnZWagAA83cQAImS6hlqdHmGEDLpjVMU\no+UUDNxkXoELrlPBzmDy0/VoNd1VzaN6hl3bQIffUnWpkJdvagT64Oml+uK0\nVhQbKrMb/z7c3SYjdyx028Aib65B0ni2reZJFwWqEfoO6nabKKTNz1AJaut5\n5ZrYaV81vca2CVgCFp5HDWpll6RgcMFyhAYrQC0X8HZJ9pXFeqh2ayJ6Hfzu\nef6xDBUNadqzrpZlquRutbkIWW4+NsrHX82NtuEfktkE0jwK1m/Z1AIfX+oY\nmqP2Py60L2Ki6qNtCB36155WnneQETAnxIYLfFkez/IZexo5ayQQmAz8dvyT\nU1bCC4L4lTyfd6iSZSuz+nKBFOiOfeuBe1B5xOwJWLu7h7yQjLO67VP2bQA3\nija7FP16o3vaurvv9YRulPvO8dA6E+qLP/yuJzFKDRPsVyyuxzuG2tFGOVLq\nfU119tPlgBgM5B6FCrZb8DR0YkITYNLEOGBmBTVJ5wvi5POcfX/Rkte/19L9\nl+PRNreM7LvmqRPcaWHAZD47CAlzBWkhFqbRMHA0zFDxBFAHLlh8JdRndzWi\n9w2vxRBMb+uF0XhuOEefvv1ezYGskdzDuqCDT7XwZiF+zHbu/5i+EJ6Y4vzy\nKJ0QpSDSqAQJHXOKVUD9jA6lzZGyunry9rFOvMwM4qIDUHxuWTXqEJFsSLMP\nfT8e\r\n=pq8R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVTPrAbrBc8D2/1tB6DPuRzdLBQ0pm0rqk5iIyTyVaTAIgFYXGPDEiAltqYgJuOc5UWAqpmdadTYhecfS/YlRaLPE="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.5_1576270996129_0.38563462183065766"},"_hasShrinkwrap":false},"0.0.6":{"name":"expo-next-react-navigation","version":"0.0.6","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.6","dist":{"shasum":"d4fa2bfa9886e2745c9ce144a45740184ebb1f75","integrity":"sha512-4wxcaBucCUOMfjI3sHhdSzO7pA11s3wY/nTNp+dkybuJg54PRYWC3CyTqbCFk/lFOMGaRB1gysoUKbR4EZdjVQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.6.tgz","fileCount":68,"unpackedSize":27968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9CDtCRA9TVsSAnZWagAAkX0P/0dndkOHWMQN6h76CW+w\noZcW+Z94GZHFFmtNAZ8XuBIyzqYPR+MPQu+Y9aoGAjkctxZPghS4N3yUhG20\nHUEWGTxHIWy2mrhACi6fEd6AHrxe7vMdSjayHp4yMuwhjpaNI7StO9zWVpew\nM0Ylao1n72wuToHd/p99ADLjXJrcC7b+ylXSWEajggEfgDM2BIU5Oz9jUXBY\n9TkH4GkeAHY2yZRg+ZA1c8n/EA8CwwRCCQ2gQgdTXMcwoMgYKwULbIk+ueFh\nXolh2XTSHIbVVKFRdxue9g39CMlpsrgQomnhMnXOwmcZpA0TuxysAKS688xP\nuFRRvHJ/xZycioV2ew1nE6GJq8LVDwQqnZK5YRnUzTnvdj8MtKxDCn4199zO\nApS3+xFK2bsAJVWraZFwRMNJg+ELwfvKiC7q/Ui4049gDfFUOim9w1JEy3k1\nNvOT2eZXYHSUHEkY+xcZB1CF4ez1FfQia2D9i/DVQb90gyu3BF76NX450vLS\nMoB1e6G1M4+fWqPwU8oMYwUAxMhz7U5xxB2nR/TogUEsDDwGV4oSbybUqPqp\nLcIFFj7x7plZvc0woGYC8bcXvPF1g4s/IxZXMzdHlcIudqzAV1h4NZ7htJo8\nZJcu5GOIEgI+4noNB81GjMZJTBkNyhy4m+EQbfOOOjn90sSt425ISzRNnlqB\nHuLx\r\n=g3K0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6dP/ltBYj6788NCTT3geYikDUY3OG8/FULMcAyUhp7AiAw3jB8KQqkBQIIp5IfIYjx9HBLRcreT2jcSwn6YWUQ1g=="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.6_1576280301181_0.5312107780571391"},"_hasShrinkwrap":false},"0.0.7":{"name":"expo-next-react-navigation","version":"0.0.7","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.7","dist":{"shasum":"5025393b3693ed748a1e12cd956bc37009baf250","integrity":"sha512-DDSLV8toWGWhV25pbWKomuIt27kz+ON8nLo6/8LKBJPmMZmFheqUeWlQBvfxFbo90rMSu0pGidngJxvn6cXhRQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.7.tgz","fileCount":68,"unpackedSize":27962,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9CRMCRA9TVsSAnZWagAAMTQP/RmUcaZRBprh//BpIhQ/\nkhQwmp/itY6bd+I/EdDTwMF7GvZDpWnI/eR6ZnnrhLL+HLPEvrmNggo8unh3\n44urtaUA5k8AlbbYAo3Pq5Urppabkg5z/PKJ/Y6+QLOFFyageJIsJnp/OcsK\nVLu4TLT7Y0Qm5qDD+o6fUio16iOZxHvr5AmlJKAWBqTrnMOzGXRrVeMEJuZL\n/W0LgsUasTOHh4odFJmG9h9UYWtPZQrjtYKogcnElyrRIQqJVCrMejdjQ/sL\n3TWvzSjF91rRAiqJsYgLGhnPukcvAW1GDg2Uzt/V1RZZ9F4EcfwblMyatqgv\nNduz/cEBBL/NWWH9mbDtIgQ9AY6vMpvqamH3ZOxvjjiBKQHK4+HCZCdy+eG3\nzg9OQecgMqHSI4IFlJEbuktwiWE6NOzdnFy3vVjPExF4ORYCol4G5mm0ztOw\n9McV4D2ZxFULY8iW0YnQgxYt5KWKWSM1lWdOQ7twjRskr4lEz+0zoU4uMfHi\nox60fGDwAJlxtHVDQCuNpuLRvtWdOuiPTG/0FnX+lP/ru6Adr/RrWg4urkSl\n2HLx3eNsX04p0sYbi/+aC0/c0UDVaw3P8n6NJcV9/YjaFpJmLRWYNqytmtwB\nljh5Fqln0+PfuzuGBMZ9NtTho5yLPqjGw/MXa262dpT1tsLW5DuFYBWXjlV6\nUOML\r\n=stWe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6L4HXmz9NEn7dPUlTJ2nu0rcrB0YGlGEenebdFYR2uAIhAPESEG6JoLngJVTkCVCBtsVk3XyutWtsyFFiRfcl3fY/"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.7_1576281163477_0.4006784859530146"},"_hasShrinkwrap":false},"0.0.8":{"name":"expo-next-react-navigation","version":"0.0.8","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.8","dist":{"shasum":"1f16c63428c8344d52f7381bbdbe6a6125fc4021","integrity":"sha512-0Mr1n+tKMvwkrSlLlZcUKy17v/XK72XtENtU+I7dcE3msuARVcWOS0e1iv3+9i9MDrVQhXLRzybqTiO34F4SYA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.8.tgz","fileCount":68,"unpackedSize":27657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9Cn7CRA9TVsSAnZWagAAN2cQAJ4BQ1/ZRZdmOe3pexHV\nkAauT2ZH1WRkp6AeFShFTCTY30DaBhAFbqKoHUoI50JeV7D/tN8V6AyCwlnT\ncwJbaxTguB2Sf9+KDfo3DyPgK+jdvN8tEI94mN+WXe7mn03VqZJBYVv6rUvS\nrs6gqeWz18GEd+fIBPqvaGpLIYZDzHhlBVlW4ajIMJF3q8D57BVF+SdDEtmu\nYvuDNpf4blPKpejpJOBlywyUpeDPJR9QyPBXb2HbfUuh3n+/NNORTaOMZhMo\n/QvgX0t3b1C+SFCWIqoKVDM3ojVcCFfFjGwrEO75mFEQ6l2AkKzLFNBYT/tH\ncvejyXAKtf3ruE5JO/IsUT6UBkeNp0cxndDdvDLbeedOTyp9wN5V9KvyuIVc\nIvEq5OE9CYVaKNxFN7KCtSnREvOF9xIcTU8qyfGqes9zO/H2IhjfLzDRern9\nsw215I3LUjxPl1yok0Y5T06+3zDyaS0cTfRBpph8VEIANuBihBC32KhyR2wM\nbSrIlyzTmTtOIwrRA94HNVbBzN1SFV46+VhSIWsaUpIhqp2UoQuW1sxSA4di\n1J3Sx5GmNJ219wbz1JnU7nHaX3ooF9rT1+aZWNe3JOdG4IkP2U1EFxtgaGJi\niqRhDovPK5UncYHl+jZS+mB3nqs1Dt0Vf5Koeqt7FprODeyDJNRJqM252pS4\nElbT\r\n=z+1B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwCxrx8nxW2C5KR0sSzUgYy2MttqL6LPBuRJSbSjlibAIhAN0fwVQwPj8KpA03ZH+Y44IFuSgPZ55+nnEB3pyaiGxV"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.8_1576282619126_0.5632586601564964"},"_hasShrinkwrap":false},"0.0.9":{"name":"expo-next-react-navigation","version":"0.0.9","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.9","dist":{"shasum":"cf651084f9cf39e2a07fd5ce6c762e2b7a0f8751","integrity":"sha512-Ls2SvSeeVQA7E1yxr/3ndKR9qDB8Rr1wGEUJ2yEoiZmmN7X6M2Cxr1MN8fQ42VzXOhWz18UD0hnRrBngSbx1Zg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.9.tgz","fileCount":68,"unpackedSize":27906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9CsCCRA9TVsSAnZWagAAOS8P/jazgOfcPwpz4UycUdBz\n+Vx4HteBncsMsMPHYlI/A30wiONBWv4QiQy9VUbdHOd5p4b0YhbVgbDaOOqD\nddL8XeeGKjP9YmVg4bUpMw3DLpqPa9ZFmI9+/NeMJum6KCIOGTVG47DEB+aF\nPba2qqyYlOpptnLAPwx1flNXceU8w6YZFNhPg53OYirxWo7wGfsveYOfklwW\nESh4Xeg1cC3k6iqc/pFUPNwWFkc3uSns2rXUEcdpVN8n43mezEkcm3aiNVAJ\nRM6sbT6zlQZXSRuAZFwAi7z4E3ySn79Vk86DYoe5LN859QlLubQrftoHQ1AS\nGJGvq/jcEhhoC+dZBIc4QCAqmYCmc5bMN7FtNakjrAfSvLTggBf6fwLXic7x\nuikgLHdxUAo3qy6qcVu9CG8GG4N1gNh8pOBOFO/rsQ1GbJF7jMdtVg9dkaZp\n+bqsRXUhIqB8S26NCaBAZNMpknQkFBYk+q7lrV266d9tH2H27lc+yjrsDeuT\nx1HtczwVNsRyVvLTr7S/ibaAo48gmTfW0tl5ihWil8vr3Irt84NYLZ2Omozp\nTCw6ENG5XV5AtTBQwxj7srl7ebGEePCWft1pSh4JhIhzFKCPYFmevhA3eqDp\ndrA5S61Sy8XEITCTOjMY5bUmjINCOdiyIhUyhJ8wgkLPAl4AmXmd7Sl5aO9O\nYR6u\r\n=xTv7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2MfliIYgr9uIBe5GNI7AfcgpTeN/ZK9WAogooIYpVjAiEAjEsUfr8YnEFuyVmG8v3XT9ZwUt9ImmqNVwIxhK0j1lc="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.9_1576282882103_0.11853086470702356"},"_hasShrinkwrap":false},"0.0.10":{"name":"expo-next-react-navigation","version":"0.0.10","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.10","dist":{"shasum":"33d76546840d47b4118a094deaff9720179e909d","integrity":"sha512-L2tq2+ZdN2zIH6rvTcVOCSY7XklMxnYzKwYRN1PcTX8EUt2dA1GLqvgoZRpH+fR2FMvwzxeoW1oQARQqH/R2bg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.10.tgz","fileCount":68,"unpackedSize":28265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9CygCRA9TVsSAnZWagAAyd0QAJOXH2PrB1UEc6YNjGvY\ni14hT1E2Z7yGBDc4g+BY7PaxwXPenlmGYCj+WemnqzZzIVjI+0OjIH1hHD4O\nCfUiQzHaj1z5ZFYHs5o7EM1gcE/y8ngoCTLIX9G6PM2pyrLIgN1i0Zk0vucf\nwxRlltCgVtBT8pVvZu1p6GDl1WWL5ygUddPPoRvi0Ps+vL0cvE3JC3c1io85\nwdRXjvdvjXL2qcti4xLfUwQEYPQsO2cHMvnbF7MKlS1xrR7YazXgyiHmBoDz\nhtZm5NFoyAqqsN2OaM5FtrlkKpAEsWjmpkwhJJ4Ow4aiwg0CQ5c/QuYDKRyM\nINk0xQWnLHOubvPxbpUTMNseVNrYHLQ8tw5NPSzzdDRVV2acSVmRSZ14KKHg\nAOsmJ2NYmBnFgg0mESmqa9nb36e1qVHGLrdXtwfq6IyjMvfL8nHGKEQTkabT\n02kvSkAnGpgvSvNy9loyJza59NTvIMCDImnT09K6VECJAGr3LJ7V16+qlF2O\n3oPmwTjz2a52/KIUBNIt4B30yeETzXVGD+/rFMQRlSUSiNcOwVcortU7LXTS\nRIVvxoN/lbtH9OTBLsWa8wUPrmnixMymBUmmBt3bp8sfHbds6CuvDAarRJzp\nILD6CoudXq+jpK5oLgEZd/ZO2wJX9CIRnvtOjEO17KJ8Iq03xwNZxPRX68Ck\njGyY\r\n=L866\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQAC5AhZka+UW/Ghvgs9oLipz3+3bIvSBxZ88teclOOAIgSBEm3cuZHPgijY5f8Xk/u1opkItkW10Y4cxjI6glwJs="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.10_1576283296142_0.6453243109783682"},"_hasShrinkwrap":false},"0.0.11":{"name":"expo-next-react-navigation","version":"0.0.11","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.11","dist":{"shasum":"b4281443908f51de6fa51eb46ef94183852dfef6","integrity":"sha512-nQY30DsF/pZZOwFvJGG6OgVcDB/RpXOhRrR1VKihFpwV3rKIO6YMF4Xcf/CIrl+mstIJmyZCZEUXpDEokyIQgA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.11.tgz","fileCount":68,"unpackedSize":28293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9C3VCRA9TVsSAnZWagAA1cgP/2zUCevfhrSm1zEbAbLN\n0/fG8X9sM5g0YZJn+t5HoReGSvD5v9n9zzcJWJrOzqDHhrAeFz4uLEGFnDNe\nCiKlkiHIY5Gppty6ZqLUFmgjTUCLzkJzytCn8rRXEsxe3+dVJx2PisL5Ix9m\nFhqRufvsm3Je/PUBMdKJPe/0wyJMsPEcP/Yb0RjfX4SWEbJgzRzvZoMpZpVv\nmWLrAE+cq2I3M1YKcoFCl2U8xGMlXrt4Cv1r16OEPVLQfiil7fTt70owgYqU\nS2hf4BVxMxvG6RjaOn3kt0wKulnUGsj2kCogIy3dtMfHkpyET0iMI0qkqE8m\nvvOxAEp/p2mKDLJVE4au++SmWdArye2+4mKe2q/LB/yLXHvhbmwxjg8jxuY6\nGjlI15YHL5GtL1qD6QAyJ1X6Ee5suc6OUZmimqOzqUEDYFFyH5nF20c2LPY0\n/30nzY7LQTXayJnjoPOXqUKHKVSsOz5hQ+LcV87mKhGV92o6APkBkuPZumgO\nBi2k5q2c86hGmvjRD2IdMGyW5v0xhlforoXtZVY1NgRpKm7nRHbyojxcfaa/\nxcIF3kro4hCRRYMMjE9CPQBPKE3l3vX07KMhmzM4+d0T5RIHsYAkAparXLUu\nAYuEecgTrlyIzwHin76WKDkV/2gOQUAkmNYukgzxrCg0mTu68co8hZQfF+ep\n48gE\r\n=DAsN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeu0fgZWu5xWoxC9v2qZr+z2sLP7otuV/f0nt40tSpjwIgSdB2BHbRwaKeiHq4zeEnEFPWCkKZCYATPT/lzkTxwwQ="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.11_1576283605320_0.688125311635049"},"_hasShrinkwrap":false},"0.0.12":{"name":"expo-next-react-navigation","version":"0.0.12","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.12","dist":{"shasum":"a2262b3dc6251339f94113f47a38501da993047f","integrity":"sha512-6GIWRszJv/n1P5fwFn/xPBy7CuZQloZdyfUoAsVnBXeI9fgxfu6tF3L03hBgVG3U3BqLqr1XWI46Zi2ypz0LAg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.12.tgz","fileCount":68,"unpackedSize":29303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd9DXHCRA9TVsSAnZWagAAHtAP/1pAS7ypwhGwn9A2MSuk\nl3yZDik+gMyvsTNsdnL2cOg/UrjLl+dFrg1AEZJDGbTicnFuSA1Z/ULZcl8n\neds8mgQILMZqyjQSh83c71yw0qamUEbjZ2WfE6vhzjwoJG48Ho+GgY/u16A2\n2oc2DkxOUn70HWjvSKvaN64NDPVGzBXeije6U1SDtIMw2d9tB6tncGkEFKJE\nlfY1bkaUHIFz/X6hK7qB/o4uAUlezB0wr1j7T6PVFiE6VbAtixzV2qeg1rnu\nWVnaKW8FN00bubKMaBxPFmmU/corrasECWZmuP+Kt5XlhelXeMD6KLm0yxMu\nQZ8+3js3YRj2z7/58XZVtv455MXmGh6wDVdVqpL3QnLDMtF3X70TUIqqBiGE\nHIvusYfMihnfWmrz1z7/37O+M2TmvJFIbzpUweqVpE03+pMpewU+ujqQDo1W\ne3r9eVXf6fNAKIqLpIhK9vII7upMmHw/Fi39IzJFQozL1+3Ga3Kx3h8yvlKr\ni8ZuPLBLxkkr/YtWRdgoNKXcJa1T4ALwhNttR4kYZCvE0n6BA0BJ+p3RHaUx\n4+hDUDCr7hBf/i4QBJQic9AlDzxZavw5SXg8kqpsmKagWC52+kcZoOWWnobV\nVB7Dq3vzd4dO1yfR0Z9P1kdSLgbMgTnZpBv+IiId1lEfU+oZ0ozlwBdr8rSr\nPxzd\r\n=yV8V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDn+kehwKgXukHxtCVjOLgAVGcXudTzp6oux23knD5eswIhAPbM21K4Dpz4ZAo5fdtvIvA6HHmRC7jzR9SJxg0MAxQT"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.12_1576285638937_0.106746066769275"},"_hasShrinkwrap":false},"0.0.13":{"name":"expo-next-react-navigation","version":"0.0.13","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.13","dist":{"shasum":"8f38f19ef1f9856ac09437f70a1e829586e2b7f2","integrity":"sha512-3bxWAE1R96yDFiJdmWCgS8aSaym2vDQXdI6mId1bNt/X7S86b4/PRI/5Dzwmdtpv98F4uiFIGoaHabQ8Q+Y4tQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.13.tgz","fileCount":76,"unpackedSize":40562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+BsCCRA9TVsSAnZWagAAHlAQAKEjmiaZ1pLlXxQSwNml\nwF0m4No4gaBHydT+1G629f0ggCmon5yPy4Zi+dxoukZiK+JQARB4rH0p9AQE\n0KN8eFbfhhXmGGbXB02pariRw9vuTJqWWXxHQor1SBHCnIoKFvCjUEGpZR1V\n25w7Afg+Xer54wukaYTHSh3gpcAmQk+CrzErXYmMF8fSX9Yczvk/IWWsKrhz\nsu6xvta7tOf++6nRFIcm5nXuYgWaVSK9tUelZ9v//exdr2zCmPT38TECg9L8\nv3XfPGEPhAUDVKzZtDqJplH+BpT1OD4CbbzShBaKwkfuAmbRZ8b4mPVvFm2A\noYkH+lNtulH0vCH5E5iHGlxFcj0jqdB1bMb3mln5PlZaEZCiRWxWGhyCQRMi\neRnlR1AwLWY43hqIFfIyzcLZV7Sqk8stFT4B6NW76Usc8tgQKwdt98Dxkggf\n/hoRYw7iZzT5hndOkhmNnWz8RJV69oHYB0FPcbc9z7Jph21p1pt4lJbsrRwn\nSfHzLzujJcivjmPp5cQiISstk9+M9nyw1PPL5RjxXUHSGKIIignejb4Lq0uG\n1eLDOIDSJ3zM9ppeAlX387HECZQdLmuh0Oe7NAerNrEKZXhmUDbZlWNPybnM\nwsEqSFBn/+Dy+3IcULOAWL/zwbUV4XrS0KE0cwyLCmmcuRN/J8BuGy+V4FYn\nvrRc\r\n=4wyO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2NTHIYsNPNFzuPGlWC2NpIAwAj1iIS8/ZwzLcWKtdmAiBWF2JY0HR0IUAOcsY/aKHOS3jNimTyBamA0oSbETu6TQ=="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.13_1576540930367_0.8761310316993718"},"_hasShrinkwrap":false},"0.0.14":{"name":"expo-next-react-navigation","version":"0.0.14","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.14","dist":{"shasum":"e5e4874526c8c9ceb15ffad80c4aa837a14703a2","integrity":"sha512-pXFT5DnXoegqQMTLDo4XfuGGq+HP6jYmltUBSn9FBFA0nBNEvanzuNnPtCpvqapnl+SPpnXjEq2ZDcwki45HjQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.14.tgz","fileCount":76,"unpackedSize":40584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+B2eCRA9TVsSAnZWagAA1FsP/iqjETw8mgd0hhbaHHbi\nXJwqgvBvpjgDWlRr+QXjBY+kUTMCMQGovc5///DX1hpc4P8bEksauoaFEtHf\n0l/D+0aqT61vsqjCS/avEpk5qpSpXISJbQz3oGQGR8wwfZ/1jizBfznv0TZs\nnr3IT/zRZ6AkpVr9LI/z94XLQ5ZL9NF7CD9jUaHrTU5qzj73afanzJdy/o3o\n5WHp6YE9jbz6PAMMbjjEgzLTFzbN+sEy6sFmuALMFWxPD0U5QR64I1jTd46u\n8p1wkNOfzzTgQIajZlO8bBRJSjOH2MFotokCeqD/hvLov/klncXw2zPxmW91\n0bL2wubgs50SC5YfHRsInjzjFuqnITtNPnXNRbdG7OXa2rNz6cWSISW2FpFV\nDBmQ9YKViE7GVe9TvIFuYvc/aCzkLL9vWhdeYAJeeI5SIUkIK0SCY3i+Fhp+\npxZVwfnidSgzr/Qf6OYlikBWibR2L8P8SFfcNZ3mvh3bsdYW/mWoqzJHV+mp\nBtmn4ICbGI7XF6wVDkQm2vSNtImkJp2TXOCa6CbezZfuvWtTcT09Bv2A/f/4\nX1vQGnAt+o9b7pwuWtOCJ+cvQg7JF29Wje1XXAY2gp3C7jCJwbq44hpJjRax\nkyCy7+NKRCTcbS26xDV3jF89evL4vA24Hhzux/raV78iP9j7EiJGCJH60Bqa\nbA8x\r\n=q869\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBNbJXRoRMgaYFGhU+lIZvQhJL3wGRxaqwNv5XrxQeCgIhAP5RBG8CHaHYS9s2NOghfKnCYbT6ievd5Mo9nGmog9Qu"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.14_1576541598049_0.9908540385382123"},"_hasShrinkwrap":false},"0.0.15":{"name":"expo-next-react-navigation","version":"0.0.15","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.15","dist":{"shasum":"5a3b6a44469c40564af32278cabd16b3770411ef","integrity":"sha512-wrwHDwXHMcX3gR8qSQkRsU2gGqoXZMrPi2e960qy03oSzb+T6FoOf23zoFFiV7cS1ReRVixP+Mr9D5DOfBHORA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.15.tgz","fileCount":76,"unpackedSize":40639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+B4zCRA9TVsSAnZWagAAKJwP/0cZfqnnDbjtqoPSd4iH\n0wCDSolHJC1D0HkJMGKfQh4LhEXzjU5f5CqHLlpeHazEj9VfVaUwRHW3Zv2N\nZNU8ES4Jhfp7QdLwJIsxv/I82lueC4hugghsqY0qebNygmB0CC1VH2eE7WPc\nLgJpw/ppCZuFFGzDpxI1R7ptVMesDEoe22cza51vNY0OQAiSvH3fmq59exCn\nXBBYNrDrBKDXSI804aiLsYLD1fp59G8OMwPYdbK9bmM1IZlp59x//Zuk7F0S\njmDi7h+JIzXBFNV70iK6AqdldaAhlNWMeSzD8jU3NGTvPg2phzZaLAHn2NEB\nsy1nVrNjUxMGHPZIvNgB8sAottJVfKLRqt53BVYvvyhDjAMIhWt9+h+8xDX0\n6vPv2LdBu7jVHGyJkW7N/qt2QXlpqsIkAgJ2pBN02tonnVBYU4sojH+0YNvC\n316eOf5SRdglfOpB8UMDF5tDopVtvhf8OO9T4Awwwd75mlG9JuorlrhpxY4J\n15T21EdBBuvRBPQxeJJQIvb0I4RDNCq5pfqJWSVZZJLNPPFC+1gmccW58l9I\nrruoMv8QboWH4jaqzWaMBDnEurbstxnl7FERAEWRC28PAnheS3sza2n1VOcp\nFAMX3W39q8rWIAMBY2YCEW+aG1mlhGKtXObWzUX+NP2fWnKMYAw4Z7Jj4f84\nPPCx\r\n=vZyh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSsHGnbFyqvnb5ssnm9fUM6fo6eEmlKKzgDnd15gApnAIhAOU84a1oJnlEZdY8guuMBtWmR8SzL/p9PIkLtkFX0EUW"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.15_1576541746492_0.861022770027845"},"_hasShrinkwrap":false},"0.0.16":{"name":"expo-next-react-navigation","version":"0.0.16","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.16","dist":{"shasum":"80c8919692a7e79ba5c91be3ead900b6cbe0c963","integrity":"sha512-M9a2akwIAUlq3wLQIxMnzKB6bCLcWVDS7ylAbDIlQnfJmlbIw2YPfPAwZGrjoPrYhAdW7tQdEKJXiVfvhzGAlA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.16.tgz","fileCount":76,"unpackedSize":41081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+B7LCRA9TVsSAnZWagAAzn8P/2T2CZhNnhOFlB09qGN4\n6tU3YgE9T2RAqZ93hEMep9lH7LXwRSu9JvIt5qZw9w9KIJwB1h6zAWF2wQAQ\n1KreXqZ3jwXUdz6qL4vXX9WgccCgDUYAy9Frvtvkel5zPXRYoO7KAY0/AsK+\nIVmKngiGAvtBhGyXlo8xXmNTMqomauLxG5052AKbtVFk17treZwbsVVlsy84\n6gq/ijr3IvtNFUuXB76DE4Hh5lXxHIqzwIQuW4DmG1k8p5JMT/or96lFEpU7\nmHb6Sr8thrFJ4DpN2Dz39wXiTURVnRq4HKfLxjCR+XLFWS8/Krjn238xHcHu\n8r2xoy06aoc0u7CHUTZVuibivTQS2vSUteAv6CVwASSZjcs8UUqZ3wI0KPpg\nwMGEUHV4WizR7dx5VwvjIkQyAdNSQmxBjy1I4cSHw1V7n21OXpTaBDJx0YWv\nHqezt77MUbfp/zjtaCyHLaK+sT1TbgPYK9f4GIQzHoWG5WbjYoY32/KnmkRn\nYqSceSvz76QACnsCNIgqkNw5BZ+BI83dp9wh9CUi5bhFmQAcT3nL/VcBxdbL\nHnsfPMUFDEr2fdKE1KbK0vgORsN6ElEKMT7cIExYvKDlcGWeB9IiJXTsy/pW\n7ifdFdNSWUfBGgagGT71V5LfkedNp4ZXAqjyln7sViyiyemA2lPmdf/sd4wY\nFbUV\r\n=CrZq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4WMpAe7/+A5hXSMDs+arcIQDlJAVFYRxUBHljE4U1rAIhAIVh5RwXobdjARZxTYDSP6Tet87E4ipx/Zc6zLaiBaoD"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.16_1576541899415_0.19964326079371486"},"_hasShrinkwrap":false},"0.0.17":{"name":"expo-next-react-navigation","version":"0.0.17","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.17","dist":{"shasum":"c0780e3213ac90c9b2668c9f4418250c4f40da57","integrity":"sha512-z1wcYkRIDswUDDzp30ua3o0inIA8V4zNwAIG0DThh+ga5c9xybKL4hUognH6ffcWTjTEy0iLQDYnNJRp6fXYww==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.17.tgz","fileCount":76,"unpackedSize":41407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+CKrCRA9TVsSAnZWagAAyssP/R3bFqf/xUb8kCmMyMIE\nMp70uEC5AmnBNClAajYoX2p3wFsLCWbmpNwMgxMl+YmFRbFExNLVAIcSFW/g\nlQBXFZxENohN+IziCdHrACJLtYQnmwTGGnqNNYg9tLj3iUsQY/dgHKtuDHEp\nlD6loS9eD4rNvbB0UTSc0oxZ3E/z/81foxdUx6WBYNl4rbjVZXu6kXIuc+gz\nwfui829gVTPQ5TlOGSO41dt7gtYF9MWkleFTYoV/dWJIaqQWsJjcL1wFlpr4\nqwMcDVX2tCVRxGCsWQqQim3/3Y0VtDM+1JmcXyUf1ZXCE7OKnHT1fJTouocT\naXQdAtgmkEE96B4K3A62gi4f164nG6Bp3Q+cgrk29MUxUqJIakqFRyLDsNM1\nCALRFbHQBMI0q1PsjEjSDeUAl9L08XhjiQWrMCRnfvecRu2HgefpoLKVKHH4\nVw6OOMlTZAepYMengvDdSxgee7x91kqxyrGkCR4gYG7I7bq/sFF/gh7P+giN\nh/32x+1UT5EtdN6VlKHhowOC4iKAYria/xdNgbs4lzh65S0cT4cVfR+gdbz1\njOYMh6jZjVlLlgfRxUVSxkZjTqYmNKsnJmn34BtOOsV5N9Zwkx2nfmqmfZgq\n0zVSJTItp3Rcj9F7Tz4yapatf1BcpoSUhWyx/In5sDrpy8pSrVIpzH/Xxtb0\newf7\r\n=p5t/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbeph/fruf1HAyZRI7IKFQTrALiyKLxi+eKx4OMoIknAiEAzyvMc3OxLd0DxnNV/d6hRnkuVFM7AQOEKKcbM47TE5A="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.17_1576542890833_0.5860678132593382"},"_hasShrinkwrap":false},"0.0.18":{"name":"expo-next-react-navigation","version":"0.0.18","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.18","dist":{"shasum":"428878ec9846461d06497a58d77bb0d4e92c5de3","integrity":"sha512-wNe/8tOfj7T4TEXQx/zw6qhhl2iiFvp+5rc+I4cDYCLwjZ4L4vZSGz1c4hJJeaiMKxBrP46HuNEg7nFsvKIzVA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.18.tgz","fileCount":76,"unpackedSize":41794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+CaICRA9TVsSAnZWagAA1iAP/0/7ZR08j+OJPN4TX+3W\nuMXQyV/LK0A3WpNC3w/wfPYaPRBN8UYsKzHMUQrqGQtyh2BximCsM6WdzruQ\nkrflzXIGRag2VGRBtlB3BYjcpMpSspjWpNwHI6cZ4aFbtAnu6pcjDu6E3mc8\nHt6mDJaa2NVhJEvzHtdFHFXNuYERpDTzAGlbpOjrzqqCpsu34Veme2WaaoUQ\nnncYuMyOZkpelp3ccXuq+P/XbT2hDF1KKn6JfAzk4crVwhhk70L9/DR2Cf+f\nnlhngIQCuUXzHtU/4RuKCdLQhdtqxUQLflq0H4S/jXqVmNLMeDvCKcz9D1Zv\nG48hqPuBIDS7uKY6jPHAWEkDzE8PVCMgUBuJFfVYtnU+nKA2XaPxWOr3YDq2\nNYces8fCBn2eyO9Kfh6diNxTfF/9MdsInXhqDncDgs0xVhyUv8L0gmyb/03W\nRkrmkUoYGjBz3mbf/vqcJyQjdLydb+z0W60WeZQpnuCPbvHM6peQPOUWg+Xn\nQCMSqQtNkc+3+X7b9yMa3827n8tcivN2g1/yN6EmWY5BVEgMPTRSO1aVOsm/\n3/iQJ8fDB/2NE6GEqySXdNxS2JkUHySeZDkoFAsSUWL/DZiazPnGFi42BY6j\nz6E3SahfjDn4VAYCOHJ+6FhlyglRHeZxHCGZNsNI1hdkLn9nYu/z0y0sOdhC\nL4hu\r\n=/uHr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDk3Q+wq/yToRVJIH9Lmt2MVQiYqMIZvGRmu0KHux3qwIhANTtnSfOzW8gq69OlR565gURDfVHJmLUwQdi02fi/Jlr"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.18_1576543880111_0.8002538512266741"},"_hasShrinkwrap":false},"0.0.19":{"name":"expo-next-react-navigation","version":"0.0.19","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","main":"lib/module/index.js","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","devDependencies":{"@react-native-community/bob":"^0.7.0","@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.60.25","@typescript-eslint/eslint-plugin":"^2.11.0","@typescript-eslint/parser":"^2.11.0","eslint":"^6.7.2","eslint-config-prettier":"^6.7.0","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.17.0","eslint-plugin-react-hooks":"^2.3.0","prettier":"^1.19.1"},"@react-native-community/bob":{"source":"src","output":"lib","targets":["module","typescript"]},"react-native":"src/index.ts","module":"lib/module/index.js","types":"lib/typescript/index.d.ts","scripts":{"prepare":"bob build","deploy":"yarn prepare && yarn publish"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.19","dist":{"shasum":"fda70192dfeae7ee3708c7ce699ef0466695d118","integrity":"sha512-46j8do6PoYYq0AOMfumfaYDUa9ayADmpsH4iUndCrTDS+bgljiOMHUvNgtzfYQ4VVN5ncZ80lEVWl3UhmfbKBw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.19.tgz","fileCount":76,"unpackedSize":41205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+CsRCRA9TVsSAnZWagAAFUYP/RxsuL5WUS5WZ58RlEhL\n3qF+xGOdrXUlaClO1xY37HAPwhBV6kdwhdJV2WH4YvNRmUXj1CiG0GF4bL5l\nMWcjepfXmWFIuYccGCMyN1VU05JCPD60iPaXYRQzTPpCqHABZG0IgpMZNkG7\n5K8UHsigmVSm+JJyZvDc78G7bFpZdmVZRoH3YyN4Pi3c02BfCJ4Eiug4uGPF\nizPmMjTr0Jm9JGVOBsPXZc53wSO2nEXS9i0AP0M1QEp5cro3+IdqC9ZP3fNk\nz+x0q7hdg50vZkSIv6mPPffxGpb8KRaDBR7SxCLj/zr34CEF1tm8i3vbFJT7\nlR3NErycle3MhXlbUWgYLgH21zeaZDPznVyNuJjZiCTG0dlRmXbG5tF1IUSw\nNditkfw6BXKn/yifEdmqHtOOs4xDQHyVwlb5YCvGX0oHzhRiDkatsq86CFnO\nysgGUQ8poX3EpAi5JBRYTc2yIUx2SsV4sFVLHvz+S/VQdZsmewtYFKJwHl/I\n8vnxZ9ogeD+BwmgPs5dABh5lURLazMUXcVDaH/qIxVc8TC6XcuGoGhVxv4Xc\nmeiNt9M8K9V149uK2NLv9qmqgymYo7lR8LampeMMlwWVY7/14Nvm6+RdgDd8\njqA8nk7rnGumwg0Mg6gXer69o1QXXHYISXcyv0MCyjf3yuxE6tq5jR0Sn1hz\nG+Ck\r\n=cf4L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHPFgSmLDzT8D3/dCk8giqfLH6IYTARxBjK+ipTRopxvAiAcisr0oyLrLj1fkprLKS+WZPQybmlVz4ds3NMUV6dGOQ=="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.19_1576545040644_0.34609254717637716"},"_hasShrinkwrap":false},"0.0.21":{"name":"expo-next-react-navigation","version":"0.0.21","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","homepage":"https://github.com/nandorojo/expo-next-react-navigation","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the docs on the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@0.0.21","dist":{"shasum":"d1cb31eed81e490df41079b36825221dc6b2c407","integrity":"sha512-AJUjk80dKoyXmTp6G3YcunZryOCb6gOjc0QxXRl471jcO6ZY0/dWnPVGIg84Dzr+7Zx61CadzzqjNfvBiWuOHg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.21.tgz","fileCount":46,"unpackedSize":34066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+SdDCRA9TVsSAnZWagAACNUP/RSdz8+oIc1xKHeYtOKh\neU8V+aAF35Bcl/2YiKeMKDtrzX882IRUhPQWwxCiBaj51fYccpHHKLG9PFD0\nEsZ6wbx6+Pqkh3WOHpx9a87hXf90SSjmGOBXz6ZneaeRvJel5Rwdy4YsI5+q\nxW92VLdaO/JHd8aeQK5wq1ix38llW4OWQKcxfkX/aPjlZgapzaL9Ixaq/I1Y\na0kzc5obdb1jwheyNRyX8R/ZZSvG8pHEg61ZkInU3Y8iaFHHOGhJfGdjeyFm\nNMhdQH6oNbswB4cqxbDPaYhJ8NNdU9PIFZY2lKrj6VT8R6uBi1OLKUurhOv4\nEv2TDXgDhfqpcQ61EsBoKZB7QA3RIgDSstK92IraddjnJNJcOzAFxGmHzmXg\nq7hChKUs15nOHaR3MsqAW00hbZcWxGv9pzXqdr6SEYldFdPcsSfiH/WEhQg9\nQ0WfR5L0CzsdjtM1maXu1VUXRi18N8kusafL3Hk64A4UfZjotoHT7RVNX36v\npzKZRg2eJ1VzZtRmYdZZGYklDzlArzhRFKFN+Dx10FQj1rDy9DBTqLraMZIW\n2vR2H9oPxQiO7YUotHylclgNalAMaeVGlYQdJFOOPw/BMuKvn5S1fFcvtubZ\nHYJcgH3es8E88IWOo2wSZ3w6dMkLPNZId9Qe02b0smBlqWh74cHnsOQsTTSv\nkWVJ\r\n=huW0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYF8Bh3L8Ef/rjWuNIm+Ph5fHz3Z0MNlzfdAyK4rWwqgIgTlCzp+aG5+a0s7nGJbCpp4OeTuFRKWj9p39z8/vGoqc="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.21_1576609603155_0.6802025601554418"},"_hasShrinkwrap":false},"0.0.20":{"name":"expo-next-react-navigation","version":"0.0.20","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.20","dist":{"shasum":"5f4e198ea309af209db73d494e3b42141fdaa2f8","integrity":"sha512-FanOQY1xA4e9DfV3KsKawFjul5zhsL0g6znJckTDY9AJnEhVCHUDXJhcPIby80SNpb52kJBdaHOifgZebD6wVQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.20.tgz","fileCount":46,"unpackedSize":36291,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmWdCRA9TVsSAnZWagAAiCUQAJmeqxDAGlHf6bvlt4G8\nkQxpK5r+/6Hs3aLKEhMqojts0mBf0265Te+C4dut90ZY1M4hFxbRatRyNqrp\nVlrzr27o1p77Mg9gPJIgDxoAaaUJozuQunJWOC/BfGFH+d28CNTiqABp6iUy\nl616oWziThADnpMzjzxefzo+IGE53ms/LiIzITBphwS0gnJjypY5/iE9fBjz\npq5kcuo4HpVHxrlYAMcnzLzB418WPuahCnVTNeWAXTF7/asNkgWZCrvBC5oD\nmV6JLo/srs9MstSQPtGPMfYyMlECyeEKMy6U7NaZxUHM3+OVCk9QvMBlFhi6\nPXkFh9ucRdElRBPG4Q4KrHuKxoz4OvwvHlJRrTauQc6Y1IwbP/xvt59O8H6E\nkufdIZW09GFTm9AkHwwo6FjGQcTgXY0KpI2883NeibgZXq5r/3zgPpxb4mt4\nYL6i2GFMdsYZnRGSLMyZCueFr8DDLm5WU20NUixV/2GEmH3HdQMvIF28NPTn\nAFPF4t7AOJUMwO91ye+tD57YAb51L+RPq2RNwKMpqLAv8zD8mamZ4b2kt2/3\nCR/2WV7oSzVHYhO8RnXVPRmzCUL5TZdP7QamyXlFc1Yogbw3Hm6wj19/LUgV\neLEhZXkEazk06ZkKduuJ4SqEqYn7kf5f8vaoVoXczCdiWXmKPg9tM2Dr8RVv\nOlHJ\r\n=exrV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvO0u/odMrvsYdp/N17DUMWKv0c/IMvvG7+z3FpQACjAiBTmemVjuYc9ReS8bHhLaEI6fA+b8bQX89+drIXAzXhwQ=="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.20_1578001821374_0.8872593543625868"},"_hasShrinkwrap":false},"0.0.22":{"name":"expo-next-react-navigation","version":"0.0.22","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.22","dist":{"shasum":"b6a6e5bc649aa722853e722ae5da873ed7e8c2ed","integrity":"sha512-8rEuNx1nRAQHmuFfFHq2XjWrYhJzdeoUvXYjH1I+KLW6NpLC+Wzh9RzPbDPFO1kdfshvqu76tDDXVXsZVHXdeg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.22.tgz","fileCount":46,"unpackedSize":36374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE6aeCRA9TVsSAnZWagAAB74P/1HhnYSM525SX+++wsbf\nFFL+zTwmd5V0q7bX/VWt9TXKW8lPkbfg5Cs0pa+f7sEUgYqKTez6y0Qo3f0s\nUNoMvenauN9NpLA9ndHfF5qt6zVtty7z1TxOyUHfxoMlqkexIdxJtgf59Aj+\noG/8+6j67V3uIVdXSvRP33/nW/YYcxP7mN4ww7GtR4/dNOVeacjVAFADG2XV\nPOI82gzoY1FLYi4jI3eHfIBd5kysdKW3I+x4Hl1CR74XToX8YX4c5J+Cyg+z\nHkNnVzuokCtLTNMX1g+C7ZgqcZNhEMrCHs2CMf5uTUfnCZDpCHUvgyt7cXMe\ncAAS0WpPU8dmqOr048f4LrdT/1hDLt/VF/5Zoy8K60VT2jc48f3gGxySOZGf\n+MkUzpY6YYk6aUwlzwbQmJLjp17HaJEIeV4PnJGOwyxTpd+PfQe3gEzfeKm4\n4IVBV9Bt2VZ2QZu4GqFkq/KycPmUVSMYIfuT81ti9HfG75OQkB2cA1AunDzh\nL/cw6Bs0NkFEBvciBCScO0uNlhyFZBO62/fBKY9skXk818TcsVvy+/SfZGei\nxh4DyfXj9hK8J/7v7els4HaYK+JCHFIIq1Ix7SH1Hkxh4gH2hCOkSMWzoz1K\nDwZeMmNNDDgOJK/fHdErJrHiLLdR5YwOtfQl9rZwAUXd6ZS5WJjR6n4Aj9Dp\nFcJE\r\n=7I54\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHza6saSaVtrCvvKSnv4nYjLJebK8dT0KzUQ7CuyqW16AiEA8pyZu7Z/fUGgSnK2jL64cKdNbeD3nzIzOQWpaIaF7uc="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.22_1578346141980_0.659155754043578"},"_hasShrinkwrap":false},"0.0.23":{"name":"expo-next-react-navigation","version":"0.0.23","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.23","dist":{"shasum":"ccfce60178b51109d08c8c2e271249eabd8eaab5","integrity":"sha512-GoHl+VatUL67PDlkhg+7c3q+57dvwNItNBsStkBT6OBX7KmPPBTR1g81yR6p7LOGc28gUof6MlcBN4ZODozElA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.23.tgz","fileCount":46,"unpackedSize":37810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFM0fCRA9TVsSAnZWagAAO9YP/11fIeKwTsxr7NlOdsfN\ncCKD9LPiZD36MQ1ioAZd9/ZHgr8aRQPSGZviVZhKp8YyzIXswEh+aDLdMmqC\n0CPrhhOzc6tzJP+JCQVThuJhQWrWYpN7kJBIUmcrgKtF1GlAwe18aJAQqoDj\nXaYEovpClBPZLooFwlJxhB575UTijmRGvRFVHAhkcvk7Y5qWyrV6QmOkbmvC\ngny0tS/YDciPHjzWUn/67o9/vlOM2XxBw4lwA0JS86ts3Je2JxgXwhJSoI5W\n0SLTGCQjM1n7BdhNJxj0g0Yxf9LoNVWMwLxmdUT3I012KzAoJrKT11RREKUR\nZ4dNJPIUylkj8CiVqbjDRimP/mLS61t1i5/HCL4cuyjSQc6ndeCw8iVsVMrG\nmWqRNZ6N7OubTGBD95/ssGLaVlDp01GULmb+sS7Y9GfPi2Hixomd5Cjpifg0\n7GiUKFE5Hq0E3nggof+ZnJ18TYUCKrctk+TBCwaXL8/3SOZ5Wx1uUkq9hh+H\nDEb41WPVgYYTWSHL3F68CFQ4pD3bpiZVhMgxmh/nJcmtIXdOotpRI+jALIdr\ng6qX3KrXQUUjNbyUwI3FKQCmzy8m/vdP9YLtawhbiKa+W1WC3kiXf3txi259\n0rGUqcuFs6ewx8gZnA5s50O/YOm5E/vP6ISI1sSSJ7V43xhF5Fpz8Mx3HWv1\nU4Dl\r\n=TFh4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8BDhQTVrrLIy1T3KinQbNjxRxliQ+IYHkrI3sB9l7rgIhAPeiEBZ/p2AuyM2ex0gj6+XF2WYzKdwz1ymlNcczw8tS"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.23_1578421535291_0.2680857971613144"},"_hasShrinkwrap":false},"0.0.24":{"name":"expo-next-react-navigation","version":"0.0.24","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.24","dist":{"shasum":"d161e61ae30f7d8645581c85b830da9b17d76f7d","integrity":"sha512-VlcgMcWnXb5vIGoaFroDCPJqcHIospHV8wpHvIuQ8lspeoOh+nDIbRwQ6ZVyxWfe4Syj+mvipow3mf/T+1qfHA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.24.tgz","fileCount":46,"unpackedSize":38123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFoKhCRA9TVsSAnZWagAA6HsP/iEqimCPDiHwCNyR8HXB\nWv+xDbJMA1KJv4toxfcqwCr0TmC0/AOUvhmPA9jjMk/Cg850YY+otEL/nFdZ\nQ8hxFVbbcEAalMMyUbtHg2wmKC3NUaP5RUz5pwBvkkfx2p6DPMrWlr+DhYr2\nDPDXgeT68pp70YunfkIwooRfjP1Htc6jYJw15fk/MnzfJB7eknZyhPc3CCwB\nNtMrlTcydGo+yL54S43IwsbKsB2fRNjwtLjj54cN9A/9iN6zHmKyHoDMxoBm\njeYBsOM2YF2namB9h9HH+Wtm9Gkv4i3z2RI5U/GdpefSg2pLBjv2LdYT7r6I\nqp7KHodY2kMkzb9hTSvgVUqX3I0/xH/+t4kgtylGvpdtturwCQ0rzH8TdJ/U\njNEpP3ZeHnML6+y/7dw8h5+fOXA8UnsN7Bd7tyJQTqzVaryT14FDMxeOQBpJ\nMxVn2bRc1JSKKy9AcktnTyFCI79zvo/Q8polifMoVwJ8nvvzxCpjgW8vGFqy\n0yPl89HWhQjiJ9NkW50mMaNoYoBUqq4nz8EiNLiin2Xy6bVBfLADOvFqScxT\nIFgVP/8V/omMJmjWkt8f6+XKHAu5hrB1Vb5gPh22s6NyLBmIZQt6mDexRBIt\nM3pegRIoIdmKqRF55h2uw7ifTzkU/bfmx5aZAHMDbVPQR4HRsd5TdwxM/BdL\ns82x\r\n=/ieK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnd/G4TQhAxka0KeaQY/+I1TBQvuvT6wfOWFDdhv4BSQIgXpmnaRgSk8IFn3jda3Yg5qXL8lZYU+MNfEx4hDFUV4c="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.24_1578533536785_0.9613941787482925"},"_hasShrinkwrap":false},"1.0.0":{"name":"expo-next-react-navigation","version":"1.0.0","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.2.0","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.0.0","dist":{"shasum":"ffc1dfc7447d7a301d1fed5f783883aaf7808af9","integrity":"sha512-b4zq/07VGU//B38ENtyBrtMymtzn1fteteVktDDDvFL47jLMlF0IVf2j8vjAUL+LQ79XxtzYn00tORpkGhM28A==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.0.0.tgz","fileCount":46,"unpackedSize":33579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXsmECRA9TVsSAnZWagAAYMkP/0ZyuHEMdxntMHo1hzsQ\nM0c7iDQKjeiTkJ/fUf12xIy9B7NhXN45l/bJz8Y7wvdCpctrTam9gLcDDxSE\nrBBkz+qi1V8oh3kL9CigaumUjFh59sZZoSTQKovx9W/air3pyFKtjTKst7ji\nd46msi5gCqfBjylMNujBM2s2e4volpztgBqam//WwlAVtyNuQtorBdffhfeG\nc+cZOg9oELh2DVeEVNwTqoeyxqf5y9nJcShRxwsVQ5shFtOUQLGaXE58SPyX\nq3kM6NtLKqdHtnCpSg460NbIPeEfNs0XCDEWTAElzeeu7bP6hXNzwcH5Uvr5\nh2CNxkr2W7twJ2QcC94ds/L3LevePTVdZLxcNDjoiaEjPC1ba02JK5KUQLoW\n2h2vG7O42+QjksLHLDr7bPdAPH+mLqUlyM8Dbni+r8+Lo1HFxdA0oM8u1qfe\nEQQXvbSJOWYHbhwzi1hKo4FGyjhtEfba+ebOYw4Z/Dqe+SLvKEDnHwcqd0pU\n/EgXukjL9Fm6QBzpNa7RBS39WrliTLCWWAzA9qpoXO9eaZLS0Fe3+JGaprbq\nmjdX3/giTWWaC76LIUz+G227/7mzmaxNh9qBgv05Pk6cFfbu4c4VdwgDLG2B\nzRU1fk3NqJxIWapKBtgsBxXd3xr8LVlF5qj2GieOyvHFYuqVK5GxqVigXPgb\nYuZ0\r\n=aQUv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHpVFFQe36rqAnxuuOEtykpj6zhHWmQYDYSkU4qmFlM3AiAd2jT9mUv7LKjigvZCARrAYtyhyQW9Mn3gXa4AGZjT4Q=="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.0.0_1583270275462_0.18267447187419972"},"_hasShrinkwrap":false},"1.0.1":{"name":"expo-next-react-navigation","version":"1.0.1","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.2.0","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nFor `react-navigation` v5:\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.0.1","dist":{"shasum":"1b407783aa3491cb6e46d3147f6ae0450b7de6a6","integrity":"sha512-0+m3X5P0XotSvvtpQkjk4/wHSQCUe402PnFvEZAQv7FvvowYKXheNQ2uCRtcnT1kWOSKHmPB/MQxzeiKfgh49A==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.0.1.tgz","fileCount":46,"unpackedSize":33857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb5wBCRA9TVsSAnZWagAAIzEP/05he41rhdIv5vWX1oqn\n2U961mEyQ9EfEBb6FIqOE+PjF9BmI9/xv9n+PILNhRW6yrv8K6FwIkpLMOVK\nMMc4LxTDfBWfh9E+k0ZYYqtniXIDBbIQzmYRa8qFdhRNNwKwrF9MHsdeGcYR\ncdyn/5PjAM96uYv1459NKjLWyVv259oqRvCwXuVrhC1GnSpc38p8qQLpM79Z\nh54VX0+OYQJ4/TAqXoOEZVNGPm/PVJDgaqpcP/TC2zFfAKtP5BeuEm/rhIM1\nFn3OPpKouNDYsXyuhzHSoYpIB43rjHiH4mFQEcMrurg5vqkody5DY8eMatqA\n8/oXT0Sod8T9CBbReKMxLlFDbv81aRQcsA+Sqm3n7YpB6lSHjojfuBm/A45E\nxqL6H5lMTSATwziNeq6HpIgeozhEYU3jfTPIb6sSxxwwMwjfzm3/yZ9tbAw2\nlFUek+lmq3CzjWl+9UAUXNt3XCa7M54zwPrPhH/tn2Bwe20IoTqtxx93XabO\n+HTQJUIGWmQE3TPMH0UW2VJO7E11Ckwb3yiIv6tWp2FI0Q6rJ657skvYUfTB\nak0ec8vnzT5PUJtjbuCHySQHY0wxkQk8snVLiugHQaTdK6YE9EjN7V6jIw+c\n9klJNmQK1WH2QMcDXE6j7fNN4xrbQJc8D2NKX5o1N+baNAg7xzohGe9UsvUI\nKjks\r\n=dQSp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjmuNhO5Q1F4g2L7mCQnyRDj+tRkYn7dGRSL3Ev2qYrAIhAIhX2z4aqJrs6odBCufTtt/4jb7olMixsqutCGzf2kfT"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.0.1_1584372736592_0.8225997335310202"},"_hasShrinkwrap":false},"1.0.2":{"name":"expo-next-react-navigation","version":"1.0.2","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.2.0","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.0.2","dist":{"shasum":"1bbd6c4d9c1403b4c702994c43a7e3c4145bbb3a","integrity":"sha512-4x/QhwBEnKreXOQDn03uHnIh48+D2qydF9Zz1TI8kGZKxR8VR2kP88/qgYZtPCUMs9D5bR31lN7byS7SQJ3cAw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.0.2.tgz","fileCount":46,"unpackedSize":33936,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb5xzCRA9TVsSAnZWagAAmtcP/AsBImCoa2JI14sOURcZ\nHj7/7xcFQakGlT3uHQwf7+6TJADx82+8nope+MEiitBzsmxSq6dFf1UPcH22\nChhw9qHRr0+Mwysia9c5HC+HR+e9x+gfhneiZcJN2ic9xZGo02TnUgEuIg9Q\ngpMOWnU6gEWdE3aLousjkHoUiiEQJBwhZmqJgPH7IPr4/ez2oUgWxpwqP2IG\nYn2EwqV/ClQk0PUiwYCp7Ka8eOoJqGieqqkZVdYSFytbcAmfBIeyJQCGPy7S\nVSuiOhnnqqgz9NqgsYKylJuiNifj1gvLDXWxJFcUTFnZgyhqYiATCoFI/50N\n5zXskqT/6TsRAk56js8V+/9PrnadVn2EdBR2O/k+0jNCgtrdTpnEiMOk4gEM\nhwoY27k8kOSUYc3RDJSPa2tTeKYODmgv0cxoDTVgnwMwe6aA+EBy7r62WVsG\nSuukkygLBpTnHjbawvXDZfzF3AVKkmdn0a+cQrElTlduuB5JLAW1dnnEQhNl\nCaxIuH1WXO4x4oRGPdD3fTcUYS93hp/62mv6r7awSKNsGj6RVYSmMRnAVzOs\nJ6C86rEuXw+yzdywOSneE0pcylSSWCDEw2DR4uAtmLIu+SFgpY9pqDbsWvsz\nwbQ5DjP9leIPeeQh4Ou/tfmTe/rCyntd24L9P3UASWWmCd3nqIwyZVqfK3Be\nGHch\r\n=cW8r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/kJdcmyfeA5KiwdL+s9mgkVT3op42zxyUUxf8wbwKlAiEAsbahfbJ+C00SPPv93md3bFFk3Rr7kbLioLmNOJgQ1+w="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.0.2_1584372851367_0.2447738618510351"},"_hasShrinkwrap":false},"0.0.25":{"name":"expo-next-react-navigation","version":"0.0.25","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.25","dist":{"shasum":"047c4c192737622f4e6b2e2090a12f9fe8719242","integrity":"sha512-f9kxxzLer3X4mGXMgqCtCMtjFG5/bminArzpap1m0kGl1tImgSOB5XZTDTvUw1G2W0ZonZ0lVGGTYEkVxnIYSw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.25.tgz","fileCount":46,"unpackedSize":40130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedpqpCRA9TVsSAnZWagAAQmsP/33EZ3HMFtrm8bxxxbgy\naiDoqQ8yQbwXyNrrhRO5HB7YwHX3FhBqSs+eOnKJp2M3q5sZ7Wohb0646siH\ntQinYF0Aum0RGpZwPe+ZgT10USDIMFeDdWuA1Wm5E4J3bcykFocx4b0Awmba\nEWlKa+wkejAdpDQdTqupwN/461ByWDE6L4kr+tdadWBx6U/pG9USEyM/GMVT\nF92Hfq9P7wyljamDC1SQezL8ndkuHWjLcrdoRqTmx3zdjGAJ3G6CRzFtVz6k\naydhL+RfzYYTVC863jPHc9iDf9OWQ+dK0SnQ7gHck7mVd/q1J3z5BU4fc9Vq\ntGLboY1pKN25Gy1439qgl6qEAAO0XNPWPMYsrR2zJCETl+1j3D13D4NqqsBA\nyLAtsooIH4q6eL/N65ZtJOPzU5F0JhoDgCoJXvcIFatrfnHGSXzZMn8aaWfo\nTYStdNoO902brUEif5IrpEOwxS5RTPyvtFtsyy/0+FCn6JEsubIcbzAxItOy\nN8Sj6WTl/fd8Cci/2x4CfZrJq/vQcsqDkl0wDleRIs2MHz6F+lnR582EVfby\nEACHwQlYG8ccWwHdiECdONy9QNy1SYd0z+RNatKybRsueN59ycS+yt5rIzBT\nbOjFLM2kXHV/si8VGM+ShhPkEx87N+B1661EICsWusIt4AjpeHo/4I7TyNEC\nEogr\r\n=qsoS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8wROHgFet2ibZRjeX/1wnTQO8fqbG74k/fPidZjikaAiEAj6kbelMSuWyVA7sL/QJYwwsBVEYJwKUwfzh9YNCwkvU="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.25_1584831144620_0.5919723795213601"},"_hasShrinkwrap":false},"1.0.3":{"name":"expo-next-react-navigation","version":"1.0.3","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.1","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.0.3","dist":{"shasum":"b630ac8ffa69dbbc53aca955a5132f607a754b2a","integrity":"sha512-FRflfJp4rcv6iNACGCFKuWNsx37Z5uRbE+SHFn1G5HdNgv5tqL4coHN5ren9mW1CWRHEdMjkAAmuvsrPOCQmlQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.0.3.tgz","fileCount":46,"unpackedSize":34106,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefBTuCRA9TVsSAnZWagAAW9QP/2dj73JvdXGrFi2wKLTX\n8I1d9d43tNT6G0iMa6kabFcf/pUv88Soraqq1ycV3WlLZ5LGSF3ezwZ5MPah\nPmTA2itTRhAuFv8yje2DNbh40UL6XCE19pYb0lUc/byuO0CVb1incpVSFYZd\nc++xxjErxZy3EctFTY9VjeumMUPfUuNm0b3GPVoY1qa8q/pSv6+yp+iadzHO\nCrEBG2G3uWazfH8s2at+0pd7MhY4p7BFz1HquJvcnaTuUtcMHd8511Rth+En\n45f3FK7+1Q+lw8R0uvV27ru2QomA9KTeeUcsgGmb0I8axQ2CgdssCgaZCmgK\ns0vhF6xKHeTsK0ZrNZdx4PO9x2iizjq4xzdAFCpDSYPDrt0TqHJiMUb3D4Pp\n44JfflQn1jx2gPIVoQ4eYZ+91j7s9qvUMuWLyiphXFKoDklSkdBHkuJ38DFk\nGJIMM/oTL+2aG9XoWt4kQzdFi1iRKTDkgjFErFIkPnUkSY1ZlPuxA5APnudj\nqlaMc3fd/v9i5KUknB4z23ByGiRxcYH9X3+PVoyz49jdfEJlBzhK6k0lO6jK\nd/WtuWMGuOMrYZEMyy6txofz8eBBsRBCyvL7rhCOtPxXlluYGWlntJy5HZr4\n6i5feNN71kgNRpbECsREJfJdGAC4hLzZnmDqM4rdHaBTjTtT/E+1OHJXluwA\nGSJ9\r\n=oo88\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj9wsQKTySHxgdw0WYHsoMomZ/q6bd/UdnauSmIozFlgIgVZvBY3ZkzdWFhrcABzEzp6t3YxKLcqabb2QAofw8hpc="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.0.3_1585190125848_0.7483070617044332"},"_hasShrinkwrap":false},"1.0.4":{"name":"expo-next-react-navigation","version":"1.0.4","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.1","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.0.4","dist":{"shasum":"401c5006879cc0cb48cc2bc94b1129657dd9589c","integrity":"sha512-LUJ2QJhcNhE/sT6cp6LxH2YZC7pp4cKq37mL1q10tDkM+c9cz+LExiGQsyFxBSsEdQOzdb+3jskDjnmjyJh1Ng==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.0.4.tgz","fileCount":46,"unpackedSize":34616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenHRkCRA9TVsSAnZWagAA/WQP/1C1jEtzgRbQRMYa71/x\nZVgn7rzeMqD+cn/gyWUx+IkPke2xX7imSp7TFCHGgXaFyemJzbhY7WrUIqGY\nHvsJ4kdLpj43V5HFXJSWLbZYrAFQDKW1yHbuMPeC2wf2Feczm50REHlM0ee/\n84kdV6gHvjSkGyeXfzOjzudGCxpicRQwTn+Pyr0rZCu14KKNewQJWpZUrX/A\nb6Pbjb8nVOcWzs7GPY+vbs1GoBvNmGn8NazKVd7cIInukwyRIlrx3BEU50i4\nVIz5GY7w3EK6pGUXMti1vR68cCEohIr/dEwxtihofRNk9gjz3AIOtxOPbTF1\nQBwRKyL6LmnpGCO+RIRWgMwfgAh36RVLtvfcJHodGXOi4OD9wJBtMwvzKpxl\nupIloBp7/jx5jtLJXq4YDwbRf90hcq5CGYis9DG4vZxSzzGbC0C9kLgG7NTK\n5JGV2azTJ1qyzr7q/a7T5hM72UNJGgZtLA5j6hmZl7aMuVC9I6EuNcwXspGd\nNV3R1cxIuABy54gaK7NsGGSFhE2K6e4d+7FCbQzzcxDDljOQZq7XPSml5d0j\nKjCKdcGc8rFd6dFz0oLlU4HG5nkFA0uf3KafODXQKDQ7ZmA+VHFn7H/9dAk4\nSFY+wdt6GABdP4WSWu9gKPgRojh1JAzE4aVXCtgsEkCgrkKQgdZov240rtDW\n6GpZ\r\n=VLH9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCG7IDI+ld7/tecqM5PAemCZLQq0wwoR51O++sH8zRcUwIhAPocVDwHJnvaCh9P8AqFi5a6+89GXXAw6OKPpkx5zVI2"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.0.4_1587311715472_0.3471168908219997"},"_hasShrinkwrap":false},"0.0.26":{"name":"expo-next-react-navigation","version":"0.0.26","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"lodash":"^4.17.15","next":"^9.1.5","react-navigation-hooks":"^1.1.0"},"_id":"expo-next-react-navigation@0.0.26","dist":{"shasum":"c97ae403abe030f2e78b7a4d90131de6bfce621a","integrity":"sha512-K5VPV5Sfe2b1IzqLVP4t6Ev95hFwPJGMuTzBDTVRX5BLxHDOl3ey2k5ZmZQrYolI29R1RMnVGKnnYdEGzPQn4Q==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-0.0.26.tgz","fileCount":46,"unpackedSize":40435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenHjLCRA9TVsSAnZWagAA/k0QAJNQEXm+027q9To1ot5i\nqhHMXV9tkNs+dUG0JMaPfi7wdsnku6jMPmTSILRTvZZhEFh0ER2TiRYF3USu\n7YDnVbsEfHMMq8ABBLU4pdJcB3VitGaTzkP7iOBS6DVG/Kb1ByCDvuyAX1qH\nAhQkyd/YtLBCMfuIkSsBhcD9bglkMJdbSbo0G615D/GH3dOdUxOZA/t9O/X5\n0YDz/k4dJm9+sQfRYvJqH355/h1imwiyCYC7hEpUrD++vrSIA8b/m77l8d0A\nhuWM6xHH/XXIWbatjcHEi7OLDWm1+0R8HahlCLpeacDi+4IraoJyfLtozsLA\nSqsLO1T8A+GXUIQ4tDzQJ4LHh+6t4tr+yTTBMV5kFQ6HpjwAe3kiwZQX3jzX\naRnRejPrNg0Aa1mKSrLfK4nFYGeu/FXNYWu2mo3Wohh28iekrzrnEirn2Fzz\nr6ywJPHeM3CvbBVCkkCud5LPtuKgXDvW31lO0+QSR7xEmn93ne3l1VZJFc8F\np1APbtT5tOvrcJXlBsKY0x/3xyR8FQV+qbj8T2xWTHCc1q3ajNCqjqv5mAu3\n9CnhipujqkEYiE1Jj+3wmJv9lin0ax0W1wLU0B6zt25ySwZHXcnqhS+ky7Hi\nXF35IiAPN7G2vTBI3VXdJWJozWZl8dA4+TMhmp0R4oYXrqsmpDY8uZkMGwGW\nDl/Y\r\n=Q+GZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQXwCHYMpzGY/EWu0cq45h78V5+Dw79wTOhwcgi3AbgAiEAl+3TMmiUhHFD10kF2V9AGHNK/O5bSvOmwJMF0B6a9cg="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_0.0.26_1587312843319_0.7624209551279035"},"_hasShrinkwrap":false},"1.0.5":{"name":"expo-next-react-navigation","version":"1.0.5","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.1","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.0.5","dist":{"shasum":"852537922b90d72e1e109e252538274f582dab2c","integrity":"sha512-vCT+Nkjs9VxcMg4k1AkTbaoARVbGVDsFUsHlo/Om5g6XGn405dJwpVruQb2nZ/F2lhlqu/G/5Ii5U3W9EIUgtA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.0.5.tgz","fileCount":46,"unpackedSize":34981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenIEACRA9TVsSAnZWagAAwmEQAKH6DsP7WxOirZL5MNjL\naOSn5mKtmSVG3o/z0caXltnLB229emM/pF2TsFVbFl7tzIWjDdtYDuqQHGaf\nePJ76xvVrk0ey50MhMj8XPgi1hKq33wZIbxzUQxZB7R0+IaJVbNSd2D2U+Xp\neGFmP/i9RhiEoZ12llWEYxZNrnvFW/XFdnbBrW6kmL+Go70BPWfqdVfQBb/N\nR0lD4hP/ldRepQCxWA4/CEb1P6nK/dFXM0INKWGUgqk6XbbfHSCO0LQ5r40O\ncN+lANTW36TMfEMN6i2SOJpb4WZkHWNrC7TjloNBglf2MMY+piab37zfLvzG\ntLxi/WvO3SDVh+ex4SZK+iTG77vOcCHWwV6am7+LX/yXjxjS5A5BuYHXzTyT\nHgKicMe8PHXCqbOb9jl0neMwQpI6Rr+VnXf0g1eLaEUs8nSChGsQlrLU9F21\naCDck7flKQvMk14iyoazwd8S1b8VdyUHNUr76CZC8rZgiMjU/HiV3v430iFI\nU5MHmHjM5033V+mVKTvWHQHbULVVCebinZ0uHbWP3koxg6b6fgO4bNTY9NVi\nsi5k7oeSse4sHEOSltz05vJVocp7DuhPh1TNED/d6wWg6LmU4t69ayYI3R+I\nS34gG/aJaSF5yAwiFIPXsRND/AoHjs2pW1h8HS0xZrJonyP+80aL2WaeMIvs\nNCJx\r\n=zB96\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLYfEyU+OC0S5xWrf+D659ozyvIXVoIXSXDI3NiFRcOAiEA2jqy4MQxPf5avqEgWoF0J3PTPPhaODemX639M6HL8pc="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.0.5_1587314944363_0.12585097148541147"},"_hasShrinkwrap":false},"1.0.6":{"name":"expo-next-react-navigation","version":"1.0.6","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.2","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.0.6","dist":{"shasum":"c5a7e7824c4ae1127165c4da4acbf1fd22ad1e62","integrity":"sha512-/JpzlU5IcWAq/KvZ7bXtU6XnYw+Oz63Fh/yuU9ha1SrU1RFFD3DPWB/rlblmy+DCYaj96vam/Yqr/GO0okHMxA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.0.6.tgz","fileCount":46,"unpackedSize":34981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeneOpCRA9TVsSAnZWagAAxegP/RVYIuEGC9DGXRhEe/8U\nb5BQuN5i/HZnlVN5mFKft7OyQeUbG2UYNJCemAnI+a4+Kej/XK9OkUuaPdyz\n9mxGwVMLSAxFHdLi0uvFjdBtXF933fjOGlWt1Xzkkk+pMY1TRVl8/YVuOzm2\nYNwCXvBMXGHZRWql7t9luLS8lQosSkN4/arH0z2WE/njHqaE8tfj0yfQMvgH\nMP2c69c4qVms/gC5A1DD/cLsbL57C4i5nruukBLDOyQu3sryU59SQ4EzpPGZ\ndsZtKqNQOmStxp0TnmtCBKU+9/KHMsIVxZ1fowcX5F3vg5ngTfe2o09hAE0I\nmfMMyJydvuyFHg/C2IFzr71pAfZrw2MEbreas8Ma8GL1ORjxfIW+Z/8j8BUx\ni+ORvR4PVsi8O143nN6gP1lTVJpaOVDi88QnSzE8LvmuQ5/xk0oXJF5HrbHR\nRlcFzAQpVqDbDO4BtoAwmEOvOtmI/l1XbrswZ6AHGLXibkprTcC2Y31E/K5C\nrUNnrYafdcaUqy4KNGVy6xy3TIlQ/ifkJDNUiqhM8+IHd/Z9ooDxoN4pnk2K\nkATd4BKUYCFlrcrOAyZ5yeGlsw8sLDTZvMw2q4Nai14xWHSvTAjaklM1zSU4\nOkSJf9aWRcb83pAphXahMpfrZlzQl7PjY4JwMRqPvbl0Ng5naY0wWIeHVd1a\nZFON\r\n=3A4d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZ/WJvUP0M/vHVGiLZ/QrCrgomNZ2NXIQK3jfYmED0oAiEAkH7pvNaWCq9JAHg+EoSBNmhw+v4kVAbMAMVj2/C0Gr0="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.0.6_1587405729449_0.43833535535625523"},"_hasShrinkwrap":false},"1.1.0":{"name":"expo-next-react-navigation","version":"1.1.0","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.2","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.0","dist":{"shasum":"a5b4e3fb41f597372b08bf14cb7f875c6f7261bc","integrity":"sha512-dKMfzoeCPqraAkp7Ik12ZYg5rCS6gRFxpE5AcE6/D4wr4AU3JILV4DFJElYr8hchI+F5pyjzPAYmiMEXzCbosg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.0.tgz","fileCount":46,"unpackedSize":34981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeneOxCRA9TVsSAnZWagAAcmQP/RFxffU6CS9PspHMoh/2\n9PLH9E2Gnx5P26OJdVvVKfPtlLC2527QAs4bkAnrydBARoQ/lHUKAGGM08tU\n0Pd6X6pclFJJ2RNnzMYw7RcpORZB69ocOElaI4p1+w8guaxkp8wLt4umhpz7\nSfDPPZVcbZbeQ7UvWXWzd7sTKUQJeGdwoZq0120PwNfkI8Awqel5hu6MIM/k\nUp1RWPzhiBLfnSi17evnqSeUf2R2h4NEepTnifdS2a7ZKwKqQvlNjlc47bpW\nHU80qCFHFgTqAt9BfOZeZZx//tBfD4kjYM/hD5uGALe3sliQ+T9cRw+bCTfK\nMUvOtFbdG6+7ydrCchjhGZVBRKJ2w8r5t1tf3cAsOSUR2/eVMR4RraMDctJD\nF6O5w+OIOzX5cXIMhEoiVcX7u/JTVZZcGoo/Sb03VxpbK6VTRg44077yqmh5\nrTTGh5jGAM20dhRQWOPQO10pvOw5yjqh9w+G7iiiUbqsx8cZ8Zll61UyfKLN\npsdWyh/mAVmysEZmVGdpAMsfLv4xaNIpG6KJfVCRDOWBs26VKWnxrpVyFqPm\nGFO8yF3+DWBp3wnkVZLdkz6H0lVxbmpjoL8SuAdPORCUJb6kYRVO2DUZ2Qkm\nWDEo+Ew3Q/dIFD5w6l3GcHkOre2VRKBir+dcsK36eMDOSo6lagG4GrMOVAad\nSbGD\r\n=nW/t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQ8olIyHdGF+rcaa7saYqDluqEwK2x89rA6r84tktiWgIgFWNjLP7K1TiLT6l0wa1u1WA2pGUpMfF54ZNjojZJDzk="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.0_1587405745380_0.015878936412290212"},"_hasShrinkwrap":false},"1.1.1":{"name":"expo-next-react-navigation","version":"1.1.1","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.2","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.1","dist":{"shasum":"92777009170395ab20861436337db3241abfb0c7","integrity":"sha512-9XYOS0zDv4xnRi0RBMb6IwH83+Dl+mmLiEGeU6tnplKHadgbP3z0v3lj9GZCRodlP5OH5Zw4ZrgioNRrmGYRlQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.1.tgz","fileCount":46,"unpackedSize":34981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenedkCRA9TVsSAnZWagAAgPYP/j+R9AFqtTy7hpGpk9ms\nmTvZURs5zuy519+dxUPJ8crdB168DVGgjmWOXA9N+yykkQvv395TcS8/HKDY\nsJ7UUYnBsyU+H6y/BDHQ79dxv7qAG8x5ce1qW6OivIYFUDokJeUc6JKwumYR\ng3zFe1Q8dmV8nCXz6SSFrr64rvRzOYyv6RdcGuqOPnWMY2cZ5lzOdZDJ+e5Y\nW2hMwwBYPvrS/3dSYb9onMnCUZ90Uojn17gzPWFjcwEnIxATuMoPGiqRGdw1\nZqpj+IQFoIY9/nk+zE+Uvb1qwGAd0ST6Gkcau1HcrVUbNQGE0EvM1c0skH4f\nI4/xeEMyZZzeLgEHdXAwOeOnIhCIdWsrCJosn10S0LRY8QTrBjOW2gbwlF6L\nM3o8WtuJovG/rkdQNlNbqLP595NQBMCOlAtdv00g3GqFHBwJOoGUdLTearvf\nhOcYSRXg0+W5kTXELQVz7vxf1jwBLYKkpjTgGLrmmIEw7OKap6FYZ6nFiLq9\nkx9I8P9nEb36uElrJ2oQLu80hJwWVY0AlbBGE/hBy+IpzeMYBBA6XBF6r/Or\nCTggSHHapUcZgk+UCcd5ZCh19kqcOaxJKpPh4/illztKkptT4ZJgSkmvz7+7\ncJN89nmViJOYxwHv1HZpgEMBLxuIPKybGDv7R8r+0e+02UpG8A1Tt+EIqfkM\npNIR\r\n=SJnW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEWHAeTAqrviFx3i5ey4Rn6l/jLdqSZV9yurHHPekJtgIhAPQwL2fiJERRugOa+Gyd+y47CibcHsGkIgO9scfIe0iq"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.1_1587406692259_0.6756952953465283"},"_hasShrinkwrap":false},"1.1.2":{"name":"expo-next-react-navigation","version":"1.1.2","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.2","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.2","dist":{"shasum":"a4f7835181db3c8f5bc38c9cec1cf45b88f818e5","integrity":"sha512-JM982V4HFcwxW/zaIVJPbO8Z7pLvp3TnJvaF2wPccJqJWzSR/Z2v7To0JvsaW8yWQalYg9IvlIuyNTs36v9STw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.2.tgz","fileCount":46,"unpackedSize":34931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJene9JCRA9TVsSAnZWagAAcrYP+wf1p78HIX9Co0tYr3Ax\nt0SwUoMTAhdNsPzMDld7MjUlA50igsXztxKO44caWAgAQiyWBvkTBE4Bxxjy\nBtlYyr8IwQbkWa+Yb7wXocvLC5kPhWKUSmWU8txcSXSwbjs9OxUV0NGPeFpj\nO9OQBiXfTyccMwJ9NbK+HINEUszxk/bn2Wf400evcmiGgUMHjUV6q/ZkqYan\nzKhFHnCFExwrem8o9W+TxpXJGFuWAw4hd1ORoo5xgbPcAKt6r71wrlXo4Q6v\nXVxmUjRFq9uo1TdDK9OtdIeOA8EcZKsdTNqj5Wc64lzYr+QVzMtVvrFXdTUn\nr4uozP5GMM1FraAEpk52gXzzNmlxXt7wX1R+Dqf5ycT6DGqoLVz/ZPFiMI1h\nbHDsTzizr2gxbro1Ex1mJMPxtGmmUBcefJp1ug2V+MDsk2HeZ6W9qVy6vE3V\nG4sRDgzCJ8Bcio1mppD+rjg0u3mOLW6JJGrqetZnSV1NQaF9VPvwj/FeckRH\n5fU6KmPhrauU8TYmFKlJcTvouhkzJPp/Nv46ct8029F1o9wSfLGxxeLtp0rg\nB9UH0DEc+C7rto0H7uAawC+8y7FgYcuRVp2t2rASNdM2N0AoQ14k7Plr1p3n\nu397Ns4cNubvxH8xq0oJnA0iDgK94KbnghRqhQ2qM84nZBm2qOShNiqJbAbY\nui/8\r\n=WH4m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQEfxb1pEUxncNYEiXOdov/IsVqxAoCjqass7NAL2NtwIgWTMnukDd7REvmIQB2KjLDn0IxDMpULaGdHHbO2Yr9iY="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.2_1587408713027_0.2115654243905305"},"_hasShrinkwrap":false},"1.1.3":{"name":"expo-next-react-navigation","version":"1.1.3","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.2","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.3","dist":{"shasum":"7bb9562d74f42290fb3b05456c2850f76528fbf7","integrity":"sha512-kacDNtejCqNPf4fgh83HoGoa0U9NFk+smx2u+wsJr7k14JVeVa4pc/2+Lp5xHck/jb71Ruoz1anmLdMIg91CaA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.3.tgz","fileCount":46,"unpackedSize":34931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenfA9CRA9TVsSAnZWagAAlSgP/3YZyOO8padOh2sqZolA\niy6g88pa7i/0woGESo0lq9jpq8ECjZmvOczbIClkbSYTMrzOJHgf45xsEfR0\n+Uqs4MOvSuwyUvbrNAitmTDPjh2WjQ8ymXVUinpoQE61kLgsLkYtpIUQPh+s\nAuExV2fMxAJz184NOc/u6uXiAtEa7KlckbURY7NHpkVNScQiwp1HfjiEgr3C\ni/Fd7M6a4q2JLITl472XHoHNr2hUjd70QyO3Z304G+mckig+FMHGm0+WBul2\nkQrB6JkxXvIflo8y5MFMCgmlDMMzaGyOnDo/vjVgbSMh/qCiS15O7cUI4F9o\ndWlcoGxB3gZbNs1W4o5xGuTs8mQhnOmdlTz8KX7+QD+g2KB6fgppbnSJNDMh\ninIVQr08y1sNrP6y2mvja4+V2tFc+GmsjsVKONY/CngziejIC1UCNAh1swcP\nA8O1PYm2kJZNMPu/uW7t9P/eKigUQual99R5eDVtEeX/ZTzskInLZxLo7wFv\nmNpsRwsaGtWq59dzK9oQJHytaFRomCCbAIT3UFe5zo5gxZGYzzTH8zNXfxy9\nGGTlFWXgSRg1BwJawJ97VVHdV20Eqhu6BKlXoCrc353vCS4IcPs6gJlh2wdy\nvJ6nu4h6ATsNJ9PScAE2DfHMbq2aZUC4VVfr4JQIeZtJ0dju1WFe6GfJlg6/\nZwLq\r\n=Qa4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVgflWqTcnlFYG078saU2b3i7/xzvi1ZFc83oQTFyDTAiEA2xWaD6Rr9PJVqM7hX29MChWJ2NPCzRtpspcak5JxRMg="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.3_1587408954781_0.9895863205299276"},"_hasShrinkwrap":false},"1.1.4":{"name":"expo-next-react-navigation","version":"1.1.4","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.3","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.4","dist":{"shasum":"f1ffafd2c8b8079b8719aac25e024ed3d084ca80","integrity":"sha512-CvQITuKLE76XFG5j/lCTxpz/IMugzTg11Ei+qSIJIm9N4HNE0y7lsE4eCvL5CK/KZjdnzRmjdeY5hYQeLhyavw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.4.tgz","fileCount":46,"unpackedSize":35101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2SXCRA9TVsSAnZWagAA7pMP/1dV1g/P8aUJUhpT/VDC\nWNy6R3cjm9L3ZCa159ppCoYLosNOJzJGfInXdj7r546Htdm8iIZrHBKWB44n\nlRUZ4lFh3QEjwCIVYzhb3oJANu8br9vJcK+iuhplEFyN5RYqcLKEccJapW7D\nL/n2tn05XBTsi0hauh+RHcKruQlWGmvIyfK1oOBdxO01dySahqhSXKe54QOf\nNXRa7Cl+9KpgUVLo78YsNygJ3YO1DeLjpwOdbg8oSdvcIi2KNxD8JQuCBwQl\nICZ43Jbgy3FXaJBNrbpWBr3SzqR84uKn2evVhrj1cUNG7vxal1uP8IkKSRBn\nsnTb2f/l6QuCgP4A5DYE46I5HZwMmku9yUKmNV9dhSy7TK6j09up/Z+MR4K3\nIfZW7V2ZiYaiUXC/A46xoho8gK14rpatWRmQnwkoJDfARbGekWJDbnkCDYNr\nQvRBcMa+lPx7cbDfn6Ki+iq9KDQdqCGKZok+6FMDVGHW38FbVgG6/PmMlrAn\n6Lagq16JYR/O1/Ro8ayQh20+wn0QGpV+2BLMQCGuoNl1xFaC1bfSmNgRkkyA\np4rFwlVuVgFJLfz9qelIaHW4lHelYo5HicKDK+gcvOzTKhsLYQhTmOS81y0g\nIh2Aspm+szhg4TXQI4NkDjUnq6744pGWyFLL72i7dv4Wbgy+k0KUqOJT+FqK\nEWrd\r\n=DaWj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClzanfIxIhjWysuTU8TL53n6wthdrTpPrZhwg5/sp5HwIhAI4xJd9atJbYKuu3z63tYJPG2Rhyp1foTMSfMhNFqqi5"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.4_1587504279230_0.9977367183283026"},"_hasShrinkwrap":false},"1.1.5":{"name":"expo-next-react-navigation","version":"1.1.5","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.3","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.5","dist":{"shasum":"2cd60a0505a9d0facd3c4d2201701f7569af18ce","integrity":"sha512-Q5VjDF4fH9uILIg6xbab28QfL0AvIL5B5E1F7Au/qIUcJLw2/+TKUgZRopRzsD1o0d3cSgcMSTzrODq1ZGNavg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.5.tgz","fileCount":46,"unpackedSize":35101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2WUCRA9TVsSAnZWagAAR5MP/jYzHCl3sVTDrRnQA0Dx\nNoignmsRku5iduZdqujoTOkkCjOjMPPlR0hckLtp7hP/0aoHdcAe8NC0fvKG\nXqMcj21AGbbE/x6qdghqlj/CC18t9afCkdZN59O61oVC2uAroCVPIrqoXv4+\nXsyI4LISrwDOiGmE1NTvZXItQ4bjW2/7DgD4PFSIyR4ILoxXWKSL0FmUK5wL\nLCJPgYUTWUN7lG9eT3wTyxvs9X/YUWMkxrLQkjg1maVD3bk9dUgFVXBzCLTn\n5jXBmfo0Lz41EPgnmlsYSnztp+ZHTkoFwbX1i7+18ubioUnI+XVT3mXweCmN\n+dzfrfavfjjxoUldmBLuBoZOnbE82uizSpsEcnZNMREBzeGKf3mFN0+kxIGG\nuEE4d1t4CY9v0A2ALj/fMcD6O/GBnFfPPCI/fNz5EgfXVwNpBxz+DCoh9v6X\nb6T0eShykd+eA8/YFS0YLuBAyyvJC9xSRFTolKWauXr0kkWD/j78yjcQ85st\nxA9mC83LIcoQQe6jqmwClcuhSN2VQFAtmDxbnGpjmz5Hx+CznQ6rUsbxQhMs\nhtCeMJTYPh6xb9h+6rD48vl26Wh4rZp+IG9KNfgBqce220+lJLNp22J5m+fD\n80Z3bDfXrnne/uHKLDXz4A9taDDQrqM47XbhyHwTw4hmqZ2vvohA9EoaBE1j\nZGTF\r\n=KF+T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkvRUaQu7DzLCN+47mpXmIZwO6Nq6Kdro2tOOdMbvQFAiEA6fLIAnxX+Rtp6BU2PEBmdK8qgamkO/uj7HE9U2kGgAk="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.5_1587504531587_0.6062571749241661"},"_hasShrinkwrap":false},"1.1.6":{"name":"expo-next-react-navigation","version":"1.1.6","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.149","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.5","lodash":"^4.17.15","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.6","dist":{"shasum":"c5074fdb7febab428e7d0e560315ece07fb7145e","integrity":"sha512-XYRzwaC1dv2hI9PcEpzgV/uX1SR0Dz7iStkP0L6ZsNvRS0wRzAMcrRX+iUi0DExKeUjrIaqzVIeSAmhm0ADyJQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.6.tgz","fileCount":46,"unpackedSize":37472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojDvCRA9TVsSAnZWagAALCYP/1gZyDHpzChF9C4jLH8A\n1VRCB8oE8orFWE8rvDUX/lh6BHNr1ml1cFYP1VyG0fBT4P5BR8qC60INsmBT\nVx/7cirVyESfW5s767xrmA2Z0Yo/DNc2LRzlgah2Bh45cPenSt6GQBu9Q+SM\nXvrOftwZAziDpNzZ3zl8PouAErdv23RnkGN6AuLSK9NmY+pqQzNMvs5GdCIO\ni8RoHh8n5ecaPUQxeC63XYxNcV5HSH/QH5+8xTXNCk4w9j2Cvjw99vwxq0vD\nDsPk0CExXlbKh9o7+KDP5chk7BaMGbevZmQHpu2X0o39OaUM5zC0rsXJUUwu\nvuqEm0acuMFI8MKyVMksPLeUuuoOvDWfVs3bAzng0R/dIX+zuewfucw1BCwE\n2RXx6VgvKaqGMeD1r+lLs0qPfHBLuSr8TmJTeJDVzI7TCQpc6W5G+JNG8vZ8\n3q7TOsSGIOjlOdj4PIHlZ2gF5BphsjbUtpc6QDd+kisY4yHUtf7arJvu2ptK\nDkmlcBk7iViXnluItIy+MZp7M8R/ujK23w0Bd/HkmRJIR5fLh5w0nArhlZs5\nGk95CR5ASmrmxM/6IzUiZ5CvQaNICTWGB/ibXcu7Un3Kj4HgnPKBFqmaP5rV\nWfhW4Ziq8NhVA+ZYyKF2XbpnAu6qfgVpBmmKC9JaWCeHg5uYcJvM1rQJR6w3\nLrMo\r\n=PwES\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGXLUvDEq0U34GLQ8gMBhik0X0mLT1bS5Ia/A2vqQ4RAIgK37iJQ3aoe6HX7kj+41TwkVgbKhRPHevkBJtoifRhIU="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.6_1587687663107_0.37569489712979753"},"_hasShrinkwrap":false},"1.1.7":{"name":"expo-next-react-navigation","version":"1.1.7","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.7","lodash.get":"^4.4.2","next":"^9.1.5"},"_id":"expo-next-react-navigation@1.1.7","dist":{"shasum":"45c19293da74d02ee3f28e126af3bf7e8fd057e9","integrity":"sha512-ct+KRah8dBjiPskI8agpgzI/7TmXHzm554Dja85kvwqA6NwYO2FkxcjrvKoOIo55L/QFtfwhrACQl+aokyxUvQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.7.tgz","fileCount":46,"unpackedSize":39995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhPrPCRA9TVsSAnZWagAAdCUP/iCdabTwl2JukkBLXewo\ngeoO69OEl3WjDGvjWKAudk7k7RxXoqxarLe4XjGd3o7ZTRRx1v72rWA06MhR\nqqqDFRTMSELelfPK+f2yEe2PV1/mllJpEYjF5p+MsTX96MbilEzJPqQ9QJky\nS17mniNI/73WGDmxRa7lE801bRNKk0bfGTONblt/b40lb+1fBmc/gVJEKUWp\nUbbZ/uFUV7t6JaQwTbo4GfxTcKnCUHZZ91lN8GkjlAe5HLTiqt84KEc51kJp\n8sJRtyR+5MzayrJGCtn8PsoY5s7e7wyALJyamuRMuJMPSlwNXoaHTNV+lTQk\n8hE8kNHcpRNqPLAJOCp8JenZfjCT5vXNXWjpV5rntActK0coaRVx5cvp6ME5\nQmkN3bthAevcVvILQPA8u3S3gANzZN196+bRIJGWW+mi/cWZdwwLFlkQcolM\n7FpJgK2kl/rSpItpGVmdKWCz039cZCjVvaQRqAPG7vUspoByZF15e5Lk2lwn\n0RfgWVl56ruz/UxJU7HsH7rrAUikMMgS0Z99OYW8V7Wwo4FCjdeuTBR0jEb+\n3o257piUedpesI6WlkEP9p+LJE+RQUcibFFVr8XfWtoPr2MtkglTSvXTtJUY\nlG/YvXup4pwimoyb9u3YMS7DbFjTWXHDOTCUnWUVQhVm6lxyvGDFqdrcET4H\noliA\r\n=LpWL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBA2fElcZiplYwQRYcNMpTqRiac2mIOWG3CDXZl5O0TXAiEA91g2ENX01O2Ztni3s6h+bpW8wDj+gSDuxV0yqkJRpVM="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.7_1602550479116_0.5023200972347395"},"_hasShrinkwrap":false},"1.1.8":{"name":"expo-next-react-navigation","version":"1.1.8","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.7","lodash.get":"^4.4.2","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.8","dist":{"shasum":"f7796381f63afbc1fe0a8b08b2d084b6502c580e","integrity":"sha512-9P3mds+eIeayiCGa9cyQifbf6YlwvZ8HvCus+PQ0tX1u9fo3C7wJeRS4y3JF7gMLnDJm/VaNeuHqFlKlOtvAsQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.8.tgz","fileCount":46,"unpackedSize":39995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhPs4CRA9TVsSAnZWagAAE2sP/0IkQxQya7fHkRwGlnLE\nSzgv7N1ItXiNavcoeS0qmr+1vW8KxffRgQx+3LWtnVAvwNOLu1ecC5TCwazL\nLWvgXkCxJBCgFh4ASFxOSWJzfUT1dONTWVV+Wa12azKEWD7E6Au2kVB8g7Ce\nyMFHAIqsmdmBgDqUjuPpsK7JoT6st+S0+VBicGf54lxmm5IodiwZCYy6adr8\nUEHTOPAkCToAVW8XlKEIxano5l4DHOyLimVgjJj5kiQV1+/sx23xmWqdZ7NN\n6Idq1SyEgLrgf0IfstkLxLSgiALPpODpYQpuUrL1iGREjbp61upj7SmtMFrx\nJpch+6lWiMSBMFNjaH6pYUlmL9tHUNyKeQkppMSNTrcFS65ptXpPnodSrjqS\nS0OJh4Jc2miK59C3bxOpsmM6XwD8t6pyPNjnaUbgE3ZdUJISuEuSJU6d3QzI\nhMBKyYeCTNeX1CjD/uhvhzhLNTI9lOycxvRINRO+qPOQ+fCvJdUSlw/Jil9t\npqEG2xWL89bPPxC6Ebcnc9Obe2jhyP6QiIFkpxMqdeeFt8/HTUBE2nh2JYCA\nuc7v3mZdhpqonhiU78JkaGRB21Kp3FDx11kQ4gT/6v39QyFOFxck/oQPTgpI\n0xZdeKtWSvGm4Gf4ruZwf7OCMFVVRM7BVgSL9RM9KGPfjcySldHRhhTl8P9z\nUYzH\r\n=n9Xg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/PoQvGxPBA1Grg+wcG+25XV+xFq2Vr5W/1nLlNt2rdAiBg0wtVxEtrhAwBvos0hYcTSu+nNJPwSBCwe900lQZdwA=="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.8_1602550583675_0.5502915047217856"},"_hasShrinkwrap":false},"1.1.9":{"name":"expo-next-react-navigation","version":"1.1.9","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.8","lodash.get":"^4.4.2","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.9","dist":{"shasum":"9b8d1463d22b702b0b26fc740dc9817af6e100f3","integrity":"sha512-U6yqbm2u3Bo5T+E6zKN24ZcgzkdEKS0HW60gEoRfVHgVtd7MLbiWwEDiAsRajRTiXl2LuUju4dJeMNL5GXz0Mw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.9.tgz","fileCount":46,"unpackedSize":39995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhP2zCRA9TVsSAnZWagAANs8P/AgAjCF4Pdse9ZnTBDnG\ne/KeMjoHpDfaDW1oZaM9MGuTjUzPhkbXPW5WigxRp9O72qwP0r4BNVVe6rDH\np6SmLX8D2rXLTVu2svgL2UOgeXTgFSXdDyq8EPZkHOMIg0Wz9RcwGAx4r3JV\nbV4xDlPWnpCwDlcNVGxr/tNijb/FoxZNKScotUR4rzHP804ftVBLbDdu+Zn1\n2VLC+vcze3AQOF7QDclA0IBKE9RkJFezj3W7tUXVu9hTKKdrgO+z9m4lf1GG\n5NaaERXrcrSJokrszXtZIvtUKsCiAjxDph1gZJm+5+7WwWMZRAVHSpclxldJ\nD7UfXvaBSg0UIlv7ujASZ8PyAX2cqcgkJk4WBVJPdtoQizvMwlBYNX1I+aES\nq09ZsEa7xNtVaJHuqZl5v+BbsJW2/qxGb2TTk18hu8R9x6roFRk4u/GE7Y0M\nkFnGfgXZCJjPLGrRHb1tZHHY8Qp6LQ9dcXBqcaiKehtglpUgUaPCupOMYhco\nn6Mjqc+jaWOkR53GpukSrqHgHSTAt8ppB7YPKA7cWJ44DnlF/ZAgzhHl0D2D\ncQjptMBw0Klfiylo0M9XblDfv/Sgel9kQxSfRsudfSzSPIHawlomMm0AU+SU\nl7iTSr88Ru8Dw6ubN96TjFWiQ/xK/oCJ+zBY0X7/6ZsGFs5VSGrIJTkhsaho\nNeQ3\r\n=hlel\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYD6SIc9oO2eGUs/fK1xPp56xOydpoWepSEmLrSMlUxAiEA9s7jUUqiu/tDTkqL/kxllggS+lVEJ0Kvk5Fh1+HODsY="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.9_1602551218594_0.5555371886871343"},"_hasShrinkwrap":false},"1.1.10":{"name":"expo-next-react-navigation","version":"1.1.10","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.9","lodash.get":"^4.4.2","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.10","dist":{"shasum":"775657f28e9033524a55f777a1fbc5926a14b3f7","integrity":"sha512-uPReRKdLskoMZGmc38/kitKeEqCdxvOXHyHnr6jgcSFEOLM/Cp62YbjmssGfK+av/jcP/7z6Y3kmHNV8aXeTQA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.10.tgz","fileCount":46,"unpackedSize":39996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhP9/CRA9TVsSAnZWagAAHp0P/3HQUfhIEk8RSjZ7iTrj\nM8Zy5jFyVovObGmRBI825O46aCyumRgxKp6DNcEtgGpaN/Wwt78X8J41KKZe\nk5taGcRFUEpiECEdxU8N5g0M0cExbvOIj3ZSLBAoRYWuNejBoMRsZt2p9ESq\no8EyMyiHO9GzYxeQ66GpqkO0zfav62gHoO3ZrpaiEzcfYTguuDTXaBJoEGou\nEPoHIrYYIs0QDI3SXWRkr6ZrlsLcuO3vsP5hTEYmb77qGXga9tFqBo3dKcio\ndJG7wqfJKcsu/a7gjyQ9vG6zGGGV4TNjRg4S2Ybu6Dtk1THSelUyT3l/zNDU\nzu2hqPr26cedO1yDwYFgvyvLq57xdZVtdiwwwzC3vS0yxu3ESYJjF9LhET4V\nn7vHgJX6rrclF+HeB2GTcII/e8Ep3wPbgmh+R14d1TkhmHcf7CTyQjdDY36c\njRazaceT+RgAAAtfz6Vh2CLWV7seBrY0SSLjErWHfc8TKX9uVAWMCsMyHluo\nNFAwmOZn4XU37Z2C2IMOxitKM82QZOypSBYNi7R5oomyMpu1Kr1EyrxUHO1S\ndXLow3wtUbufkTEvvgmOIQG7XHATzfZyhnJJF1TJ5Wnh+pk/FVWvjH1wUulZ\nxSu+jMVKGyUNgiLTQjR/qSTs3d0LtAOWTYivfWZmUJw0p7dS5xeGCJ4GOQsx\nGtQH\r\n=91RD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLuHp4wh0sDpPctPP9TAUGH0ntYfiCQngD7WMBtffhhAIgNNmX1ptH66c4IlIz5wlKWYXqgqHYFS+ItFIbLzehYEk="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.10_1602551678562_0.8360127140951858"},"_hasShrinkwrap":false},"1.1.11":{"name":"expo-next-react-navigation","version":"1.1.11","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.9","lodash.get":"^4.4.2","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.11","dist":{"shasum":"a7254a5eda304686d8f7f6d4004b769c6998f6fe","integrity":"sha512-ADYv2Ejp9LEZm5KiemafKLHjdjOncKjgVkXdL4Ah7Fsv6AHHRPHo5ogQf/Dqe7z3JJNKEp5womrKmkKEadIBeA==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.11.tgz","fileCount":46,"unpackedSize":39998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhP+4CRA9TVsSAnZWagAA6bEP/04+a/AowKZjptqOPmyU\nelcO0QSif3ANDa3WD8kemvxoTR+UAYd07lt1iix8cpbbE3FBjgjVSh3ER/LV\nn5SGwz/lsgHXmJ0VyJmizPVHV+iMs2905QIdtmBbHCO+2M0dHqkotYfxokbR\naTpZnichu3fyxBvGdlxXRznRYZwTKl3W00wnwvkauWUPqiiG7j/Fb7Q7Y7s6\n+5tCU6cbCgrroBTnBCzceCE1Bg7zi+ojry1wcB3TR9XM1GQ3UT6MU4OEgEj9\nQBIs+yTe2Rxsmf8SynccPiF+V0ceqB6jylvxL1KD870Ebqp+BMJ+xnWqEdnc\nPLPAbk87/QMGd9kxfmD3jFVaO+u6wO+lG4AW+OCKEhbT4l+qP5CZYXs94LBS\nlL7ZUfQd64d1hDZQTLS1/wF+Z0upgBmHLrdoLa+/LJZNAZdFkYoULbMIvLHA\n7GtSbBTE7T8HwZeB2OUnd+zMK9MkUNpMiilfDqanKNCly6aDo4zqrR5ocqNh\nEHok7PQe9C2n7EfssUu7E8c+opn/r5/gM6yUOCvoN+xozUWE4g3mvZ+4TAKr\nhiskBqqfVX8h/kAfo4enkhvgbUuX5pDNq/QwS8hixAzZ7UvM7QlPFMVtfbBX\nSzqgEzVpZl+aPxANf+vz+lSnFrL2pIu0rRbr3ZBlIeOy4yayvGTpcUnovMAS\nID7n\r\n=4E2C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyOqG8tMJci0WKepSgVoGk8BOHCBIuJrK0hJ2nDM4YwwIhANzTN0Mzn4P62HckJ1jhT9L3zyPJqe2RJsA1JBzTLkO+"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.11_1602551736277_0.26001942679859336"},"_hasShrinkwrap":false},"1.1.12":{"name":"expo-next-react-navigation","version":"1.1.12","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.9","lodash.get":"^4.4.2","next":"^9.1.5"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.12","dist":{"shasum":"43e83ef222cfd313ed4eabe44a36ca19db181721","integrity":"sha512-+7Soc0R3DUdrhLiKstvNFja5GkVtdztP8E3okqIUt6c4kkSXQaIIkjLC/jD+niW4zW9D+AtBf2xiPUkgmKAm+Q==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.12.tgz","fileCount":46,"unpackedSize":40000,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhP/ECRA9TVsSAnZWagAAzJoP/RLkp0USKd2X8BDGNu2n\nUe6Ljg0b/zy0OnO+T01fkVk5zYZDULzNtS9hNI8rY8B48A0/JcMqTYJ4sRLY\nppbmXmJb0EkmpTTe9vGfcQ/Fc3m0F/YLhHAMXF0hL2fdXGAVCClkv33J/nHG\nLpTMmUffQBXrxPRZtqTwc3c5KcS+TyT12fYzAsRyw0bnPIl13dvjKW57LvTL\nCqHok3i9B4rqGMK7o+ZPfqEhDJye+8ypy3v1TdBuBwpIpgwln0IBgoMWqKpU\nYKlBIlChZHKp4X4ZQCqQGssOrYEpreVp8X7I5lpF7sLMsibpw5ST5DyH8Q/4\nb+nzmr6PFyDsEIRWK1OdUadFnjS6LiPqzaTwmbKZ46nHOwx9hbLhUL7eVOup\nONxu8le5yz8D131V089Xdcp9ed1017fvAb1EYnDUteMm51LO+HH0NM4LWONy\n33zznPhV3Cxp4O9hHQYTfsgqsS2j0cbcBZn9j8J/g+KiZUbJzDLDy0746GD3\n+jijRqwoDlQOxl1SnybBoG4Amw9+iOBCp3F+saiLxhX6Zp+jEL3YZB1Z25ZK\nUm64cPMBt5r6oq5+mlXfhLUhvZmFEts4/495mOObrbzRrK4yCTIwE1gywkID\nVqLdtvX0qBQilyTYinHCcvWGd6SbUhE3Tum7QBWMBuj9Z0N8nrolJFp8HjhP\nvGj2\r\n=4q6W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCe0pldeycibpj4PBRKP44m4/B5+iOxAd0F9Z+RKve9uwIgFOPin4HYR1hskMT2pO/82muOYwooQCwsjrkG7c4symQ="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.12_1602551747843_0.6036511023126743"},"_hasShrinkwrap":false},"1.1.13":{"name":"expo-next-react-navigation","version":"1.1.13","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","next":"^9.5.5","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.10","lodash.get":"^4.4.2"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: dictionary, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.13","dist":{"shasum":"823f8a4b8ae2c7478797bf414a0c206675b61b83","integrity":"sha512-pi8x7iq++UUbT8BxKdPMJqeQpgiUXHzgR496bFzrxWyA8I8Y/jcNoaH8pUF6aCGb31O1h/SwuIFgOSrR228Ohw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.13.tgz","fileCount":46,"unpackedSize":41060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhcKwCRA9TVsSAnZWagAAX2oP/2PmxP3grtJ0fgcr7EuE\n0VjCPkcbM5UVloD0qWr6NoNmq5ut3V3bTcnYs7V/R4cOscaxWL4Yyt3Ym1+P\nBgENSp3k3BX0HGQSR14vGpRsPdQU/tq2+YM1uNdhMq40/hp9X7U4HsDK35F1\np7sV4CLmQKRImAlXA0X0BUyKdkBsVeWLXKt4Rz8U7iszdEC6zbNvWis5FWw/\nDI4SiDTq+fvnRe6SEUCyiLlgCZrE6OT+FgWE6FWT4pn2Dh5UmG+JgFo1jaqT\nVOQ+3BdxysF4YNzNrQILb75vr8N0LZejTJ+u5mVfyQ8j/4VZPw2UWfVJl+V/\nEaonIPP15UeKyHRBKwWKfClMKU+UeaHUI+kR7CZfvx+4rAmEkX99uOVxsGh2\n1eSb5iJ0xm01FljD+3vXDmxXIfLD6sin1CqtGqt2P8xHyXGoKTe3GnbpQd/s\nJY/Q2cB+BKiik+A8OQtEfsP8ubm72ihH2H3m2cEAzpwxFHAthtFx/cfNHsW8\ndFXfMlT2I9bcX5O8a/RWCOZg60Aw8GnxRhw3s7Qlu2uKxq0cZAOv1XVGDMWT\nJPzA9SMbUznBvJWRVX0Aiiu4oSOyVo3nyZBej1OV1BdZq5YIHBA3SKAybkP1\nnDMJwryH3V13eXxvM1eg2ThDPjXeyE4B7JdbsAAYH/EEhAQf4PXRY1hO9AkO\nRj9x\r\n=hTig\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCW9BK9XcZQqaAlRu5JojluHKHbWJOBTyqM+F9wDCu1VwIhANIrVbOyIKMf8soJb90YndmymgWbSnM5UM+G2UrmKOfU"}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.13_1602601648497_0.1251320470073598"},"_hasShrinkwrap":false},"1.1.14":{"name":"expo-next-react-navigation","version":"1.1.14","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","next":"^9.5.5","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.10","lodash.get":"^4.4.2"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigation, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: A dictionary with the follwing options:\n\n```ts\ntype Web = {\n /**\n * Alternative path to override routeName on web.\n */\n path?: string\n /**\n * A custom URL ending to show in the browser address bar instead of the `web.path` or `routeName`.\n *\n * Should start with `/`.\n */\n as?: string\n /**\n * Prefetch the page in the background. Defaults to `true`\n */\n prefetch?: boolean\n /**\n * Scroll to the top of the page after a navigation. Defaults to `true`\n *\n */\n scroll?: boolean\n /**\n * Replace the current history state instead of adding a new url into the stack. Defaults to `false`\n */\n replace?: boolean\n /**\n * Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. Defaults to false\n */\n shallow?: boolean\n}\n```\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@1.1.14","dist":{"shasum":"ab5b788958590c7ff04cb29a1bc425267b0755b5","integrity":"sha512-XI84WtjIS92OVdcOBp8tAI6JODrffJt86Bux8ngAOHqgUBPLKUMrDB6hZrKzV4qtCotses1ZKNvEtGe5ZOwXqw==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.1.14.tgz","fileCount":46,"unpackedSize":41756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhcOMCRA9TVsSAnZWagAALwoP/i31YQwXF4G6BZ57Cyqj\noP+beoRGUjWtsSsDeznxJdjQ6+wNK+xHHiTFEs1yOw0ocKfPl5lu0o6L+W7A\niozlJXakEl22soJ0Z/Zi2hxpChaJYl4r2bA9EYRUfwoOmV3hqpFw1Jnagpb4\nNCIR//yih6ERzITO1YWYz7XYWUInkExaUy+unuvgF8QET7ZVNuB2DjPlx6pl\ndKxRu1hb+hxlQPmKXbHj/qFJGZkmIudP1kvpqrtl4kDeI9XWFaLjulWsyYSU\nhmbuLcqU5KjhCFj5E+C+mxZGTjkzEpdSv+nemYaxHaMgUuOF+bb1CvlKOlkV\nOvG09MxRIhhh1c5udAs/XGIQwZcZK2hW/38t8/3KJE9hB9fYW3O4V3RUpx9g\naEj7C/mejn+i68eITOSmG0e5CJteFG7c6cNAswJ+ewJbToWZ7vFstRsHuBNM\nLusOs7cHyyxgclAE45DaWmCTDS50bZVaS4+OOcGAq600mTAWBfHDkvWnPkBc\nP9dhRKRlYimCFuN7syWlNFn5DWShEFBrZ3gTi0+ATGWqcwP+BCDomifT9TZv\ngdkz0swobZk9YMMJXMZxp1PNoGzHJtYT3gR4ai41O8IweR6ewruCSGx9psus\nRUHdFhosILq37WAIQTYY1Wz27jJ3d13P40Gf8zItbajiw1DZDGbFPG5fXVaJ\n3gl2\r\n=dvkd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDx4Qtn62EYXrt23YsjOkUiGC1wPRU55ysE8EqHXj1PnQIgPyoKZtka6XJLDIf5Y+Xx5xgaqyWE8pN3iJQ3gK9U1YY="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.1.14_1602601867733_0.8206104434513102"},"_hasShrinkwrap":false},"1.2.0":{"name":"expo-next-react-navigation","version":"1.2.0","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","next":"^9.5.5","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.11","lodash.get":"^4.4.2"},"_id":"expo-next-react-navigation@1.2.0","dist":{"shasum":"2270fb275a2c27f3ed61232a8457b588ecbb1f8f","integrity":"sha512-ao0HENG/kWgJA7fs/wjgHGqAYLjZSTj1OZCU3XhZ1X5putcZzn8U+VGo7xVy89sPnytw+irQiayQmW3xPyC+1Q==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.2.0.tgz","fileCount":46,"unpackedSize":42021,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfkgJFCRA9TVsSAnZWagAAOC0P/jWqoGD8kOz6x85y4bhJ\nFq6U9+Rbph8qdcSo1jplj6RontY/q4j03ixa0aaGZASQ7WTHkkwRu+uteOeQ\nbIYldYa6RaiS4xXUDUCbfoDtisJVUN7xMaIG76uq/EZe9ZYlAK9IG3hbGyGS\nwrlEihEaT43I+eksFruwVRsIHSv6hi9YfRMvEkcRNKY1TQVcAVKPsPzf3HTk\nNaP/o+z4rhxMRqoeXvLyA8d3AVo65XYJuYdnWNtPA1315jiUMJfK+VDpCjdO\nG8F/lF6ounrlyfAoaSosuFq0OiTvd4YxdZUIHKoJui4MBI8TQ4InMPIh7/Ba\neisp9cenyFjOn0JJDPkjWVCCnJZYFkjlcbvzXmvNuxFi5HRx+MvPP21619k3\nugWqqBR2ePMLj7SoOHMWKjJ+0neChiJznMhXvLgdMtr7KJGCs9EjOR/sz6kT\nXNZDaCyHhqgnENWJw8cMVgt1Iw1J4PCTOf71nLQA8NDfnLn4yMMpGerxWS5X\nqQj5M/n83nGJSDUFPV1wEXWydYnJZ+jRC1+YUD+7Y7sYgUvQIe+nXOrZWpxa\nBL5u5h4aRWGnq6EMDtsLFOtTc6ziVmT+szXK4TL2wP31OQjSiK58Z0mommB8\nkiYKgU6W3HnZyAui0ERk5c/buLgofiVYd7KacKoHKJN/liLoa3YZ71aNHoYz\nwkcO\r\n=1Xt/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgO3mJo9qS/VMZeEqlOAEDhIHEnACkeMFBJ7YX+d7/dQIgCFZohjRNaobeOauuPlwEi7JCxfwmvGviM4jiSMskHko="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.2.0_1603404356930_0.5634343382969715"},"_hasShrinkwrap":false},"1.2.1":{"name":"expo-next-react-navigation","version":"1.2.1","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","next":"^9.5.5","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7"},"dependencies":{"expo-navigation-core":"^0.3.12","lodash.get":"^4.4.2"},"_id":"expo-next-react-navigation@1.2.1","dist":{"shasum":"9f9dde349b742aed9b0ab72332f45f6fbd7c33a6","integrity":"sha512-IsEwVvP8O1Yjk6VDQlkQJl0k2YfDeFF3bjJAG9INwBKRhg6jTSc0Dmnthb7vm9lUoylivPlvpnDM/lM6eyDtPg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-1.2.1.tgz","fileCount":46,"unpackedSize":42111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJflv81CRA9TVsSAnZWagAAihgP/ReMKn09A3YJJhZlNwl6\nix9JI4p7x37t/w8PcdP90Q4M5s5lUDC3B2GcZ7Pl4i4kXD4AC4Yjoc/kqMo0\nZUQoxdOjkwtdRYKQ38LiYFx6tBbbchDmZp4bH4WOIY9f1NGgwsCgVlSxehEe\n1vMIQ3qk07OAYyAV+MmJMUMvy39UZj2lfR4abShAMkq6pQ66kV/JEpAs/yWj\nRL+jCV+8WVhsb3qOyQHZ5PxeXpGAratJJx76Flns5EfMuZxwt4wsSpsv2vic\noYFx7kHPS4hQt57MYN/XWrTWOyJOtAGua9FJm9S9M07xREJVURtSSsjKyfk0\nhTjC/2X8Cis97Fjp1ZIZicEdCAoMdFpg1qf095v1B9oHBgUnDA6u8NoXqvrE\nfC2MUHDH/4mJCdIbzcNGkHhilH6c8bs5jjtrVzHfSvIf8no+UuJT+4NQnWf8\n+a62hu78fjI8hs6wgu2VO2EeZxkzaE19UsugETrsYjE59lkFFti72J8V5mOi\nf2E1kFkYNTmjU++GVFEk63sXci1AP+k4AeYxRvhXc5+msBftvAd/ptnKNgzw\nqaE12KpgmaHexbzvelVU1rxx+KsLbG68kVZLAn23lyfQha69csS96dQ41J/w\nXrVj5Uvro0uU7F0vKQZej7Tuk1+j9K3h4juCYQ5mOUmmnjke4k5MjNoIetY2\nZDRA\r\n=4a5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDulhKoUSkTKjuCw1nN6bSgemoTHM+8orBBbDaws15/xAiEAk71Z+2BoGmZdJ5nBij2Gbi6M/o1HG0mg/YyMd5SJf4c="}]},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_1.2.1_1603731253355_0.027773312132761463"},"_hasShrinkwrap":false},"2.0.0":{"name":"expo-next-react-navigation","version":"2.0.0","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","next":"^10.2.3","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7","typescript":"^4.4.3"},"dependencies":{"expo-navigation-core":"^2.0.0","lodash.get":"^4.4.2"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n```sh\nyarn add expo-next-react-navigation\n```\n\nReact navigation v4 is supported up to v0.0.24.\n\n**For `react-navigation` v5:**\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withTM = require('next-transpile-modules')\nconst withPlugins = require('next-compose-plugins')\n\nmodule.exports = withPlugins(\n [\n [\n withTM,\n {\n transpileModules: ['expo-next-react-navigation'],\n },\n ],\n withFonts,\n withImages,\n [withExpo, { projectRoot: __dirname }],\n ],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigate, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n - `shallow`: Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. Defaults to false\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: A dictionary with the follwing options:\n\n```ts\ntype Web = {\n /**\n * Alternative path to override routeName on web.\n */\n path?: string\n /**\n * A custom URL ending to show in the browser address bar instead of the `web.path` or `routeName`.\n *\n * Should start with `/`.\n */\n as?: string\n /**\n * Prefetch the page in the background. Defaults to `true`\n */\n prefetch?: boolean\n /**\n * Scroll to the top of the page after a navigation. Defaults to `true`\n *\n */\n scroll?: boolean\n /**\n * Replace the current history state instead of adding a new url into the stack. Defaults to `false`\n */\n replace?: boolean\n /**\n * Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. Defaults to false\n */\n shallow?: boolean\n}\n```\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@2.0.0","dist":{"shasum":"c0a3e32620fb8b822a208582f624ad7a76fc9414","integrity":"sha512-jyznaEWRd66UJVOxU5Ceh75LTEJLSCFnpJ9mZUDjmFW1aq1n09iYmgHTi06Hxt3DF+d9ZA7FaJhr84FIHl+SMg==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-2.0.0.tgz","fileCount":46,"unpackedSize":41397,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqHer0yJO88SYuslkbuKydjRjb8RlgjLIF6yW0R/vp3AiEAxpW3zrapsmYompxys6Er79mESysFqoQc/uwWZQgjhe0="}]},"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_2.0.0_1632598465272_0.39828171714246197"},"_hasShrinkwrap":false},"2.0.1":{"name":"expo-next-react-navigation","version":"2.0.1","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","next":"^10.2.3","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7","typescript":"^4.4.3"},"dependencies":{"expo-navigation-core":"^2.0.0","lodash.get":"^4.4.2"},"readmeFilename":"README.md","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n### For `react-navigation` v6\n\n```sh\nyarn add expo-next-react-navigation\n```\n\n### For `react-navigation` v5\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n### For `react-navigation` v4\n\n```sh\nyarn add expo-next-react-navigation@0.0.25\n```\n \nReact navigation v4 is supported up to v0.0.25.\n\n\nI'm probably going to stop releasing new versions for `v4`, and `v5` will soon be upgraded to the `latest` tag. \n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\n/* eslint-disable @typescript-eslint/no-var-requires */\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withPlugins = require('next-compose-plugins')\n\nconst withTM = require('next-transpile-modules')([\n 'expo-next-react-navigation',\n // you can add other modules that need traspiling here\n])\n\nmodule.exports = withPlugins(\n [withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigate, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n - `shallow`: Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. Defaults to false\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: A dictionary with the follwing options:\n\n```ts\ntype Web = {\n /**\n * Alternative path to override routeName on web.\n */\n path?: string\n /**\n * A custom URL ending to show in the browser address bar instead of the `web.path` or `routeName`.\n *\n * Should start with `/`.\n */\n as?: string\n /**\n * Prefetch the page in the background. Defaults to `true`\n */\n prefetch?: boolean\n /**\n * Scroll to the top of the page after a navigation. Defaults to `true`\n *\n */\n scroll?: boolean\n /**\n * Replace the current history state instead of adding a new url into the stack. Defaults to `false`\n */\n replace?: boolean\n /**\n * Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. Defaults to false\n */\n shallow?: boolean\n}\n```\n- `web`: dictionary, see [`useRouting().navigate`](#navigate) docs. On `v1.0.5`+, you can also pass the `prefetch`, `replace`, and `scroll` booleans here, from the `next/link` [component](https://nextjs.org/docs/api-reference/next/link).\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n- `isText`: if false, you can set the children to be non-Text nodes. Defaults to `true`. If `true`, the children can be a string **or** a `Text` node.\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","_id":"expo-next-react-navigation@2.0.1","dist":{"shasum":"e7ff1694c29b465884843ae17fb5e3a95064734e","integrity":"sha512-rZi8ELAl4OXFBw5QM0sqEJwyng8/LyIHazo+cIEvbMTnJ8BFYegz9IVaKPlH7qxi3ZNQ5bSO9aleR+GCZBFn+g==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-2.0.1.tgz","fileCount":46,"unpackedSize":41337,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUoLH1Qbdwpynv75neuKpAZlkEMcdMz7Hqb36ZiQ4wqwIgFEd7zV4TY0f9qBVCc2T5cRBfmAYGrEb5ynOfLD3LoGc="}]},"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_2.0.1_1632598856059_0.6565049647170891"},"_hasShrinkwrap":false},"2.0.2":{"name":"expo-next-react-navigation","version":"2.0.2","description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","sideEffects":true,"main":"build/index.js","types":"build/index.d.ts","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","scripts":{"build":"expo-module build","clean":"expo-module clean","test":"expo-module test","prepare":"expo-module prepare","prepublishOnly":"expo-module prepublishOnly","expo-module":"expo-module"},"jest":{"preset":"jest-expo-enzyme"},"devDependencies":{"@types/lodash":"^4.14.162","@types/lodash.get":"^4.4.6","@types/react":"^16.9.16","@types/react-native":"^0.62.2","expo-module-scripts":"^1.1.1","jest-expo-enzyme":"^0.0.1","next":"^10.2.3","prettier":"^1.19.1","react":"^16.9.0","react-dom":"^16.9.0","react-native":"https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz","react-native-web":"^0.11.7","typescript":"^4.4.3"},"dependencies":{"expo-navigation-core":"^2.0.0","lodash.get":"^4.4.2"},"_id":"expo-next-react-navigation@2.0.2","dist":{"shasum":"90239d69540ff5a986f5c41287233d5cd1af2f07","integrity":"sha512-ic/HogBNGPkeebSwzAslGnwzZr7eZP6a76nMNbaiUSKaR2zmuhFbpa5DjKOwXMPFLOm8RmI1FdjmU7/A2EG2gQ==","tarball":"https://registry.npmjs.org/expo-next-react-navigation/-/expo-next-react-navigation-2.0.2.tgz","fileCount":46,"unpackedSize":41337,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2qe/CRA9TVsSAnZWagAAMCIP/juJQ7yesWNatExZl91Z\nJ9S02fQ0xj/17JttIJoW2HtfgJelu8n3XoDNPekiJbJkzc3FtfzSOj+omohH\n3d4dakm4+EfPiQ/RDheebZ8DnxEjB+ukz/qcdU6YEmytezxxWeuNeG1ulbHc\nQR4E+YVzYUUCIMUV33wrWpROw09YqwrFV/YUbJTzyRqwdpd4bexv9c2sLtRa\nC/aIkiaJoGq/esjvOIT9EG1eXsUe8ZhON9dASVOa3dvl1Agm/HxDjarUapi7\nrJF9nTFgPSKLjKKQLRp2/JHHw7f4Xi3qX3b+GuOcRyT1B8DXNvP7XRh3iTnX\n/S04kMuUltZbhN/4QIrZWLcs9kn/Dynu50EEgH8SddpA3GWBH5LOVEVrepbD\nVuj5CHW6r/e8WXEil22Y1IXEk4Q9CFoNDDExGq5YGMA4amv4sgYdSNWwXvRv\njoX76uCknzr7TyBXOY71L8aDDqJZ7PVloSzjedEie3s8nT8vURbZPQrBKn7I\npOR7vPWUCYzFlW+SBr9QK4byuUYBUIgJvuljpbrUP0VMuMmYcOSr9qlTGtwn\nrE9qbRQjn9MqLGn94LGR+2nR3/tubn/Vc5wmxMxvQFy6cvYzhoOd4VeKIISZ\ndwjE14C2bJrCkRRL7c+jNjHQ6UzKTl/FuE0bUQ0afnORny45R0lIS3vUBTLU\ny2or\r\n=mzj4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAHYNSbnI3YdcFkjxt4uWe/gcsgHI4xzuWhPhYKiesOcAiEAs9dDyMDdS4NYmE6Du3WESQKhgQBVhFty+F8ZV9RgcTc="}]},"_npmUser":{"name":"fernandorojo","email":"fernando@basement.social"},"directories":{},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/expo-next-react-navigation_2.0.2_1632599034996_0.5753568195856882"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-13T19:58:15.920Z","0.0.2":"2019-12-13T19:58:16.037Z","modified":"2022-05-01T22:04:11.383Z","0.0.3":"2019-12-13T20:00:59.018Z","0.0.4":"2019-12-13T21:01:59.733Z","0.0.5":"2019-12-13T21:03:16.243Z","0.0.6":"2019-12-13T23:38:21.379Z","0.0.7":"2019-12-13T23:52:43.670Z","0.0.8":"2019-12-14T00:16:59.217Z","0.0.9":"2019-12-14T00:21:22.203Z","0.0.10":"2019-12-14T00:28:16.302Z","0.0.11":"2019-12-14T00:33:25.533Z","0.0.12":"2019-12-14T01:07:19.083Z","0.0.13":"2019-12-17T00:02:10.490Z","0.0.14":"2019-12-17T00:13:18.208Z","0.0.15":"2019-12-17T00:15:46.604Z","0.0.16":"2019-12-17T00:18:19.526Z","0.0.17":"2019-12-17T00:34:51.008Z","0.0.18":"2019-12-17T00:51:20.312Z","0.0.19":"2019-12-17T01:10:40.846Z","0.0.21":"2019-12-17T19:06:43.274Z","0.0.20":"2020-01-02T21:50:21.495Z","0.0.22":"2020-01-06T21:29:02.113Z","0.0.23":"2020-01-07T18:25:35.387Z","0.0.24":"2020-01-09T01:32:16.888Z","1.0.0":"2020-03-03T21:17:55.613Z","1.0.1":"2020-03-16T15:32:16.724Z","1.0.2":"2020-03-16T15:34:11.500Z","0.0.25":"2020-03-21T22:52:24.801Z","1.0.3":"2020-03-26T02:35:25.963Z","1.0.4":"2020-04-19T15:55:15.607Z","0.0.26":"2020-04-19T16:14:03.550Z","1.0.5":"2020-04-19T16:49:04.511Z","1.0.6":"2020-04-20T18:02:09.870Z","1.1.0":"2020-04-20T18:02:25.620Z","1.1.1":"2020-04-20T18:18:12.400Z","1.1.2":"2020-04-20T18:51:53.176Z","1.1.3":"2020-04-20T18:55:54.911Z","1.1.4":"2020-04-21T21:24:39.417Z","1.1.5":"2020-04-21T21:28:51.733Z","1.1.6":"2020-04-24T00:21:03.208Z","1.1.7":"2020-10-13T00:54:39.273Z","1.1.8":"2020-10-13T00:56:23.827Z","1.1.9":"2020-10-13T01:06:58.722Z","1.1.10":"2020-10-13T01:14:38.796Z","1.1.11":"2020-10-13T01:15:36.485Z","1.1.12":"2020-10-13T01:15:48.023Z","1.1.13":"2020-10-13T15:07:28.660Z","1.1.14":"2020-10-13T15:11:07.930Z","1.2.0":"2020-10-22T22:05:57.074Z","1.2.1":"2020-10-26T16:54:13.497Z","2.0.0":"2021-09-25T19:34:25.410Z","2.0.1":"2021-09-25T19:40:56.173Z","2.0.2":"2021-09-25T19:43:55.198Z"},"maintainers":[{"name":"fernandorojo","email":"fernando@basement.social"}],"description":"Make Next.js and react-navigation play nicely together with an Expo/React Native Web app.","repository":{"type":"git","url":"https://github.com/nandorojo/expo-next-react-navigation"},"author":{"name":"Fernando Rojo"},"license":"MIT","readme":"# Expo + Next.js Router + React Navigation π₯³\n\nA set of hooks that wrap the `react-navigation` API that you're used to, and make it work with `next/router`.\n\nThis library helps me use the [Expo + Next.js integration](https://docs.expo.io/versions/latest/guides/using-nextjs/) without stressing about navigation.\n\n_This is a new library, PRs are very welcome!_\n\n## Example\n\nπΎ [Github Repo](https://github.com/nandorojo/expo-next-react-navigation/tree/master/examples/next-nav) | π» [Website](https://next-nav.fernandorojo.now.sh) | π± [Open expo app directly](https://exp.host/@kellycup8/next-nav) | βοΈ [Expo app website](https://expo.io/@kellycup8/next-nav)\n\n## Install\n\n### For `react-navigation` v6\n\n```sh\nyarn add expo-next-react-navigation\n```\n\n### For `react-navigation` v5\n\nVersion 1.x supports v5.\n\n```sh\nyarn add expo-next-react-navigation@v5\n```\n\n### For `react-navigation` v4\n\n```sh\nyarn add expo-next-react-navigation@0.0.25\n```\n \nReact navigation v4 is supported up to v0.0.25.\n\n\nI'm probably going to stop releasing new versions for `v4`, and `v5` will soon be upgraded to the `latest` tag. \n\n## Table of contents\n\n- [Set up](#set-up)\n- [Usage](#usage)\n- Hooks\n - [`useRouting`](#userouting)\n - [`useFocusEffect`](#useFocusEffect)\n- Components\n - [`Link`](#link)\n\n## Set up\n\n**Step 0. Install next with expo:**\n\n- Init: `expo init` (or `npx create-next-app`)\n\n- Install: `yarn add @expo/next-adapter`\n\n- Install next: `yarn add next`\n\n- Configure: `yarn next-expo`\n\n- Start: `yarn next dev`\n\n_I recommend becoming familiar `next`'s architecture with `expo`. Follow the [Expo docs](https://docs.expo.io/versions/latest/guides/using-nextjs/) or see [this article](https://dev.to/evanbacon/next-js-expo-and-react-native-for-web-3kd9) by Evan Bacon if you're curious._\n\n**Step 1. Edit/create next.config.js**\n\n```bash\nyarn add next-compose-plugins next-fonts next-images next-transpile-modules\n```\n\n**Step 2: edit `next.config.js` to look something like this:**\n\n```es6\n/* eslint-disable @typescript-eslint/no-var-requires */\nconst { withExpo } = require('@expo/next-adapter')\nconst withFonts = require('next-fonts')\nconst withImages = require('next-images')\nconst withPlugins = require('next-compose-plugins')\n\nconst withTM = require('next-transpile-modules')([\n 'expo-next-react-navigation',\n // you can add other modules that need traspiling here\n])\n\nmodule.exports = withPlugins(\n [withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],\n {\n // ...\n }\n)\n```\n\n**All done! Run `yarn next dev` & open [http://localhost:3000](http://localhost:3000)** π»\n\n- Take a look at the [next tutorial](https://nextjs.org/learn/basics/create-dynamic-pages) for creating pages.\n\n_You can add other packages that need transpiling to the `transpileModules` array. See [this post](https://forums.expo.io/t/next-js-expo-web-syntaxerror-unexpected-token-export-with-npm-module/31127) for details._\n\n## Usage\n\nReplace the following instances in your code after installation and setup:\n\n### `useNavigation` π `useRouting`\n\n```diff\n-import { useNavigation } from 'react-navigation-hooks'\n+import { useRouting } from 'expo-next-react-navigation'\n```\n\n### `useLayoutEffect`\n\n```diff\n-import { useLayoutEffect } from 'react-navigation-hooks'\n+import { useLayoutEffect } from 'expo-next-react-navigation'\n```\n\n### `` π ``\n\n```diff\n-import { TouchableOpacity } from 'react-native'\n+import { Link } from 'expo-next-react-navigation'\n\n- navigate({ routeName: 'chat' })}>\n- Go\n- \n+\n+ Go\n+\n```\n\nAll set β‘οΈ\n\n# API\n\n## `useRouting`\n\nReact hook that wraps `useNavigation` (from react-navigation) hook and `useRouter` (from next-router).\n\nIt follows the [same API](https://reactnavigation.org/docs/en/next/use-navigation.html) as `useNavigation`.\n\n```es6\nimport { useRouting } from 'expo-next-react-navigation`\n\nexport default function App() {\n const { navigate, push, getParam, goBack } = useRouting()\n\n\n}\n```\n\n### `navigate`\n\nOnly argument is a dictionary with these values. Unlike `react-navigation`, this doesn't currently support a string as argument.\n\n- `routeName`: string, required\n- `params`: optional dictionary\n- `web`: Optional dictionary with added values for web, following the API from `next/router`'s `Router.push` [function](https://nextjs.org/docs#with-url-object-1).\n - `path`: (optional) Fulfills the same value as `pathname` from `next/router`, overriding the `routeName` field. If you set this to `/cars`, it will navigate to `/cars` instead of the `routeName` field. As a result, it will load the file located at `pages/cars.js`.\n - `as`: (optional) If set, the browser will show this value in the address bar. Useful if you want to show a pretty/custom URL in the address bar that doesn't match the actual path. Unlike the `path` field, this does not affect which route you actually go to.\n - `shallow`: Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. Defaults to false\n\n**Example:** Navigate to a user\n\n```es6\nexport default function Home() {\n const { navigate } = useRouting()\n\n // goes to yourdomain.com/user?id=chris\n const onPress = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n })\n\n // πor thisπ\n // goes to `yourdomain.com/user/chris`\n const navigateCleanLink = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris' },\n web: { as: `/user/chris` },\n })\n\n // πor thisπ\n // 'profile' path overrides 'user' on web, so it uses the pages/profile.js file\n // even though it navigates to yourdomain.com/profile?id=chris?color=blue`\n // ...it actually shows up as yourdomain.com/@chris in the URL bar.\n const navigateCleanLinkWithParam = () =>\n navigate({\n routeName: 'user',\n params: { id: 'chris', color: 'blue' }, // accessed with getParam in the next screen\n web: { as: `/@chris`, path: 'profile' },\n })\n}\n```\n\nThis follows the next pattern of [dynamic routing](https://nextjs.org/learn/basics/clean-urls-with-dynamic-routing). You'll need to create a `pages/user/[id].js` file.\n\nFor more thoughts on how and when you should use the `web` field, see [Web Thoughts](#web-thoughts).\n\n### `getParam`\n\n[Same API](https://reactnavigation.org/docs/en/navigation-prop.html#getparam-get-a-specific-param-value-with-a-fallback) as `getParam` from react-navigation.\n\nSimilar to `query` from `next/router`, except that it's a function to grab the values.\n\n**pages/user/[id].js**\n\nImagine you navigated to `yourdomain.com/user/chris` on web using the example above.\n\n```es6\nexport default function User() {\n const { getParam } = useRouting()\n\n const id = getParam('id') // chris\n\n // do something with the id\n}\n```\n\n## `useFocusEffect`\n\nSee [react navigation docs](https://reactnavigation.org/docs/en/next/use-focus-effect.html#docsNav). On web, it simply replaces the focus effect with a normal effect hook. On mobile, it is the exact react navigation hook.\n\nMake sure to use [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) as seen in the example.\n\n```es6\nimport { useFocusEffect } from 'expo-next-react-navigation'\n\nexport default ({ userId }) => {\n useFocusEffect(\n useCallback(() => {\n const unsubscribe = API.subscribe(userId, user => setUser(user))\n\n return () => unsubscribe()\n }, [userId])\n )\n\n return \n}\n```\n\n## `Link`\n\nThe following will use the `chat` route in react navigation.\n\nHowever, it will use the `pages/room.js` file for nextjs. Also, it will show up as `domain.com/messages` in the address bar.\n\nOptionally accepts a `nextLinkProps` prop dictionary and `touchableOpacityProps` dictionary as well.\n\n```es6\nexport default function Button() {\n return (\n \n Chat in room 12\n \n )\n}\n```\n\n**Required props**:\n\n- `routeName`: string, see [`useRouting().navigate`](https://github.com/nandorojo/expo-next-react-navigation#navigate) docs.\n- `children`: string\n\n**Optional props**\n\n- `web`: A dictionary with the follwing options:\n\n```ts\ntype Web = {\n /**\n * Alternative path to override routeName on web.\n */\n path?: string\n /**\n * A custom URL ending to show in the browser address bar instead of the `web.path` or `routeName`.\n *\n * Should start with `/`.\n */\n as?: string\n /**\n * Prefetch the page in the background. Defaults to `true`\n */\n prefetch?: boolean\n /**\n * Scroll to the top of the page after a navigation. Defaults to `true`\n *\n */\n scroll?: boolean\n /**\n * Replace the current history state instead of adding a new url into the stack. Defaults to `false`\n */\n replace?: boolean\n /**\n * Update the path of the current page without rerunning getStaticProps, getServerSideProps or getInitialProps. Defaults to false\n */\n shallow?: boolean\n}\n```\n- `web`: dictionary, see [`useRouting().navigate`](#navigate) docs. On `v1.0.5`+, you can also pass the `prefetch`, `replace`, and `scroll` booleans here, from the `next/link` [component](https://nextjs.org/docs/api-reference/next/link).\n\n- `touchableOpacityProps`: extends React Native's `TouchableOpacity` props.\n\n- `nextLinkProps`: extends `next/router`'s [Link props](https://nextjs.org/docs#with-link).\n- `isText`: if false, you can set the children to be non-Text nodes. Defaults to `true`. If `true`, the children can be a string **or** a `Text` node.\n\n## Other shout outs\n\n### `nextjs-progressbar`\n\nI think this is an awesome package for adding a loading progress bar to your `next` pages. It's super easy. Check it out.\n\nLink: [https://www.npmjs.com/package/nextjs-progressbar](https://www.npmjs.com/package/nextjs-progressbar)\n\n```es6\nyarn add nextjs-progressbar\n\nor\n\nnpm i nextjs-progressbar\n```\n\n**pages/\\_app.js**\n\n```es6\nimport React from 'react'\nimport App from 'next/app'\nimport NextNprogress from 'nextjs-progressbar'\n\nclass MyApp extends App {\n render() {\n const { Component, pageProps } = this.props\n return (\n <>\n \n \n \n )\n }\n}\n\nexport default MyApp\n```\n\n## Web Thoughts\n\nThe `web` prop in the `navigate` function and `Link` component can help provide cleaner urls (`user/mike` instead of `user?id=mike`) on web.\n\nAlso, navigation patterns on mobile can be different than web, and this field can help you account for those situations.\n\nFor instance, imagine you have a tab navigator. Say the first tab has a nested stack navigator with an inbox screen and a chat room screen. If you navigate from a notifications tab to this tab, and a chat room screen was already open, you probably want that chat room to stay open on mobile. Only if you press the tab button a second time should it pop back to the inbox screen.\n\nThis may not be the case on `web`. Web navigation patterns on web may lead you to want to open the inbox directly, instead of the open chat screen. This example could look something like this:\n\n```es6\nnavigate({\n routeName: 'inboxStack',\n web: {\n path: 'inbox',\n },\n})\n```\n\nI've also considered letting the `web` field take a `dynamic` parameter like this `chat/:roomId`:\n\n```es6\n// goes to `yourdomain.com/chat/chris` and still passes `chris` as a `roomId` param\nconst navigateCleanLink = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n web: { dynamic: `chat/[roomId]` },\n })\n\n// goes to yourdomain.com/chat?roomId=chris\nconst onPress = () =>\n navigate({\n routeName: 'chat',\n params: { roomId: 'chris' },\n })\n```\n\nBut that's not added. For now, the same is achieved by doing this:\n\n```es6\nconst roomId = 'chris'\n\nconst navigateToChatRoom = () =>\n navigate({\n routeName: 'chat',\n params: { roomId },\n web: { path: `chat/${roomId}` },\n })\n```\n\nThis would open the `pages/chat/[roomId].js` file, with `roomId` as a param.\n","readmeFilename":"README.md"}