{"_id":"rn-navio","_rev":"50-65e72e0d43bc87265760f60340878394","name":"rn-navio","dist-tags":{"latest":"0.1.0","next":"0.1.0-rc.0"},"versions":{"0.0.0":{"name":"rn-navio","version":"0.0.0","description":"🧭 Navio - Universal navigation library for React Native. Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN in the future with the same API).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.ts\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@react-navigation/bottom-tabs":"^6.4.0"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["typescript","library","starter"],"license":"MIT","gitHead":"5abfd41a2b13a49e0a0445c209f28359bea82476","_id":"rn-navio@0.0.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-41YqQgiWzlxc+4/ps+gC4npYqtvxfVGM9gFV8CDJ2tMTSIcVKdZHaaf5oHbvcxyb7KwZOxFew1B2WaND36fabg==","shasum":"56cffd2c3a83768fe3d290219756d7a9b0c3839e","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.0.tgz","fileCount":5,"unpackedSize":3131,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDC635WiHQFCyfQAAtbxa7k09rZNC/IlUwH8nNWwrbQPAIhAK6MuObDxaTZ6OWx7c4mfr9IZvyF15431Ul9G3ZGfwDq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOHg9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1uA//QmQ6SzL+ktqRW4oWied/3nr/8XkjLOE7yIlSTTLIseQFJUMt\r\nsPXF6wrhNTg8jmTJALfn1FzoBVnfLfN9H6+fyj9AmuBhDbOmYVryq27YaXr1\r\nXW3G9nD/Si2EZpMnym5lTMAbhEyj2bpTZjsaV4I3KL//VmJn6/OuGnrVnVx3\r\niURl444jDPgEZj2AVbxHrCsLuUbdg/U4QTIC/rRrSofEk/mCH43jKiY/ZhUi\r\n12NXWCYW3KpqwEEKH8omdCIp2Iduxz3ARaWGgXyYJQV9fi/zob8S4O0aNtfu\r\nyxvW967vS8CnBjJf/8TgPiXV0tFbpO5vRFGaNf3NGT65EU7UtLecf4tWvlvV\r\nAwbM2HM2BMuJO5Zb3rbxwySkbrAFl6fVtVrQAekTick1wZSqavn9dIJCFmq0\r\nmpPtjPrppe4jtbOr6dfa6NrnYZECc78kNHozcFsMzHsN0AL9Ew1R3hfCSa6i\r\nRDax+61zIGnKANmewrX5vUJVTb5/L0gM87LF2vFVszivtKAZ3equ+D3yZzoB\r\nPaHnp4F5J2lphJcDmrelOHvrlbGxeuronArI7HrEgBGb4lUsXN7bia1+2hj8\r\nB4LFXVLQKp77HZZE789ntnjd/USlFNWv+u0FVdq/ZoHZlX95s3yGT7hXyHpO\r\nAjqGw3V00BMN4suxqnajXGRqE+t/NyUj4U0=\r\n=9yNq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.0_1664645181277_0.8128660439211288"},"_hasShrinkwrap":false},"0.0.1-rc.0":{"name":"rn-navio","version":"0.0.1-rc.0","description":"🧭 Navio - Universal navigation library for React Native. Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN in the future with the same API).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["typescript","library","starter"],"license":"MIT","readme":"# Navio - Univeral navigation library for React Native.\n\nWith Navio you can build the app's layout in one place and use benefits of types predictibility across the whole app.\n\nThis library is built on top of React Navigation (RNN will be implemented in the future with the same API).\n\n## Quickstart\n\nwill be added\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"b1e743c722ec3cf8e19f4f21204fb94609e133e5","_id":"rn-navio@0.0.1-rc.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-0lEND4dQk/qp8sgW6JB05X39TP+mrSTa/6kVh+P5Zm04fCfRdoyTRp3LfuoCCr8H2eZhZ+yj8bfeiMbIJdHy+A==","shasum":"a0e384eb4632d3e8d32767672e8f39e1f15c62c6","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.1-rc.0.tgz","fileCount":5,"unpackedSize":17733,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEcaEcCgNZHLZjUxgsWHohEnK6QZ0BoPgRsBZuhpNn3MAiEA3CXeFL2FsM2INkqv3jvR76qMR1QqnO3TZ6QqNrJQukM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOHssACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq6BAAhXiU1Z9s6oneL4t7tC8DGyy686X9V2IgJzCMa+hnK9mrjZJR\r\nKxV+pU0JxV0olVOzdHSOaimImOAIKAI0waDEm6rk+2LPTk1l/pcAqg5BTt4y\r\n/aubVCgYV2qAfwcNv+OkqTFcROR6w8FCCFMZ8Ttq11KvK0Ya+2MLk3v/JA7C\r\nPDVLioxGNUjikmLWKSnaG5OOGel/Oqajz2Fvly0AnUJ7vS8LX4iz/jyc8I+a\r\nKU8XIArwWL0H/JrZfT0AzIOOBfV2sbXcI11c/PZkw9zok73iWDcSxeUqAtWH\r\na+I8n+HNeJEfirdPqsVlRa9NMMFvv9DMKOoabQ9qbUmAu7rjUK4FYJ/9yRdI\r\nrDU4+f2tx1SXsaiJ4+oW/oZrvl0SRjGwwLTiQnNdRa1zbObhuBCKfOqpp3BL\r\nSJdoat5dVu2J8Zdjoa/03W1OkvaPZUg53pZMbw3GjWdxuvJJC7qYTpY0NFIn\r\nSO+ZxO2lyOSu9FtN4BKQtMI7YHijP9DtuLLYfKJoPYHKt882CIgoPswHvALb\r\n8SSH9sALxGOBodfHpNAUL5Um/UMnF9U4HEhjGOMIreqUT5B9o5EiUMayNarN\r\naDGQb7wDfrnQVhpasXv5amhRrCWLN/TKG4WA1YXFChZZ4lORWTvTrpNZ4imi\r\nT1o/zW8Zt4bUfp2CC0hOE6bfD2ySzpiat3s=\r\n=fsJf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.1-rc.0_1664645932500_0.151515399044297"},"_hasShrinkwrap":false},"0.0.1":{"name":"rn-navio","version":"0.0.1","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"eaf5b4db37c79f9fdd109d114445c63b0ffc2e7b","_id":"rn-navio@0.0.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-SXdltmMsVzipPSgezOgwRR/feGhog/ba7N7tpoeVsO+eszYiXeQQCKLsreSI/ZODC1wbSjZ4IyTHF/R73MdAIQ==","shasum":"718d0ec51017d226f11cdb222f1214fad8a02904","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.1.tgz","fileCount":5,"unpackedSize":26322,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZNq/UlDPWbN7zvoVN5uFjUkV1LXeRJFNDnkRcMXw3OwIhALP5ly/fbDtkCK2TaQP6T7si5A/dvaM4fK/qlVmf/CRi"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjOLhNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqabQ//Uw8yeOZ8XiDmwkBeL1yOezJc6jE1eck4/xV+dgvBu5JrkT4U\r\nNESZVw/DP4HMeX0p0ZKpqxGlT/KVj/tGbcpZYLUva8q5QCrN0RQ6bhhLDXUS\r\nHqBY9I92ai3OHGFzEJR878UYqkWCTZyxwzH6wKpPinzBVuv1LHZXKpOhEwad\r\nkOnruGdCpMbAcHX8J9gZ2qO/2knulLCUWxVc6aRcFoPq0X87SGdzP3Ky6+8K\r\n7wqlB99NPKO/TOWwDRugx265qqQ/qFF0SRW5YGWkce5IxYGcNgjBE+fb+1FI\r\nlV/Pvo2dj5X4sTHQH/jfypU4M7/k+BpFtLvoEggI1QV6tC8aksqj+xblSHoP\r\n+feuOvXY5fJUwuviLuKVM0as03eXkWA2SmLdhHJJdmFErlM/SO3uTl88VHpD\r\nbgrpC0WAAMEipDQDwXAGkBwubDcEJLVoAs8SUs81DWjCv1qtIgP/Ynhy+FLE\r\nuBlZkyWo3oUaKtNNZ1Fkb0P1xWxOsm2M8UvSDyYoNeB+yxZ1ii0e6mUL07ej\r\njpgv/KU5v3QOQ3PiYSPQRIxuaHq8KiqIvRKFsubFfh4VymAtKiH0nazVAasI\r\nPWtojyzEFOUoARlDasgSK8Xro5PcWiDt1hcvb2mBM1lsl825hySK5Fk6J9iq\r\nD9BRYyLTUqRzcG6LSltfSlXHXxqgHAs5+b4=\r\n=/ydK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.1_1664661581532_0.9424196345934517"},"_hasShrinkwrap":false},"0.0.2-rc.0":{"name":"rn-navio","version":"0.0.2-rc.0","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"eaf5b4db37c79f9fdd109d114445c63b0ffc2e7b","_id":"rn-navio@0.0.2-rc.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-MF0fmJOtoh87/kthhFY87hJPMUDdwzZnj8BCiDS08ZiLF4rXRaFKwFgDk46lQvcJD2hvej7gHlmC8+IrtNQyxw==","shasum":"84c422bdd3fee3cd21ff5405ef0b44c9e6940c36","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.0.tgz","fileCount":9,"unpackedSize":27615,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnRC5T6fLc2PRL61FRZbqpmEavWZVwNrp5UBb/uCY09wIhANKvXivEjpZ2LXrTz2YtFkOz9/vnGGC8YqVsCGr0+zYY"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2C9dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXthAAjgDRO+Bc/eajQyeUgT0bbpCWuTQu6NdOMV6TzVo/B8WB7pHv\r\nIJEMLhG5TYMKZedDVJP+NWSR1rL5dgje0+O6yhlzDdtldbC8nuAyBDEhmnl4\r\nK8LlhzCAI7l/64IwxvD8FmDst9c+Ci9Gb6MRuQAms6KL559CPd9GEd41REUG\r\n5jVivGvwSIXCS9wE0bil4P4wMDlkYrJVFbAwi7QUMQgUkGCoFWK4sVAGsdAV\r\nozGAp8F9A8OGd8tfica0/MgR2D0i5QHH5VXkVPpyHs90JqR3TMRwTwA+sO4y\r\nu8qbhnkgQ/i/9fZMPFEL2d3KF9KMusS9YHB63YtPi7Z6K6IkJg924UtnYDmP\r\nIG99BpB+mbpoxlAhKP9tGPm+HILSqFIenia65ohksvSj9QURpsja4FCFGD3G\r\noiyHtH9sA03JEzdyxEhCyIiXEg7wCNmVNM5uotKb9x1oiYCIosPdJza9BsGC\r\nTVumh7qgJcj8uV9jbdwU9nNXUHnWQqChxaR8xaZqaaSxiOuqem7RrwVzJXSN\r\nNDG2VXxHC3pN5jmx1ylpIeb0p7yJhN9c4O2/TFnYGnx01CkaGs8xDt33Rp1j\r\nM2mflRAhNsegISQ1vW9gh8auWtEu0lNKAgEA889AG25yykBA2SV0wepR/2NU\r\nYTi1fEzLWBQGugeO4fwvMDdxwzX/eyuAbis=\r\n=xhfj\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.0_1675112285221_0.3442515961423638"},"_hasShrinkwrap":false},"0.0.2-rc.1":{"name":"rn-navio","version":"0.0.2-rc.1","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"eaf5b4db37c79f9fdd109d114445c63b0ffc2e7b","_id":"rn-navio@0.0.2-rc.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-C960CcN27G8xbiNNGZw6SmuByifAsVy6vDP1C0aYBCyBVCNztUZz87icD8kctCHVzP0Qy61u3SvBbCeO+6Afaw==","shasum":"008012e588b01266c574cfb37d5396929f6ae6e6","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.1.tgz","fileCount":11,"unpackedSize":28473,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVYfh3REwL58+/BDdTFWgmPz+i5UoukADMkX7OY1nZQAiBzwj83k+/pZVDHSnDVENg8+md8/P+sQFqJEe8mP08UsA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2FdqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJjxAAnq1dZdDdl514ACFkhmL9twgHGYxHhUN/3KmBzxVnakNybQa8\r\nipYJcL1Zbq5eIHxbU9evGy3gw1OC1BgOJaBJOHUPaYOHrKWl2jcPQbyo5fW2\r\nKcNWn/vvJGvVVxGo2cS6P8F/yEzJD4xWuYTbBNZjGj1IApCarEZ0Hf1ybfLk\r\nRfahFWgApkiRqKnGd4c3tQ4BxRJGzrVR/8wD2z10TXag62oKfK0ZLpA2MglU\r\nhXDqzLcEJaKyPPBSaNdAaBgvHUosTdwerFahjC109fS2Lx8sV6fATw8OsdPT\r\n90W98bif+ka5OqvDy6DMX9PGOudJ3Ha6xiq24+WtGDQIMWW/LJHrNXTicxOl\r\nUaS6kOsUcuLtp7ghpRo0YkbJ7Q9YgqTXGYoWNsnqewi8Cc4/qo2uFrs9dbm5\r\nB5whpR0U6eFCzJO1rsN+LyZy7R0+fpjKxSFhHQQswzc4jCCBYiKg+R8Ovpm4\r\nTANksHV1fi2bPH+ucnNU8VAXmS76UiJwpH8BZvag4E++c+q5/3McmK+6yOPP\r\nw0H1BBs3ED5Ei7zJK8ECa7TtSLpc5CvlK7w4WUKQbC1WZ0C3wDRnfqinwbEQ\r\nyrxPGv41jsPOxivgjhN3YYpoO4YqYI/AOH+AqhlmLVs213MZ+7hbNwj8jlCZ\r\nFd49G3DUgXjUR6BjeZCcPBwuLtuSGZvQtOw=\r\n=/1H4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.1_1675122538294_0.11628966690894393"},"_hasShrinkwrap":false},"0.0.2-rc.2":{"name":"rn-navio","version":"0.0.2-rc.2","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"eaf5b4db37c79f9fdd109d114445c63b0ffc2e7b","_id":"rn-navio@0.0.2-rc.2","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-aDRZkddQz7vd/2QX8a8AHNzntp4HvJIbsudZjq/TDRuit0/Vv32w4tLL43tEncRQcYoHj0AhBJiZqsI7YmkcWA==","shasum":"4706d2dc5aff45590049edb1d841695e89026300","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.2.tgz","fileCount":11,"unpackedSize":28680,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIESe74jt8ubq+5zK4Wr53uNsubwLvZKwKsRKM9V/ahNkAiArQ9ywhMtV5GYkdr7tU6Mx0Agdi5exG0rwCv2Kcp7c5A=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2F0SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzBxAAjXxZNR3hPfMci9KYbJTwIQyhu4eigOqBnKYJbJm0ho+NYi7V\r\nBa5AETxsXUkyG7JSE2cGH70yqHNv8WhJXC3226h2PAUrrlvOvISlrgrGRoDq\r\nj9OL2MTAL9jlD5ShWi+nUCm+Oy3Cl3VE6ISeG98vY/1ihfN6IRq+xC8U8v/b\r\nn2Qr2sUkym2e63DkbLt1J3ZLaDgL6714Ig6hmWGrZi0xCnsC5VkMDGzXEzpG\r\ns2xP+TwG6Ui34eIF34p5KAsVcvucquz7eKttxRLuonbbJeSV1BGJUdKE4myx\r\nq0xVrVO8YPk6qTDYrq6Yk+0SoMipYUNRmXr4MvY+AEq9AoUEEWV6nKklaXz5\r\nnar+smCPzkxmjX/L4AmnA0ECYpZ6T+TVS8HQH5JH/dWzElXrOAZFjGmCxSlP\r\nBgFH9iH/j9Am7qHLgs5bR2Elx4im/uYVNkFeiBiQS7MSkDi8jCzNb279hsNd\r\nqEFrla4uXK54dj2SWaE7heA+T2NJsFd3ixVn8hs+tTFQtZuEewcmcOk5Kiee\r\n4ottviVKDA92RImUgfvOSRVq3GH21hvNZ3/SsGZIDgcF9U/zRRVwEuHHYCK/\r\naHbcFAAzwenIFan2dIAbuLgkGaSOihxc9Ay2mULYZHG4lEvTrUx1XhFPYqun\r\nIENWjWvQKIiM769vZK1QTHC8h9wSW6dFbUg=\r\n=bYyb\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.2_1675123986690_0.3091382819044366"},"_hasShrinkwrap":false},"0.0.2-rc.3":{"name":"rn-navio","version":"0.0.2-rc.3","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@react-navigation/drawer":"^6.5.8","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"d1457e98c30f7aa676463368e13a85c44719c748","_id":"rn-navio@0.0.2-rc.3","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-elXFRGDGIfXRSEa0GRDzesz7BSFhieEvimoqKnF97hXLmNoVqVRA3JS34DlE+MIgUFjRLHcWuNX9aBS9LaNIrQ==","shasum":"5d266bf3433be0928eb0ace7ff9f4b9790007904","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.3.tgz","fileCount":11,"unpackedSize":34131,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICyU4ivBRPAnorBu+ageYu3SsrMj44ZXZV9GfOib0dRqAiAx5+XlP7/OJVsr0gA4g3Wor2hNXIP2BdG1QgYr8/v2KQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2otuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre6BAAmuSeDuTp/1gIbHKo4dcSJJHgJQ+9HslbcOfEHx4dLzL/h/J+\r\nAVvAzoSAKipJWFCRf6zyBwTiLcXVjw8YMi6TKd6F26yUWWLRSRD6UdaLZsg5\r\n85bcPwo4s0EEmWFEBEk7cyHl4V5c5kRMBQh6fHYLWllyX13eD/svaameY3bs\r\nD+iI40eW/p0fujgQ1nYNTiN41WIrJICi9rZgwu8Umto24ZwgWBlI70bXl+KC\r\nAziJkzQdFkc3iA1kwBBWVR+/jxn9DH1U9IQAtlQA0/9JrvzGIDL2D9GC+KOI\r\nEA4ozqe3+FrmxcG1cdL/xkqeg8ySPZf2ei6F7G7RtxMer5qcmt2RL1rQZClb\r\n6y5Fb3ruKzu/Nnzt9qIKct4R4SPhJGn4nEwZ++IDN/exqOzoTg23LDNbMmco\r\nz1WqviX/KfAB/TY4HLal3GNUi96W2LOz2rJAeS9xs3PDcrIfoF1MZYKjwcyC\r\nY6qZynpl0ojfhPliWVFdqIdubHEsfo5Tf1v2BUnCcsPKhRjhiFD2VM1nqQxs\r\nmu0cd24STxcmOHRBOd3I5HUHi4ZAMi2pMvN1HOzD1ORO+5DHzTFaf70OyNoV\r\n0KlvJ29MfkgG/uMXk93jdq+/yNsFDxR6+NDV+sSKG88xO9yo4NSHUsO+VqER\r\nSisDFyYrI2W+SVRI5hV7u4mRLzcpo8lBb3g=\r\n=twV7\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.3_1675266926577_0.7258169320638665"},"_hasShrinkwrap":false},"0.0.2-rc.4":{"name":"rn-navio","version":"0.0.2-rc.4","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@react-navigation/drawer":"^6.5.8","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"d1457e98c30f7aa676463368e13a85c44719c748","_id":"rn-navio@0.0.2-rc.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-hp0o7WZH7RYOd+MzKdSVGl00v6CQcjzHaKAIDlHfyU+TsQIUV6eTy4XAHc6eCUKNW1GNqLqmavtX3ydAWxevwQ==","shasum":"b4f3c3554a1949f34130ef3e5165b00a4ecdb28a","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.4.tgz","fileCount":11,"unpackedSize":34240,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfZxWuYRqWX5nZdrmQw6zDI/U8rVrWulldwIiFHuNcGgIhAPK4qdMkr1BDkrOxOsHuyUiLZ1GG0Wh+5GK3PdwiowPP"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2o6nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlsQ/+K9HH39lgJUAPdeXmy/pjVRa0BaZ1bOSqlbj2cESlhlMIq8m6\r\nm53cLx/bvsKy5YcUJFJSzHWvCFkx0rY+REIEPPXNHZTWpx2r0bydbFczNPho\r\nJjBTTjmDv7XmhBk30YynjXkbQDJ8ysVtP3obViL1Dbz41P4O9IqTOsZU+qUm\r\n4F3zdJFD9jSZX0LBjtntc5zd1J1IG+TpOHxc4tm0yF0TW9936D99k5gLyU7q\r\ncKJRM/ergn6PeQJao4FLcmmwDwk8Yk4mjkHD1wm3nojUzqSnM+uTorNJfilB\r\nQBcymLPnMc/zH4GuHSxZv0O4kBFtoa0RVe14C4yp3Qux1FKahROEZmyP4oyx\r\nWNV4sJRxAH7uXPmrQnnJrKOj+mM7r/41XzPXqxfU5e6do9I7nAO5e9wNlcN4\r\n29/P9ZWY6aBDJeaWmsoK2xkNSudRfkREDgGq0WuSF4PLMlWI75nMRfFqCUph\r\nxUZLDBGMBYsSEUc5i0SaMtAGUnGSzjx96NWjLNOm5rLjRPuyYvVYvZVh477e\r\nzGpsdlcsgPu2Ax4G3KbLOUv7S5vYTrpd6d25sOeVdaDYsc/oPo2pkOw6ZCO+\r\n0qmEoqT92mABNzizifr4ijdFLvmU/V3aDcJq1kc81yfzMoXy7FF/hnlvylO6\r\nnNBP9/zjSVtuDMjxBOYP8tYbtMc7W+1c8po=\r\n=Oq7Q\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.4_1675267751554_0.8433609628883925"},"_hasShrinkwrap":false},"0.0.2-rc.5":{"name":"rn-navio","version":"0.0.2-rc.5","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@react-navigation/drawer":"^6.5.8","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"60a4d59effa6bfa114ebe5042e53446d45c29c25","_id":"rn-navio@0.0.2-rc.5","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-HUsgHFwlLGxanPZ26oQpp7lTkRCyV9tJCa3mqQ0XSP6YLdOfzCo1KS1+MxkwkK0QrhMqSdBy6nZwIF2UiuGllg==","shasum":"d01f8ac7df7ddcc8216076a4ef566f6703642ed9","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.5.tgz","fileCount":11,"unpackedSize":42070,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVtKaAqGN969Zn/SoJp4quf0AwFQ9p1sf+0fc/gWK6aQIhANvJBPykCvlUEXeS90s5cl55cuwUMTbHhwTBvNnh0fZy"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2xNOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTeg//ccyabRkwbbaNoeRLzMol4kiNoG/0zyN58jGSTMn3iB8vXWN0\r\net+HRyOhaI6G3ozUKKd+1aOiDOaNr8RnRXbyoO+u6d9isvMBggxTiGi6OOrP\r\nP9wDQykEpREFhKKow6BYWTHO4HrVz0y50phgM1ouOes/yUAmzH+TzRXoCHFe\r\nFvOH2/YTCsiYaHcRSwpffSOWaX5d9mhS3YdZPpUfUaBgighDVrehVrjRJBt9\r\n+EpXdEmpWMFlAgv8sbT74QIa+oQajD4Af30ptfg9GgfMcpZ/T70636hDVLTI\r\n6ll0by7ynmLP8rTSO/kR6QC6jObNLEEoB6khBESOzEYiG6D9QiyP3YeKoXx/\r\newr7n2YJBYL6mubSsFg2sud+GEfBOO4OtWVo3pqpitJYqo8G8qNf3r3/CEl0\r\nd2B8mZmeRKitAv1kiwl1i5lc//vvdIaKk852V6jnedE6Scuzq+3k+jzsA4NL\r\nvSG+4n94NEgiDJLuSd4d5bRhTPBW3JDu8lVdkNvBjsKe5Uwkp/YDo5Xxea3C\r\n1c55XMGtloIkAai1+yWoEvnGURLSNnA3pDhAZ9p7EdVPkUzta1BANgPgtdrI\r\nxoh7Fcef0yua1cFCHDCxIzvBSrKVMtwBxTSB+7kIDPiR4DwSv2he5NFNFvAR\r\ntbvheQ5zLKXtr2ECDx9GA1otH82TE4rWTio=\r\n=fkXN\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.5_1675301710569_0.07862188752883048"},"_hasShrinkwrap":false},"0.0.2-rc.6":{"name":"rn-navio","version":"0.0.2-rc.6","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"b51aee9a33cc1e4354a1fc9ac6fa5fdd060d8e49","_id":"rn-navio@0.0.2-rc.6","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-40AxG02ZP7H1iUHvj5aQcAhs8c15qarQdiRyMF/2Iy2Jt8veO+Gu6kU0Eufqw5Hjof4mbEKoR1M71PCjLQj5Rw==","shasum":"66295cb97ad44bd3728e0a3a9115ab744ecfcdd1","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.6.tgz","fileCount":11,"unpackedSize":42917,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/8ngauMVR8aVUd1gOFBuTdQTQlMFVowpSKA8TA8F4SQIhAIyGoHpyxwH1MWlnr5pRS3cAruKY+kSAb+yV3aFFvEQ/"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj28jhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKrA//ZzxnfNwUOX6G4e7Ncb17X9IVUF6XAHRC+NYl4F/zMoKNPojP\r\ngs5ci3WFI4QQSzyp2KtA9xqIYS2A1STewdBXLThyQjdfan8l1ZsKKzM8xIoz\r\n6KX0v6g49AcbEww8gMhNV79AyVaptvedgaLUGPAsuGud7m94dJqVujxvEz/L\r\nXrrDSIjkEaNktxmOwJCSIHyOTISw/t0wOtlgaJwZFpvQ9dlTUM7d9atE2Qw9\r\ntLuFKCUftmTfx09zWfaq/N1H723fFIfEXFGs1q72X3j3HFNdV8JHbebITtjz\r\nZgIjQMVyXuE++yuhk3ZA3u46PsAvxI6YbXfhBaF7y59qDfUFkZOE3Jr4xt59\r\nnoVYoN+JYeb1KofAUFdk+9n16pJe3zk9lGpY45Q4OAlbNmGQiGOXUAaw1aOx\r\njYwo+MOJEpxCsB6JUSOMX2bDTLCvDhjDga0WfYJxLWJFHyhzxYDd4bpwa2Fm\r\nxQRXKN6cN77QXvxiMJDPS4FdodFgyunJgVxsiwP6jIiSyVRL0v9GCxCvqCuW\r\nO3SC9ACipqHNc8cCzEgIiCDKztCnz/Xs13K9qOpNf+E6bQLwYPlu1B2vYZBR\r\nU0/2g8R+CDXOfjN9tu8faBDQvY/kzCCtEGNTby+XYEH/428HFiRpkcEd+v2F\r\nbzVHM4MSq2E6pr/KApDo9N5gCvVInevjBzY=\r\n=C8cy\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.6_1675348193342_0.8978799125486732"},"_hasShrinkwrap":false},"0.0.2-rc.7":{"name":"rn-navio","version":"0.0.2-rc.7","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"93e07d8ae334e72b3e10b759b0d98fefa1199fd2","_id":"rn-navio@0.0.2-rc.7","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-h65eb98JQucTSg/IeL8crq3Rl1MFhnoGOw9x7pZrYUKAMJRwOIdSYXLSVKyOFGpdpmk2C2jKWvRYqJ0Yvp/lIA==","shasum":"f291212d6e9b6f2902913fe5bfa28080cfae0dc4","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.7.tgz","fileCount":11,"unpackedSize":45773,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC6P9H5zZXoYS+bAy/lhKw+QRHLUim/Gx+K5mt7HQ3OAIgAY9Y/qP99KLdXFg1Ceyesa3AXAcq+22/h9bQ4NXx/cc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj29MRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0vA/+MisMtGMkTGqthxsRQdef1hEzr0ZcPxXMrP+KcoLkoEByTUoJ\r\niJmbZ2X1/MsbVygQIZkLkeMNFXtOVQmqksSwnJq13PkG7N3E81KHKiquo/Of\r\njcg32E75NDi0kOKRt/hh/mn3GaifEnAWjbNsUKPPsT1YF1u4Qusxgjptv+eq\r\nMKBaSD5LVQxsa3iNMzDFKS/ONrs/3UlNCGFvB7In/HuKvseZX0/cBNePgS+u\r\nPjVd++BKsKcYAE4derH2L3xnCbrUeHKgrwmRAASTG3kiXU3GTCrMlVJv9lmm\r\neZetq65QmFwIvyBYdWNndicdTfm5Nv/IOQdjmjDU1S50Hwv2vyUi3Ir/YWD6\r\nfDwZy3gmMeQYCJDkh2WbVaNEQmV05UytCUXFctisRdqtg3JaGmSBq1Yf3Mf3\r\n75tDyLXj4hBelQIsFEui2Lt1n9wK7vbma8kDHul0rrWFI4et8VcPDSe6DstC\r\nBhXNWPtz6tP7oHM02AD/yo6T0JKvjm+g0NALZCKp6PEMKnTnYjAcbe82JN1u\r\nrvZ1XR3kV4pf4bs1D9R3da0MRUqVpXjWLAmTH8bn4Zat41iEcKPUBZy2lMpn\r\nwbkmeHBYvuorpTw6Rm3lvWVZoU1fQgxKcIqmrUc1bEjVKH7EbusodU6NP1Mm\r\nsE8oEkiJJxbn9uWJRCvZBujvNkrlkvrsvrk=\r\n=K7x8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.7_1675350801567_0.8660288306189461"},"_hasShrinkwrap":false},"0.0.2-rc.8":{"name":"rn-navio","version":"0.0.2-rc.8","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"9607d68dbec29944795994708ac083036c0bb12f","_id":"rn-navio@0.0.2-rc.8","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-010v/UNc4ZRxpC1mnWc1qm9oDPez/TskZxt5M9jThvI0kWi8u+t2efIs42b6OH7H9w5kBwrBzqDKWqwmODIIgg==","shasum":"f50adf63324bc757d71713007c1c04654be932b3","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.8.tgz","fileCount":11,"unpackedSize":45849,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBH8TKvydxdCbI3ilsEGmFlGdzO4i37KVdBj6OM38aF8AiB1L/LLWN4X+g8JBdYySXw0G2buh6AOb17BGLCffczSBQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj29RUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYshAAjCqnoFvR35DtfbHcrfTUivwxX4X4Bv/iX5VrmlFXh1U73Wzs\r\nPNIJbeOsiz1z++4NeVACVtyJx+ay7itJic4hn/fD3mRuGsQ4xUkAtJmgXMZy\r\n96ju9k605STDVspHr9KRf4Q8ubmr7KyyWjuOEy29MbagmdXHjjvNt3W3BiLc\r\n+6EUJA1lTbQ+w1cYgnYOM/yaxKsgj/5XBezs/g8ZAncgvVEb0Hb8iDcNtkbO\r\nL86GGnJDSNwgn+VHJ9vWXnFQ0l1gPRg62JZP2PQnnHNoIvn0TZvA6IDFDwaQ\r\nBhtx0w+QZtc1CcUpPPbXYlshUSaDpfZdB+hmQVAIiF2NE0aTX96aFPRKgNqH\r\nkS2Fq2yX0mI67aSqWDQFIpey0Sb85Oiql+Qr6ee9PwF7M4dMbMbv2G2VJcTr\r\n27RlkWKUhQqd54M6ALQuSYtRcFb0J/AFXaxye9lPl9AwwLnzM+130mm3N8Gi\r\nN2GaN05SNDxwE8o0eeATn5qExntu99vm6EwHY5JD65HvZydKEhL9GusYfxNo\r\nT99Mq9fQ65Plx24Dq8WBtQHqbcksAP9YmSBqAuWSyn/pUb+KIokIRHmaYaP4\r\nBzQCiceEW3mviQdjhYDd/tTzNHQ4sbJAyA+wEne8M4UgDL/Rbd/E+zMLn9Ao\r\nBdtKyFZZZXjbLKm2HNll671VJHZArcID8Ek=\r\n=sTjJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.8_1675351124658_0.7482899935300882"},"_hasShrinkwrap":false},"0.0.2-rc.9":{"name":"rn-navio","version":"0.0.2-rc.9","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"68c6334a29c2c0225d350acbccb0e4a9ba1bb904","_id":"rn-navio@0.0.2-rc.9","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Wvvv1sOZ1MISY5xipQAge0W7AVerepVsM3IA/kGPSwB9No6gjv0u2w6NvJBr13TKlMlPAQzyscBdTrAvLj9xfg==","shasum":"8a921bdb45bbe77cf698fece05cfd9bf05c54566","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.9.tgz","fileCount":11,"unpackedSize":45881,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzWPrZzplkOfSZXbs1tJregRGT1HtiszrociRz9Sb2HgIgSJCZQm3SmVRBzzPF+pg0AZVAMezcxCVqggiiFlsu2OU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj29o+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpFWQ//QACemsj+TNY8nGD/x3cU73eKcaAdupBBkHA13Gqmy8aF+BGq\r\nwNDDeGokj0HXPJznkjiwp8Ma8aNvcRHszIGSuWPuvqd/6aVgWMHE/Rb20C+b\r\nEPCtmbMuwzrbtLpTxTqqjec81wdJO4jxLTlEixl8JMHFTCztmlrfzLR7s8jS\r\nEMU5XuhxVSacDU2K47kpjnkB9J9ggcGUk1NzEA12lquBuq1O1sHBh+iFHEcu\r\n98d/XTSi1Pu40SkYdDRmkWTKMBenkVz5CarRjOg49Td1ld5mRcv4vJjmKxHk\r\noCBN+Ap2MhpKj2HNiadyFHo48l04+k2mSsDiQkHDi+ayDQM1NULg9xLjV44r\r\nWXxkUwrYqdPoCf9RZ4i79BoyKaygT5JR4+8aXIVbmQ77Y6exd63+i1ZX2xPy\r\nHxIWoVtsvQhVV0s3UFdARbEjZvQ2kcl3RcPKr3JtRR4zBbOYqpgOwoHy03zu\r\n+kiYjBeRKy5G2eNlX8swZhywt9fzxJxGGgOo3Lpl1/2SwbqeP7RIlgyXewht\r\nzxqdOvs6DkXq8zmI6Dx4wJESzSBpM0th8EfJaag6IlK/5/vNKIOmFz3JL3Fz\r\nEsq1Lv5ryS1GgfPSvKxA8tJAmYHCHliudNNTjoEiYG8ZG5PTteW7U1dGLZNX\r\nDZlaV0sgFvyR+H1jxMgaRpx2HAgDlVfyTc4=\r\n=sxQB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.9_1675352637959_0.37125654561375687"},"_hasShrinkwrap":false},"0.0.2-rc.10":{"name":"rn-navio","version":"0.0.2-rc.10","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"2659e13ae5cb44604d2cbc8c08c526a6763dac3b","_id":"rn-navio@0.0.2-rc.10","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-DHe4tR9R/200k2QbTV0+6qEbZ9ANzi5KBRF5a/TLQP+aSoM41hapTcB4GvwIw2IV3Fn2RG7AZXjBFKtp7Nb8pw==","shasum":"02a34fa5b7a9c369c68e92ef3003ca4a0e4f2197","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.10.tgz","fileCount":11,"unpackedSize":45878,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDyHmWuSDHi6Gl2ia9dJ22t2NzGIAel6LzaoWOijFVRXAiAUw6UKDF9DFdAIpgxBbfYxBmvk99Ci9Q46q6sLzZaIUQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2+BmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK9g//Z8MSOmv6kqVpFD5WxXZzpe9HMgpvkL97miJGBUV8kemXF9sE\r\niHbZzZBcE+bxPnCsmUd/pxB0moo+Q8tMw9OroBY9Jn17Ure230+/XIDkg9Jt\r\nFnEbI1mQNSDIFEzJWOC4S3asiR4h+vpdTr/fhIolNs934Io1EgWlQHHzg0WQ\r\nk2J/h2cFWfdIcB8VJiM/84kOdy7sU1EuXOe6PH49pynDaWo8VlvlKug2WzNF\r\nxumld60ACmabxFpJ1bKfeiGkjlohFjJqeBxif1RN5aB6Zv+bpGkTKt9XHgZK\r\nEQHkYUCg2yYVvrVqNTIzNgxwkFf+UH4i6u4BWNxsvWSJYuzp/JzyZkaMaKWO\r\nlT8SUd4jEbM7FEjv8wEjMT3tOY4RoFRigScichEmFgYT0UkpJPogmRlCxurt\r\nSjN7F0v3xDFx4rPpwYc1rk9EbyikDHSjs8Mez0vczbNahuM90LkebozZjMBr\r\nuHaOT6EK82wTJGe6rVhsBpJQ+46y/qY39l8UM1A/itIQxWrfghYCzs9fKPPY\r\nYmSm/OIL8ftgh5Q0goum9YmhABX3cJiV94CdKedZe4yYSFuk7qZmOc7CXwcQ\r\n/3v5vWUqmD5U/4ZFCmwmW+ZjFfme1uYprh6iH/gdFlgqWaD/AOsmONMPWetY\r\nLFe8Qll2RVU0/g5hOQ3ilYmc5NBk1dJ+/G4=\r\n=QlOZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.10_1675354213768_0.31596139602702644"},"_hasShrinkwrap":false},"0.0.2-rc.11":{"name":"rn-navio","version":"0.0.2-rc.11","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"dfa4f9c47122e538e13372edbb39705a1bed3923","_id":"rn-navio@0.0.2-rc.11","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-G8nnt4SFZ7p8ZgrfXGuC9vV71vXUhXXFXMDip/BKT5w5nw39x3wu73RaG0aulG2dSeK2AFNP7nMF53veQRcguw==","shasum":"9bff5666ed1c159c8e01b5871861c90b704eca10","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.11.tgz","fileCount":11,"unpackedSize":47077,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc09aE130jRH4+GKgID411/3pLdfRRWn/moALMXwjQRwIhAP4qk3leMUPruVlB+uOy2fysHP9AnAyHkOz48/0d6E9S"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/N9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSkA/+PIR71GLc92jDHOr0cNn5iEop+ifaBJ29sjDj4AnIJNTDT3QP\r\n+OkLsM+FWQ5XrL1htOqnnhCr/7gAwrXO4jXwZmw5x5x4J8P4CzF3WkhKb+jj\r\ndR/wKMAjKbM0z3CdEw13/ycKI785POyTjpJvpyCZNQChObZVqo9LHRh6uS9z\r\n+Ae+UvThce14j/2QTsO4YjPlhb9Fw8GAlCNpNqLGXmtziDpRZ53AxH18Mvl5\r\nuwKTPBwcI7+a9QEUPJVZt4P3vVNvgoaz+Cxn9dUOUoq8xJdv/id9Z6yHy0+E\r\nCJDK83cOHEJp1J0z6fN+1Tuj4yRJPdV0mlnfhk+YzNaF+tEBS+bas35JNKme\r\nHNynQ5mQYug7NDBP57vEJl4Nwa7bBjmQ+ZwuRTJZ7ozSMCzLTIBg5Ce0ZDb1\r\nfMnrjO/g3+iF/lJjxvU4P2B4UKoPl3Pgaujoj+Pykw0g4P11dNR7nl5SHu12\r\nGkHG49elHCUVOX8Z5qpQrGHIcWi+AK3I4a2kbxsC8VUBTu2E9nhy55hXMdlh\r\nVtpzheT+IVTjedGz7axj6IqjEj1u0W35z9XBu2eHqf+ZsOvVIhslwbeSbxON\r\nngmlKX64SPzi9pUKkKh+iGtHzfTRvkEwdFAyE1TKRKeZh9c6xkSP9CxhPK/G\r\nxOPFETciJrXhqWbsEu9w8x02Q8Ajzm/A9eI=\r\n=a0qx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.11_1675359101607_0.517700538758425"},"_hasShrinkwrap":false},"0.0.2-rc.12":{"name":"rn-navio","version":"0.0.2-rc.12","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"537aaa1626ca6619ae518bf4d926d31bf173da81","_id":"rn-navio@0.0.2-rc.12","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-itx3nTHa1cDVLso2YgJDzJA/V7ykEL957jYkktpvZcn5OVChmetUeEUuQ5dGvO4PpgrGAwKKFr20x7Rib3Oajg==","shasum":"c03bb39273d4f15c28163e36d58d84c8ec7b183a","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.12.tgz","fileCount":13,"unpackedSize":50359,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDq15bubI+17INqDdQ92WlJff0gZkkb/acIq0XngrQ6ugIgDQrv4RFF9xxXhv6ZR0HkMRlPrZEeRjiHwOZd8Rx7qTs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3AYAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLxg//aq+IPazYIAzDeZuxucCr6me1a1CWLAFi+VymnxTXACFQc1CF\r\neqvhntGqKMr0KrCgXu6e3Sv7Ah3g6GwNiFiZbMFLI64gpnuh14cU4fQy5miB\r\nKWNcUDWBF/RbnzaqN4MnJb8HEjkkciW2Y37Z9TlK82w1hergJXM047hJ2ANP\r\nCK9QRjCwQUQZs2BG/v+5ETfcG5MVphbyDY85+XFhxuC4iNSy3hOoqWcixuzO\r\nZb10r2L3tVEIO84K0oshniG699LHPsCPbfl4K1GswNvt7qCYlFG5uIRsqt7h\r\nk21gTnFvTelkRdgux/YxDOM3VvPk4vqaOO5+xeYxAxwxnmdibRkBMVRJ5tXD\r\nvs6BFtCfconnPkCjVjvdyu+xVptJLAw5KRavpD2ImwZmZ7XS+XRSxoR3Z1cf\r\nLJXVmgnbuLtIaqk0rIp8srnXkpErSpjTL86FYY1FfvGJHutsJdVqLXCjdFk/\r\ndd+qcn6dSYCJUmZkTMfAFr6KUz6BNT+9y+5q6NtV7M7ay2yrstN92j07HaT/\r\n/PzUKclaqYLrTmZkWLLWMc5iyBbBYSWZNF1FhcsO2erhjAfLGokTSpK7FmyV\r\nQ87r5i43SiOspEOVVFJ89XSQIagVhojhKhUBNv5MIC9UKBHAe6x23ycWOUKh\r\nylJOB7eyGkIGnOL+vcGtc6CIinvUlBnWKVs=\r\n=8EaV\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.12_1675363839994_0.8865350111721395"},"_hasShrinkwrap":false},"0.0.2-rc.13":{"name":"rn-navio","version":"0.0.2-rc.13","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"a15b885711eb352f88c74a19d96b8b8ac4432e65","_id":"rn-navio@0.0.2-rc.13","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-JeoUntsflohzQatgclUqfLif7eKZslYokRHkoJqUszwWjWZHCFmkqDS5LjjoLH/D40UJSaHoAbc+TMG/TbVLUQ==","shasum":"b8b9f330812aa2cec4d8a472dd17d9c48299db8d","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.13.tgz","fileCount":11,"unpackedSize":48799,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbkZ75+U5dDO/Kf4OZiAzwGf7/GiLCzpVtKLlFwvrakAIhANv3zeADJCWpL2DbzzU9ANfrn6+QuF7JMmk/d0xtrI5c"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3AirACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW5BAAoM8GBukagWA5qqMnRkxYDE1HoNptn7grJiX5Tq1xReg8WbuW\r\nC/4vheHW3swfWOfpiLSxb7kEH+9fRc6yOyeRMUEiXW/9agaLkG9WWGelrv8q\r\n69XbWEFWxwSad3plWApUwDkSBkGRW90tbEqqEPAoWxHvK2grTOs/oce09Gvc\r\nZEnoAKyIvOJTV75OVF7Yjb69vTH8+X9gHpbrCG8wpFTuLdp3HEsvXGSvQpew\r\n0nAMDm4ybCFNeu0LR0V5QxbAKP4SyIDxHTpLxFFljJD8EGOF/WLKr1Je05we\r\nPx+d+0X/AO940uZDC0H9ujLw61GJIoAf4Y1P9IiwzkSyB3IjzSi5guBHRCf9\r\nDuFVfGfoXPrR7PDzHhamMlHIotT1AiJtJYeyfuTcOXeTbCL3keh6raae3Cps\r\nXbJzGL9NYt6E8wHV3NnSKm9508fKL4PUsOXZ7+/EkQjuxPLmMmZYkGIkb0aL\r\nJTIiqAgLjfu1D5+J2SVEF7UyEAANrEds7EiMLjGVPOJgzE6De5wRxxrET92R\r\n4SZ5snnuiXaxLvjjxH+lboQXRPqqJlweTJDkxDegoz2dAFClHRchCBfXGpBS\r\nT1Um8wI1MPe4N2VXaYXJDBDjfF+FIE87f995DKBuS6V1W4HZk7rPuf9YOkxz\r\nsJ9Y36eh8Qaa20UeKEup2GjOqKQqNE97Sj4=\r\n=wvhX\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.13_1675364523340_0.5454573111611591"},"_hasShrinkwrap":false},"0.0.2-rc.14":{"name":"rn-navio","version":"0.0.2-rc.14","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"ae62d34a120d86e8678b714f416eddac0a0f9e07","_id":"rn-navio@0.0.2-rc.14","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-/OGk60ITBV4RxFpyD2Qb375ozwOxH0fUhs0Zj4t0KpROqGF7F66DF7LND5BnGlC5H3obsV/qjDLL+ZiJyplb/g==","shasum":"1b98dc9a4e19aff19d486f07a2f27a41658ae898","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.14.tgz","fileCount":11,"unpackedSize":48815,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmHtvy3avRV6d9gHQFgFTQAogQuwILPSZbaj+UbyfvCAiBGE8DHRQWZqPNqqxSQgc0mX1Z788XNUC6bukLyYE56Rw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3BMbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoncw/+O87PPZ6fL+FID+XGsSOBrq3JE36huwgeH0NaWMq5AYQEjqVB\r\nQ/UPH5ekwcqgmYSw3g1HgcA9PqDha7XVjwlRn5iVJoPpRL9/Xfm3UlPwod6T\r\neMv5wyLKm07hkEoNSFeMQMRCKUa5uINSKktMC4U5SbYel31PBPwUnVpM0QAB\r\n//0RPNwyTWk+shAQDRV3RpaJIMOT5iJs255UaURpDhWRDN+I0iGyvWbfyH5b\r\ng2QuWOiTnBYHjpgjHmIllyWGA2EwSG2hORk6/wyTle4bvkcYvokunhlU4sbu\r\nPXNp+dU+6pzGZAXxQGjh90XO56eUIExxQM5Sb1Ry2iZx3tezRwMPpDSp/i43\r\ndlMsQCUwF+5rajkJ+DcI7nCHqxx3b06rtLN0qEIzjZbKKsN6Yp76IqGovitT\r\nb8xOKt9Z5f1DFX0qlMqyWTG0VD+cTw4OQVOfkRMmH3EfTreiPybVhoXbktfc\r\ndCfXh6zj4Sdf0iUQNLcguqKxnwx+9CpVddlH2JpTqbejDuFXbPG5eiFpLzFJ\r\nUpFj459Ia+ODoxVfAGtBFjF8r8fccBQifNucZqeo+cCe+hlMwTHhdjLwW6Fd\r\nmU42zSutoxDzgqTHc08aEbMIMtKXl7GQnpOAEhaf3NugM74SXntOiqSQbTQg\r\ngYzmLaHwFc/Kb9e83KH7UgnoH8DcoxAZawM=\r\n=Qsxw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.14_1675367195544_0.15932612204544827"},"_hasShrinkwrap":false},"0.0.2-rc.15":{"name":"rn-navio","version":"0.0.2-rc.15","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"75fc46a324ece82db22f5ffa0598daeee6f4cdab","_id":"rn-navio@0.0.2-rc.15","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-61iCCHt5U36j18ef82AL5/xLMHp7Gzx/Xelb7DaiiBBHLxSudNVwfF/nxqmrtqkh0NK8893g2gmOPi3ebIiuxg==","shasum":"716684459602591ce859b9735c59a5aa5dba6776","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.15.tgz","fileCount":11,"unpackedSize":48987,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6R60Zh8SjsopGk3Xxho1bbLGv7ZaMMcue9qVZbrXVoQIhAIKZukQpN7V48jcl1iGDovzIWO1ueB3HzvYeOU4TyWL3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3CFyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKsw//ReOe9nde1UbkjxRih8wKsMEnt5jAUpd2BsOnXz18IcBjOXCq\r\nH2s07cLpnY/hJF1IIc4Ns9DWOJNgXLfAFP8wRAM+UNgoQP2VlQgre5xkJfLk\r\naMzFtc2kqAODohqIGz5rs4ulKmQw/KRlJKqmpzbzoSPEchWHbnHSoNwTrs0d\r\nxuqMDyHOGp/56awwP6K0iy8J7C3A2Yq+B9u3UopdLkrh20ZnGhGDFw5OdRM1\r\nIyis2jBp4aX6x5clOkoRiGkIclGEFKwSOOvrwMSyQ7DtXp3Y/w40DuFnJoCV\r\np0U7TOuyMauReoXET+XxJtqHzOV9oJ6q2LhrcDvdTi7tpj/IAd7gBYJUYZqv\r\nI3hyC4pl1oL8gcWbd2nZtf8MaYatzqo49M73Eu5nWPDk7JJnxnWBBSlhpkU3\r\nDY0p+jWiYcSmIm9qtuAzQL0BdEQ//weTOc2MRVA4DTe22NIi1jvrpmWJK+XG\r\nGjRy7OT81bKIS7T67Y1D8BW4VZVlR8wJhcsM5V5m5EbkjiOcBafOFOz4iKkX\r\niRZATc56zvdK1151ijwuL/8vEHdfV3+kKbmo2vTVykmVS5NlmVa23neWkKsn\r\nG+/mgwkQre78N/MI0H7ZDw/UtCf1AJioZz5mE2xh4vS6Y/e9oGzELewkmBfD\r\ntYloAeSXDBBuwaez3ZmFVDNQQEKiX9nPOpM=\r\n=ACjv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.15_1675370866546_0.4750929745436234"},"_hasShrinkwrap":false},"0.0.2-rc.16":{"name":"rn-navio","version":"0.0.2-rc.16","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"f7f7976d383e06358665fdf78a596358dafc9580","_id":"rn-navio@0.0.2-rc.16","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-qfA06LT/fZ1Gbpw1cjVC8glKJYwP5+VOTIasDPtKHAb4WLjYlEu0nAEu4C87lJO2bU/Re5OgnnGM0zmo0fNI0Q==","shasum":"ea023bcfa685d644f486dcea398d8ab65659cb42","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.16.tgz","fileCount":11,"unpackedSize":49261,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq2TFbKas769lsZs+rnVakf9giF8TfaUKjq9Jq41XipwIgQUplbdfkjDJdtfM0KHS7sl6U4ABg411m5fVD0QKtw3I="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3CROACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8nA//dip5pi1vTkwjdiiK5LbyfEioLDUN6L6LLTVa4Pi9Hz1cDdA9\r\nxrQ8YbjEg8XLMEB1z1Bf9lqrRrtnXl6MFlN5uAWrBOUWoQYwZYTmYBtt9BXv\r\nu29FLzI+1hcyiel96M0sj9WfH4tbRS+065SWHr4LjsWlSk/BiFG4/WgNbra/\r\nT+3AI4MaS7a5Z6+qZLAKbs1279PwX0lpa3arBY8rYCDOC09Oje3VxP6p+oPY\r\n9RQKkxBmaZ9uc5HOvzjBnRsOIzyOxb2a4FFbg7SmQJxy0ZS344Q0s0Ld7f+/\r\nAxDqDoLOY8zgeXjRht8X/eZAR5mvKQmRmfvwLyPuKnVl6Bk899LvHfn/ygx8\r\nltw6CmcWEwAlFlrF7bH7dhmVJsHw5shAi33bXdznyWHNQV4wWvEKCLcJy/uP\r\n2PfkWXEA5NWRfzH41sFtU8LFm2ENgvciGn0fJEUsg16V2+LRL9MGtye7hQDy\r\n4bcGTLFqLqc6ObSWy3Tx6Ex+TlvLHRPmHZjJrM1qry19kOMQndp7KSgKkcIc\r\neb+9gGwNg3Oq4q/T7fkBI2gw2i0y5DLqkvLR7ArY1d/WlYN+X26phGrliOEx\r\nVhQqvSyxTompJxQTTTao1b6dOLcUkSPx1OPnDM45gnek5+V2CN+tfkE0KdhB\r\n8Nf5Mrhf4X/lnhy6X5GSUXAw1q7NjoXkvgo=\r\n=QCbt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.16_1675371598215_0.5153756053460516"},"_hasShrinkwrap":false},"0.0.2-rc.17":{"name":"rn-navio","version":"0.0.2-rc.17","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a tiny library (wrapper) built on top of [React Navigation](https://github.com/react-navigation/react-navigation) that makes it easy to build an app's layout (navigation structure) in one place and use benefits of types predictability across the app. Predictability of route names while building app's layout and using navigation methods (e.g. push, jumpTo) leads to better DX, less mistakes and faster development process. And yes, no more messing with `<NavigationContainer>`, `<Tabs.Navigator>`s and `<Stack.Screen>`s!\n\n☣️ <i>This is an experimental library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\nYou can bootstrap (from [expo-starter](https://github.com/kanzitelli/expo-starter)) a new project with Expo and Navio:\n\n```bash\nnpx cli-rn new app\n```\n\nOr play with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack):\n\n[![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\n## Examples\n\n- 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navioTabs = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.pushStack('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('Tabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    HomeTab: {\n      stack: 'HomeStack',\n      options: () => ({\n        title: 'Home',\n      }),\n    },\n    SettingsTab: {\n      stack: ['Settings'],\n      options: {\n        title: 'Settings',\n      },\n    },\n  },\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n- Advanced example with all available props can be found @ [expo-starter/src/screens/index.tsx](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Usage\n\n### Layout\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"3bb019703710994abce2e65fd17b1b3541653610","_id":"rn-navio@0.0.2-rc.17","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-gR/fVGExDan97tIr+PLixSM4YCeWnKwCZqU2PttL0GtR8z5CFn16qKUsGo3cpbK3ws5L/rnguHOYadsfQa0nhg==","shasum":"77894b1418b7c91e0dce0afc9f15cb479566da1e","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.17.tgz","fileCount":9,"unpackedSize":47015,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBHFRUpzmeyIUN4p7KfxuD6qJ4UsVlTnuaHb5Zceplb/AiEAllHwLIg72rOexYSCfdZd0Kq3/k4i63NojwXOF3b6iOQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3TwsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDRg/+NKVkMHq66+nTPJPtRaCbxbk3+PfY1o/KV/JFPTpXZze947Dx\r\nMrzrdAxpeQB2y5Hqkj/UxXzcQOB6+DjRMFu455AEqdgF4AVY/sADuLzsWmX9\r\n0QeonGD7zJEAfj9wjtzghzuqTcOsNcB1oFzvj1LetlXxDCCZwOodLG5Rtgfu\r\nfLQTAbRTIjayunb92diRKV1j1H471AXJWt9ma67wxlb4yAQBdBUBk7/J+Eqi\r\nqqnbs+KgDlBldA4eDf9MaJpGPfQSPVQIroiAWkXY6FaqQYKyrIkffegRQElN\r\nvg6jNLggXWJokLyiwcAh3SEYon+ZlraUG4ipLu474l0BTjiRquZvyAs31g38\r\n+4BEaYM1B5eBEV1vo9pFsSo3BDSYnBtnXQi4NtGWV4g2gGX2h7r24TK8kxy5\r\nkHwOtvJEgapAqT/uHLnIc+zdSonGQ79oSXzV77jU8MgldsykDXsCtRuCjSL0\r\nWCcOQ/DXzJyQRAHtINr/Xh9blJWXmidpDa3cNvKFdHaic9oxfFSvYKy0TMyc\r\nJQ4yuDAVBDxYJPd4sBQsuEuCl/+k2YgvqVMjBrEXj4H5PJqd2bzZh83WK3ai\r\nQCINPvwSh6BOLZbVssMH1tyeDMHs1wOYOwFGfLYsfBhMmR1o73apQfCZxfDk\r\ntQM3yscsYUEImc6TffMpy9ueE9TgrOorMt0=\r\n=RZs3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.17_1675443244230_0.5830114400027888"},"_hasShrinkwrap":false},"0.0.2-rc.18":{"name":"rn-navio","version":"0.0.2-rc.18","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>This is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n<!-- [![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack) -->\n\n##Layout\n##Navigation\n##Enhancements\n\nfeatures: update options, props, Extend current Navigator or something\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starte](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  \n})\n```\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"3bb019703710994abce2e65fd17b1b3541653610","_id":"rn-navio@0.0.2-rc.18","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-pKpZ+eOqdmHpkEgdU2roEcQZdX2AyZ3R9ds5yNQjUoy3TrBzr2p6RfJ7aNYOMjggjgwaYJkH0W/iCGFOjmMb7w==","shasum":"441554ea47a83f6d466a33bb008c52d6640c50aa","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.18.tgz","fileCount":9,"unpackedSize":49098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwS3gfHATEm316i0g3AsSSWLHswbYxyZ4lkD1vEwn85AiAGv5ShtjVne4+qiV7UITq9/9qm9fWrKo6+t1e5w9P4wQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3U3PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmob0Q//ZX24W2LM/LdsG8Vd9o9c2GyHHsc6BeA/ttVTZ/Mmtdzs9sbu\r\nEvmykkOnjdww2McAayB/lkBsEiGsi1V/1KKIhErGNsxkdejaQpanRxDAAEfg\r\nszwCgfmOiR3bV+oKIdwGACwQZOjSpBg5tBx21ah/79XA2jvsVOjipjkBb56y\r\nUw1xZD8fQITIZ6z0vgDR8Jhvd9eWrj0V8KmYfnbICjofY9ctLESaWE6TxEHf\r\nlk/xWURoyqSdN4YaFyMMZ56fWDqzCSR1rUYR3pZFI+IeUUHov4qrjhsR52Zi\r\n/q7rpFaK0lX0lHDZfhMHlqe2fja+eZL1o4K4rUCQXnT2aSFzWiIywezWZFF/\r\n75IsQXl9TmtaNdKCg2flWAXmORmkMq8ByOltQ+64WQ1xNEStgaJFSh9F7ehJ\r\nfJIRitgcUsP+RworS7VF8Cspr9h6oMjkrqKZBu/oJ/0EysWkINPnxbXoBRNE\r\nox1j9ZQXCmWaZq+bdXZnlAeoYXBkRn4yP5HIDSatOETtqw5HMGkgwDEBMd7N\r\nvIuAueEpVSXtadRMAvPTm92UYfmotBKqa+i9vc1nbhzRu8mvUSBNaWsTE7oB\r\nG1HGtdxDdCapAp/efWWQKNy+05sRjU8Ctcs4izTOE1C12mZOOyH+pVtDB4KA\r\nxsgFPUE/JJRS8IpQMl+tLMIMcgKfhQ0Z7S8=\r\n=mm4Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.18_1675447758884_0.48470790397478747"},"_hasShrinkwrap":false},"0.0.2-rc.19":{"name":"rn-navio","version":"0.0.2-rc.19","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>This is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n<!-- [![Navio Expo Snack Example](https://user-images.githubusercontent.com/4402166/193429279-f324592c-0682-420f-8608-d8e9756f1fc6.png)](https://snack.expo.dev/@kanzitelli/rn-navio-snack) -->\n\n##Layout\n##Navigation\n##Enhancements\n\nfeatures: update options, props, Extend current Navigator or something\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starte](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n})\n```\n\nNavio's layout contains of one required field `screens` and optional fields such as `stacks`, `tabs`, `modals`, `root`, `hooks` and `options`. Stacks are built with `screens`' names. Tabs and modals are built with `stacks`' and `screens` names.\n\n```tsx\ntype Layout<Screens, Stacks, Tabs, Modals, RootName> = {\n  /**\n   * Screens of the app. Navigate to by using `navio.push('...')` method.\n   */\n  screens: Screens;\n\n  /**\n   * Stacks of the app. Navigate to by using `navio.pushStack('...Stack')` method. Good to use if you want to hide tabs on the specific screens.\n   */\n  stacks?: Stacks;\n\n  /**\n   * Tabs of the app. Navigate to by using `navio.jumpTo('...Tab')` method.\n   */\n  tabs?: Tabs;\n\n  /**\n   * Modals of the app. Navigate to by using `navio.show('...Modal')` method.\n   */\n  modals?: Modals;\n\n  /**\n   * Root name to start the app with. Possible values `'Tabs' | any of stack`.\n   */\n  root?: RootName;\n\n  /**\n   * List of hooks that will be run on each generated stack or tab navigators. Useful for dark mode or language change.\n   */\n  hooks?: Function[];\n\n  /**\n   * Default options to be applied per each stack's screens or tab generated within the app layout.\n   */\n  options?: {\n    stack?: BaseOptions<NativeStackNavigationOptions>;\n    tab?: BaseOptions<BottomTabNavigationOptions>;\n  };\n};\n```\n\n### Root component\n\nNavio generates root component for the app after the layout is built. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\n### Navigation\n\nOnce the app's layout is built, Navio instance can be used to perform navigation actions in the screens. All available methods are listed below:\n\n```tsx\ninterface Actions = {\n  /**\n   * `push(...)` is used to navigate to a new screen in the stack.\n   */\n  push(name: ScreenName, props?: Props): void;\n\n  /**\n   * `pushStack(...)` is used to navigate to a new stack. It will \"hide\" tabs.\n   */\n  pushStack(name: StackName): void;\n\n  /**\n   * `goBack()` is used to navigate back in the stack.\n   */\n  goBack(): void;\n\n  /**\n   * `pop(...)` is used to navigate to a previous screen in the stack.\n   */\n  pop(count?: number): void;\n\n  /**\n   * `popToPop()` is used to navigate to the first screen in the stack, dismissing all others.\n   */\n  popToTop(): void;\n\n  /**\n   * `show(...)` is used to show a modal.\n   */\n  show(name: ModalName): void;\n\n  /**\n   * `jumpTo(...)` is used to change the current tab.\n   */\n  jumpTo(name: TabName): void;\n\n  /**\n   * `setRoot(...)` is used to set a new root of the app. It can be used to switch Auth and App stacks.\n   */\n  setRoot(name: 'Tabs' | StackName): void;\n};\n```\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Test on more use cases.\n- [ ] Make it universal by adding [RNN](https://github.com/wix/react-native-navigation) (similar to [rnn-screens](https://github.com/kanzitelli/rnn-screens)).\n- [ ] Pass props to stack and tabs navigators.\n- [ ] Types for props.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"b44e2f439d943c911bfaf2d089830665096a14c9","_id":"rn-navio@0.0.2-rc.19","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-cfC53G4cBw1dW78nR5sL4jCShqy6ctFNqR0x00qdQf+oXvSJl3fDsBNx5erUY4AWOu2DCfasYgZhCm5042kDsg==","shasum":"3b0ec8d0f25b76f03371b68c145681365004f060","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2-rc.19.tgz","fileCount":9,"unpackedSize":49280,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCwh+tr0MUsMWGpLQ9E8JCCdO6mDLXuM8bRoteMai11QIgdEipAzZgyZCeFw5PAqWswNcZxJQ5cMMtEcVmG/yF/TY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3U5eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoI9BAAmIzrO1P9QQvQDPrhkzUhSUIpLHEaJAGSEnnDdUqKLd+skHxu\r\nHsHZSjm5wkyAuu4sbcj1Cx5mrCg48WOkQGFEYmSTaIg/H9TzfVUWxnM7lMDG\r\neenMjJ82fkXFZDA6w58mLZbAezfVRTFW0EBOvIwz4RXDAl8UUH8jRY2/GapC\r\nl3y/tvl6BFhcCgtLqrvmbmmFdIVe/FngGmCuOAgrUatDBZ7vPAZ0MSWM36JW\r\np9sNDYsetMHtRGugSX2IN+4OXFaS9eatmfUrej3OZLqKdcWApNONHxcaE+pz\r\n+BDyC2mBYKY1GlKUwX1xCXH2vANTiLscsX22C3pTUWutw7F1YgsXv2bvLEzy\r\nxjlv9Sl4y1un0V6EAXVLbDVlgbQGL1dKvUpOhClrQpdL9vua0xw8HUKuUIKv\r\netkaUknGNJkETZi0aQodM+cVi1B63K0T1j+hut7NbTMHVHUl7vhZYpvkHHBB\r\nKBJLU8RxprcRItDuIlFBsPNho1VVidsECvJdSJ7rSZXEkCxtd0fzZrYLkEUi\r\nUt/qR7sAX+UUEk7eG1vqbh8SrbsgQ0QHokjvwd58ZI6rG+2Yx7MUfk+w+qfl\r\nPlnzhUOxU4mZSveijAQY0njilHdAm88HID8atV38sIVDmAVQCaEophQ7HzoY\r\nC+o2jZjt9NQG5yIZySyTEaROqolsov7+AJg=\r\n=zPyP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2-rc.19_1675447902102_0.37280708541637075"},"_hasShrinkwrap":false},"0.0.2":{"name":"rn-navio","version":"0.0.2","description":"🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation (RNN will be added soon).","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"4f698468bf8468249a5ac5b72be6c80bc1efe179","_id":"rn-navio@0.0.2","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-jIg89BVitsHCL9AI54/tIcEpN2yAibUGAFg7zIn+XmcCbCnnM0IlOjbeFxdo0dHIyIeOB1on5YWn23/LVY6IKQ==","shasum":"2d41d44fed5174435fd9ad32a424d4d18fb2a63f","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.2.tgz","fileCount":9,"unpackedSize":52255,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYP0ZH+uHjc8kk42aCUy/47X4h7AuPMk9o1BOk+bayEAIgK5ejWPwZFMxomogz9/vaJXXpOzNBKnbRviOar/jkSKg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3WDBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoS1hAAjR5quCI9YaTNiL2JdVk/87BTYrq02qLGPF67TdoMBAguhwwy\r\nJxFbV978nx6/3yo0CDX4jBU7MzDuo44NYuyBxZRzOeRgju5AUuu6J+5mqRNF\r\nL8N7Pd0LOvtK6Gry3CvYPk3WbN29htdAgVMResIvlfJA1Biev6tE9LZtSkdr\r\nSNMG+RMg6l5bUakd3IVZ48BuT1HWmOOIrUzkYA/a95C7f47XUnbOZ3zPe1Ml\r\nwir4onjfQdu5MkCo7VXodkE1y17bp0GheIknAHWymarr5vIl+R1m3p/cRt7x\r\nzyYy+ii4NeFUpmCy8/70eXHYZv5Upuucp+9NfNeFxdDDGcWx1lhuWmlaz/AI\r\n3Cb4VIF+GL0dYTTY3a21UxEpsLoY3sgcgoFl1YxsXBPu+W18zu/uia2PzyOm\r\n4kgKAiS1+4kMKGU+IOFt6WjH0o6ob1nxUdN8MfyfQOOa4SZiUXxuPKRl8rZF\r\nImVEbYihwMPIXGtw5gT6+UcHalj1rcKCfX6OvmP8/9INL1i1MMJ/17w8glPi\r\ncfLNBt+tCt1dmuuXamdLWZpvhSKE1SQagNtpQuH8ypdJYOMZqBRDen/pJX9n\r\nOHCuai2rPZu1UDdnnDlgVBEx9zdjDy8hLDOt6Yuel/U68h1+9BmoFgJF/s+P\r\nEgezHY+hfjJTh7S2AAulT5GVLLoKq+tAFwg=\r\n=9nF3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.2_1675452609624_0.9081079113670041"},"_hasShrinkwrap":false},"0.0.3-rc.0":{"name":"rn-navio","version":"0.0.3-rc.0","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s or `Drawer`'s screens generated within the app.\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stack?: NativeStackNavigationOptions;\n  tab?: BottomTabNavigationOptions;\n  drawer?: DrawerNavigationOptions;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stack: {\n      headerShadowVisible: false,\n      headerTintColor: Colors.primary,\n    },\n    tab: tabDefaultOptions,\n    drawer: drawerDefaultOptions,\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.3-rc.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-9bGIgS7VLnNeviQ3UJwhx/CHlBWCwmJi69pWcq/aL1iQEaz99htnedBgzVuDSl/bNxK9znGYMLGauptijjXQrw==","shasum":"a4d8bdf36bd3ec08cfcc651c56818e69607cdd3d","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.3-rc.0.tgz","fileCount":9,"unpackedSize":52204,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfvmYeDTrKI8WRdZvFAWqMyc0ik3nYIoMfpCV0BAGVEAiBwBbZGNs3hWIk+35gD5/HgByDnqYDirZZMdrEXWCJrig=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj65IwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFLRAAgzq5Lp0w1xeO1WkSX5W42BM0W8rqF2lySt8MdN3ivHwiE65B\r\njiWeFd6Jd8Vzu83/t5zkL50aTS19IUOkJaq5nwBNJhhm39j0aEpNrzBTq4zs\r\n9sv8Rk9vWGeuhi+7t84PFUy1tQJ/eTUO8X0VGLUPKiPw4w2btHQccT0eQcli\r\n+8a2Xw+9hibUvfdwQgSQtZdSlNWAqUPv6zpBtfkyvVx+9e9XKhPQkftyZtfQ\r\nVxlb3jSNPQ4dbVxHWIbE4qU/ElHcn5V9dU6EXljqpK9Sbwken6uthDZhM50E\r\n16t37qPD2ZDhVKZDiQ1oxm4buRa+1P775QQR4o5mvSq5mld469iETLvOyG3J\r\nfg4QdQ9QHDyR/ZznVk82VySi5d4tQGzRYuNgH+l/TW70cCPhvtW6WhQtncCN\r\nC+JSO5esS3sVExx533Ebfx3Yry4d+T9SLluHmqC1UTqFprieTWsIdKq3y462\r\n6aBGDIxiHZmrLoNH+uL9hFFDWbPO3oIH+BM/yoNgzVy5uUnE+JZtozjl4va9\r\n1a1QMeqvCmfPUWbbojVofZHRBC8G1cyzQyxLQk3A7LsU29pm5hwEaa9fzJ4V\r\nZ0wE1E5/jgQqNrv3YyfKKSW8x/UJ67VSXUPopz8VQWTLztpb2JF5fSCocegf\r\nLixiMTIZV1JSuJSY206wBp7RuLwRl3rLmLw=\r\n=R1Hd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.3-rc.0_1676382768679_0.030328702785605843"},"_hasShrinkwrap":false},"0.0.3-rc.1":{"name":"rn-navio","version":"0.0.3-rc.1","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s or `Drawer`'s screens generated within the app.\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stack?: NativeStackNavigationOptions;\n  tab?: BottomTabNavigationOptions;\n  drawer?: DrawerNavigationOptions;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stack: {\n      headerShadowVisible: false,\n      headerTintColor: Colors.primary,\n    },\n    tab: tabDefaultOptions,\n    drawer: drawerDefaultOptions,\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.3-rc.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-xqyOIopQDzpmf5nvjW07GgWMLFWi5m8a1QBp25mfOJ654midyPn3cnNWXCd36B8yNC6mdhL83EbpPcz1FXsdTw==","shasum":"009de288c3e2b9bea6bd9b06ef6566ad55b4c9f8","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.3-rc.1.tgz","fileCount":9,"unpackedSize":52204,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqTypFMrDUY2FbPPk2cqmzGNPV4TAecK8H8UyLN/poKgIgQSVKIBM+531RreQgSUI3pcjiv0d7Ky0J/eASht3nVW8="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj65NFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwnRAAlahyI1ex41QSSdOKUjdjDs+n3DIOTMLGptKaN07s1CU6zkRz\r\nzLO7dxMYHZXA3i84yBOT3a8Eood2qRKpZ/XvB01isHe+ygZm6Wpk0g2NAjlv\r\nIWv4tjmB7D/ZtoJh5KnY6BIoc4R7miBi41NKgc/AhYm3/+D+Z0ptJsIPlY+I\r\nFp4gdAvdaNl7bNz1G5FswO+V2eyInLSSxLRAAPOZQA31tSS4jB7cSNPqqPPF\r\nNZbJzs9T4MKcsgjB70HBVwzd6PTtDY+RuizlzrLi2aeVH4DjJRc0ihQ/SDur\r\n9IanzDT8lmXPuwxopg+sMwbX3NHOjZ1jMXnWJxf/UkPi2uU8OXIaRsivc4hr\r\nnYg6LogDsYUPy5g3SSUJAVNGpcCO7L5cbc4flGb/KWuPKuua47h9grYe7EQ7\r\noGH1vhLNYy8awVJeR1NFLfCQ4dVR6DQ2sp1zdzN8JymERgSamtW4VS99fEo3\r\nTaa4GoMvEdaX8NdiwNt1CmFjie4EnEcqT84XUb5XqBSKznwz9yLDH74btgup\r\nNj/oSTtl8TxnyO1KGy58XkjPY6kzEv9QxTvNWJkeyrIz2jB9QC8dMidkeWWC\r\nyIOrCCp9Kc9h/2c08qk9sDeNT62fbShYX/SJwSI/vrDpr5cv9L66kGV8iDdl\r\nUMAjtUY76LBn0E8eWuIW2Rb/DbkCV2IRPNo=\r\n=RM2w\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.3-rc.1_1676383045453_0.09760308602109746"},"_hasShrinkwrap":false},"0.0.3-rc.2":{"name":"rn-navio","version":"0.0.3-rc.2","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.3-rc.2","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-pfHIWZFXRcQpaz7zlX99vRUXLlR39ObS/5dkZUZgd1Oq6OsPuNbLw/lCIUC3LGmZaBNwoshD7EdBIhgQROalBQ==","shasum":"28110826e0c662da23e36323afa556ab8848d3a8","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.3-rc.2.tgz","fileCount":9,"unpackedSize":52204,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF14AXK/ojVnEo+bexhft+1Zrwd6vBLWKBsnamqV5rfoAiEAwUMAh636P5QfFLSqQSAK1EiskFsrSxzmVcUWqzkHjjI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj65Q5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXcg/+KY+jg6LIH4KF1oFvYldKUxXGZwaf1nOrG0O92pyiq5pUMbYA\r\ntx5ADjBNl+c5g8grWxjlblYkdyDDX4s+fAM5PRP7EaHJkIzhpPcoiY8P35AH\r\nNhZGC0itYYDwgBPPYJBWulcJLTAwWsWO5fTGkysK4fN9cHO13vFsgk4m71jb\r\nFkcBKqTGbdapsMnYrePj3am44nulavxktje4+4DOP9KeSGKTG60PJMXTBUMK\r\ngDmq2s6XZ1emPNrNkucqhp+pcF3BJPa83XscgaKjl4OxkPp3mO5KyxOVl7fQ\r\nTG45amZHIIh7N/Ao2vOyfTH2y4GMJXTtWLYOfZgwmdI+jL6+fZgoGV/8BAOe\r\nEtsGqSDX5GHczdOPE2DVYPX6FLh5i9Yv5UasEGX/AY1dH7XnC2AXsPX7RLbJ\r\nnQpMX5Fo9Aghd/kcB3fV8DOMk1PiRkKs2cg0OVwXtAfO0a2EmpBStSIxuxQH\r\ntVg7EbpLA284xHrrdspCFsOXc/nqw2k9a7vkbOgjO+2J59xiJEUg1Wng6c0k\r\nQ0KIZycQqKbujbDs7Sw6r3Y2VWWBrO4rCwdolRy9rO9wchOIySBRI37xjgeT\r\nsnHhHbXighNFJ3A/sChACUjdCf3nuBfKNNctjXgvSaiCvYeK3i+9i0Uwdu+I\r\n5ftvDeDK4UnfboMEurfMOLiXmUmUM2sioF0=\r\n=NNW0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.3-rc.2_1676383289704_0.7246492193344272"},"_hasShrinkwrap":false},"0.0.3":{"name":"rn-navio","version":"0.0.3","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.3","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Lh28XRoVIQtAbz1O5+3q7jIHQEV+V3qz78K/HaCAdriiQd/WfTsIrN+qLjk2HD4wB7H9a6/XP2ynNEh3CFLIEw==","shasum":"3b7ed3e8296c45e6f34e9abf5abd6d541d86eac4","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.3.tgz","fileCount":9,"unpackedSize":52199,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHwRNto3Dal5E548RV09L7oLwUuiLRGJcIjHikwx3Yh/AiEAnEkum5omkzqcX2c92CCx+4NMgGJE5ZAvCLG7zCgRIqg="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj65RyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfEQ/9EmsHoIx1+9T9K1hX3BVH43ArEfYxxjRgQ2QemTS/+zVf963F\r\nPkZxwHzdi7xouUkR0mS20qJNBv81zEFPzZAc/eECtI2I3tRalmXgGNvHkbsu\r\ne+jS31LwfK6663h7GLHvVwd+RJjix3bTbJNCUk3oL5SU0jh8jIYgtT3kmlLt\r\nJjgIlFFWEcHS8LYV0YSVNBvn382L7l6DrmaK1KyMGfCWFmX9bIiS/6V50/1i\r\nv4qGgOE+tbVYqcXuDr4u6dnIMWGEdP51qYVX4VUSf5c/B5MqE8OU2xBAbEMx\r\nfpUFqNAupoTkhiMPiuB/J8XUBF/aZCFSgWAgdFKZ9228kzN+oG7ZKfccCGSa\r\nK11FIMBb73evdMa5qveqeC6hUCVdTjkKyfmnpkmUFAccFlRCoYsh3mLFWsB9\r\nfTC9fAhnbaApLDCFKhTVUeUUhTowT1JRgX4MqIikbyRoSMlWvXOM/pgK26sw\r\nQoUO7dK4qyEgEllaS6LLTEr/+GkFS7Rrqq7aNkLW07p71BZPrV45VH+Yb4xp\r\n7HRNMGV6WUqxO77H3SjoaPPhnrTQTFN9vnacGSWJeRFjPG8p8UbpUFXmmRXq\r\nh3YTLtFCSmNoLYvC0q8yRKBifwxJVcNNTjSiKXKi+5TZoMFU2CgmfkXH7UER\r\nG6a539JHWkthKDViBPiZOI6UknJ3Qoy7d/Y=\r\n=Q7mO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.3_1676383346029_0.6216293009192131"},"_hasShrinkwrap":false},"0.0.4":{"name":"rn-navio","version":"0.0.4","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-NTgK4d45Sjtd+R9ZdIKYxNebzDu0roBdfJWjTnqpdSyNiuwFcVyr0xpaJ7N58ysNtRhveQQ9sUjmaRaBan9RJg==","shasum":"9f5b7a0c73bfaf5eb9ff74407fab17015bb70b5a","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.4.tgz","fileCount":9,"unpackedSize":52199,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7Ck93lyR4AMTYwQGX24/2IyuEEX66UasQbr46OkFjpAIhAPzvyRpvl2Ag8LVzylcjC1+fZYVaI5p733ok25U0OoSl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj66FqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqs5w/+KYkccYseZCGuJ6KvzGJ1Mz3k67kKiR+UueoSrmgTL2KmkfGv\r\n1wumJlnMGCuzzryI71iW0gxMubIFmzpob3n/+JuIQBHAk4tBF+6GSEUXUSGx\r\n7M3Y7ufycKYXG+SkXEWTrJjXOsgfuz9UFZhrVmvZtttbqfG66TzSwmVHEWJ+\r\naCOjIoIjYB+lvxHkNPYwh4TeaJtFMg8ALIasuVJapzHom4t42lI0wg4c8hWk\r\nTWsR3mulzs0Ay5hYB+cN2oTp7dbJn772GXeYYdX0j9Cvol2FXOyrJ7Hp5HzT\r\nJzlbSr1cKE4RbPOSFhySr9ayijsFWnopHrP22UGsIkzXyMQ8D7WGguNj/8H5\r\n7Z6Xy9vY5njfAxwDnj3BDceuO9TfqvGuROn/Y5QxUZ5KDtLzAVlMHgnKfRvm\r\nB812BWbXAs6H5VhTAyZ5h22d+a4do7mkyNOopBz/mw2uZp7Tg5KjD8dCVmkm\r\nG6ED+MvxC1sDcEmuHwXtnJwxAKhC3QrkJe/Yse/m9bg/1o4w2eGQmi50+Xob\r\n3fWSLDxXq55YUcvSy/yEGlUO+6fHRBar5Q/nwU9TpWYw24FVVnFarahkP28e\r\nUvEcrLaPPWvJNfvKZBhWTp+dJTGFHHvWnOmAWUvtop1gAFCWB/red3b07OK3\r\nxJcu+PD4v3FKZ/QOgVC06zrcgbwTtbuFVMM=\r\n=YV25\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.4_1676386666711_0.028763267321777253"},"_hasShrinkwrap":false},"0.0.5-rc.1":{"name":"rn-navio","version":"0.0.5-rc.1","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s or `Drawer`'s screens generated within the app.\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stack?: NativeStackNavigationOptions;\n  tab?: BottomTabNavigationOptions;\n  drawer?: DrawerNavigationOptions;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stack: {\n      headerShadowVisible: false,\n      headerTintColor: Colors.primary,\n    },\n    tab: tabDefaultOptions,\n    drawer: drawerDefaultOptions,\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.5-rc.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-Ecux1v7VQiQO5xe4IzeXzRXhZXkP+rOMhpBagfH+ZjYT9PNlpMPNCOSmOxCG19HySmaDX9UmMXE15FjCikmfkQ==","shasum":"0c9b337512a4fcbaf0aeda0cc4be47a180a4c506","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.5-rc.1.tgz","fileCount":9,"unpackedSize":52005,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFRb4MdKrnToHAEeM1G4PLPpATzE3G3A0H/FykvlxanAiEAzKCPZy6gatwMYi46w2xhe+lYSBqClkyA0l6+tGIBHcs="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj66ZSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmriGQ/+O60TrltU7wmIlNQRCanpCskjg7eKwU9COyFxwhQ9lD4gi0f+\r\nGqYA4jcLkgbfEeKmCa0oOm8R14sT2tNbkZ+ActeLB17XyeU9HT0tMPdN5U26\r\nr5tXJUfDx5JYL8UqxazbPPlYTr2w7RZP4oR1wfvN03lADUrkujxll1jkCdpJ\r\nURHs2VmxRyOQKMQzQVXKJbrX7impq+tWVFA5d7WJGNsfpQYwqmHN1DZ+KZYC\r\n6X+UN44eZpC4jhNIkPTAg1IvAc+sA2etnWlsV2/vx4idR5qzblrn6IrYRgcZ\r\nSGp82rCjGxUL8Scff6lTNG+PEy5MviTeGXlsIEGqOxqUeOtuh4qvjoG3roQ8\r\nkKRdtRnqJ17oEr2x176ya0pPW5XrNbjCosXIbJqDaxIcHY+ivxamX7YWiZDq\r\n44tiykGUVqRqvn/UVfrAEjJwyzOFD0OOKpEbjky107RvBuuP+vFtfrMNrzB+\r\nAqkhzFDeTl2UrvO8Gp2KzR08Ij+pso2uKdEUHKB1oyDICgad+5/1qB5/Ate5\r\nxVSI3WlyGylL9o4gFjpYnFKI+Op0fEOYhROIHbH/DTon607edevA5IKS4Xq1\r\n4IMaGSMgeJ46umIbWcbIIV9jEk0QlJg6Lrq43F21w5osV+3lvrcisyEDQ5gH\r\nhoguV9Ur2FI88jiaJVxXzLL0fii4PlKL1oE=\r\n=PAWJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.5-rc.1_1676387922619_0.41909052115716783"},"_hasShrinkwrap":false},"0.0.5-rc.2":{"name":"rn-navio","version":"0.0.5-rc.2","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s or `Drawer`'s screens generated within the app.\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stack?: NativeStackNavigationOptions;\n  tab?: BottomTabNavigationOptions;\n  drawer?: DrawerNavigationOptions;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stack: {\n      headerShadowVisible: false,\n      headerTintColor: Colors.primary,\n    },\n    tab: tabDefaultOptions,\n    drawer: drawerDefaultOptions,\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.5-rc.2","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-kZCBJHmyWlgHv3BwyMn1sSaNLdosge2yxlhIJ13ktUsdxpwCfnqoAA6GRuu2l/fpfDNCIqCdnTMQSNIe9wqR3w==","shasum":"88765448b877b2133482e595cc56de731d0292cd","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.5-rc.2.tgz","fileCount":9,"unpackedSize":54388,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEndX266ZRWabXCIegAr/C/AL15SPlZlpR11zbtnMhCgAiEAoHW/dudXY7g64JZUEzRpSCzGw1ufp3TNf6sem6kmtVc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj67xtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/xBAAnZGlt5t8A7d62iEHRwRg0QCLbHdffrQUKj427X3Sd6KoUuvk\r\n51hdT3UZ0/LDCDKxJHfRCAlzMiJQ3lj/o17T8x6Ec/EF4Kki93169bQdoPu9\r\nY86wWu2ZOOybJQtoNvipk0kFRv4yXvQyD5qfzbv2qWtf/LygLo7NCiuwOQkM\r\n8lWTc4CyDfEI6CAmnBzTSOYVIZAk1FS2K2b+/Ua5Xz3QrcsrgEtCzDwuPWl0\r\nAq3uYQDW77qULldNZ+H199DSd8MAMujlfvEdl3XhRMELx/V9bn8/WcNH9gpa\r\n0OGYs8AlaQwRg3rJ4Rqyi2h2PqKvhY7yXOsaUSeMGi6j6tH+BN/vB4aMxDwC\r\nr9OoU3lkcexhglheA0/6iNP32yNtmqfnHGrw4E9k1kCX/0HOEU/x7ukLoTsL\r\nX8Lz2+dh+Yx9+joolOLpME3/aGLT+WtJ0rzPCCSJPomBAhTlRdF4qGW0SsR5\r\no47JhgLdn+9f1CTPlKspoEATemgXT0DoP0wQF2GUNXZhaU4HfVfWfHiBlMa3\r\nLqeAbRIqo5zGr3LvJFvAHym22vPYwv9TdfyfQb+bMNVNxNMcwdeTjE9U2KzF\r\noG3aZO9wyKc7aOlF/CBHPOf17N9WXl5foqxtUhWn0GC+dIOscGolmkQL0Cf2\r\nvSmM2DB2I/+oh0P9aOew80I9rElsTxoVzEc=\r\n=4q8/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.5-rc.2_1676393581457_0.9049439249656912"},"_hasShrinkwrap":false},"0.0.5-rc.3":{"name":"rn-navio","version":"0.0.5-rc.3","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s or `Drawer`'s screens generated within the app.\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stack?: NativeStackNavigationOptions;\n  tab?: BottomTabNavigationOptions;\n  drawer?: DrawerNavigationOptions;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stack: {\n      headerShadowVisible: false,\n      headerTintColor: Colors.primary,\n    },\n    tab: tabDefaultOptions,\n    drawer: drawerDefaultOptions,\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.5-rc.3","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-gNS86er6eFW9ktK9YqoqoknVLDnDSRMGfeFVjdyFDYQdxHBy+FNDqnNm+zoW+30u5XadGQPGhDb2ni0EmZYh8g==","shasum":"5adf818d66ee2dba2ae4f2ff2d8324f604f27420","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.5-rc.3.tgz","fileCount":9,"unpackedSize":56357,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHS6BJcKS74hZe4KpXBhXhdW9hVx7NMp29neuGremRMWAiAyPhF+dxPUkq9KOm8cKrkRFnHeQCAS0u+vdyNt7p0KeQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj68rpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgGA/+MQQpTFZIuUbwtHVTyh4EBYqNoaLX2Iuix7wVgCmyE32zt2sX\r\nBaXPp5V0nanMYDES23EZAcUXrCr3pRQWTtHVNMcdvYT2vq68aAmGBfuvOvvL\r\niiJ8ZY/eICig/QJmVoituTtJuIJoQYASTe3AN9JPYp+S7lIxQAxiJ+T14HDl\r\nYbFEE9lzqagh3gGg5ltKvPX8LLfKijUdeLRrjsVmR/ZMol7vNcWLSxPQzPMk\r\n9qO2IiEVYmZGSv7oWlSinu9ArPLS8sfjKxZNdjkuAgOjvyESmtqPpcbEhu/w\r\nVPGHgF4E2lFQQwIlIIOiMq+qp9i8mubOe8Q2Txszda3jVs1+/Ll68SJt3K5T\r\nwikxjV40Kf9/pzEy6JHcGuvlxf22+CvPFFLMYxwljZQgwbN7c2JoDKAJMOWb\r\nGOgh/KURb/4oM7F3PatlWk4lqcpMEqaczIVT80m1jc3sVrU9jbIcBqR6kYJB\r\nIAE49iQnoP7qaEqYoQTEm5Bzxn0tiRliufYMw28D5XHpjZYUlmkJRzMEurr7\r\niKbN118BrkU9gPKWAIIrGIufVG06IPrL18FLfC2lId02ZqZ+pU7BvdvQbtss\r\nDCsV9wjrRFdqlO8KdsMuaQ7AtE2Z1YzNVYSEzqW6zQMr46c8brDvgUJ32oro\r\nzZ5554J1q6GmuhOgaRkQlxH4PxbCKEg1WFQ=\r\n=yVG9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.5-rc.3_1676397289569_0.7205047636533886"},"_hasShrinkwrap":false},"0.0.5-rc.4":{"name":"rn-navio","version":"0.0.5-rc.4","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s or `Drawer`'s screens generated within the app.\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stack?: NativeStackNavigationOptions;\n  tab?: BottomTabNavigationOptions;\n  drawer?: DrawerNavigationOptions;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stack: {\n      headerShadowVisible: false,\n      headerTintColor: Colors.primary,\n    },\n    tab: tabDefaultOptions,\n    drawer: drawerDefaultOptions,\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.5-rc.4","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-S5c2myxtzklByuuKFRM5DYb5iRjl5sg2T+wmn3BX+DBNniMuJqKJrAZ5Hqt1uBRIstKrxvFb7a0LQstp7KRhNA==","shasum":"072a7b02bd4b0aebf8a0877b49c845a7b3856bfc","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.5-rc.4.tgz","fileCount":9,"unpackedSize":59000,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQweSHqdbR6uHjGD1JIsJVN+gNRF90jGI2nSru53VpgAIgWgFBkQV4NhT/NeXtLK6MG/2vgHbG1nfK5m0ERYy28Ww="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7BH7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkQg//a0HKfiR5N+P6HvAmQuzxSh/UV8V2klKks6I1TXmjpADpEgoe\r\nFybEm2IScD7Y3FspcThOYBjdsb0tMrzA1YFTo9E5ncP+hN9QBwaL6OkOYrDv\r\nrI46UVC0k8ZVfQo4s1flF+pFxvjyNTOH1yWMdUXX1CbZxh6JOQO2DuqBeDK0\r\ni1xyyZEHKJXr33K+P/8v0qicgFEgsoOYQoS2fyn1uDAdjPvqIpW8JufymWyn\r\nrXfBJ7aqwEBw8i1AoEqbymMMfI2meMXoY/i32H1+pAHjNnHWl5bE/odMjVXa\r\n7PZWiBY/WoXx5kZk3AhD9BLbaPyvtp6iKDKGSMg45/fmiu73gyQd0pOugBaY\r\nBPjI6E4RcDDA6k81aSUCiJ2EsdvtudRH9qSM5gEI67nRWIZVVlt7ul44gFIq\r\nDSO0x71kRYrmpORO6WXf68WuXbw6Xh2DOC++BB0kxcURzNBMwsVJj3BKS4/K\r\n7ZoeZXHSqXIRidAXDoOu8VOz7KziUVgqPJOTq4GTyXvQKZFbSD+jGtfCEgbw\r\n3XRaaFgqUUDZFv5XAAepuYPyTxrT1wCktM8395Jilqv3YvR4IXVgGMrAt4EP\r\nEiUbqrJlPJG+dcLbg3Ceg6xY/KacdDelyagQTSvmiPbvfSgzlWBoiATjvFyw\r\noVD/48fiVHVEtwkhQogadS5tx3mC+SkHYic=\r\n=v55e\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.5-rc.4_1676415483205_0.8854671754059567"},"_hasShrinkwrap":false},"0.0.5-rc.5":{"name":"rn-navio","version":"0.0.5-rc.5","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s or `Drawer`'s screens generated within the app.\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stack?: NativeStackNavigationOptions;\n  tab?: BottomTabNavigationOptions;\n  drawer?: DrawerNavigationOptions;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stack: {\n      headerShadowVisible: false,\n      headerTintColor: Colors.primary,\n    },\n    tab: tabDefaultOptions,\n    drawer: drawerDefaultOptions,\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.5-rc.5","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-J3LigP6blWaJlBn3XOy14wlmI/Gxq0r/AsBxuGP6Uw6nZfJhG5i7MJlW70uawW+zzNb/QNoqXy4IOPNpMb24Zw==","shasum":"efb77ef96d0694d6766bf3f1af7505bad8b72e3f","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.5-rc.5.tgz","fileCount":9,"unpackedSize":58956,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkrox0BEq+/deU83Y3nxWGvKe4sSUsd9MtmGH2zHyfwwIhAKX4wmb2XPPLP4tS3lBNQ83oP4BndP8YoxjtNQEaUl+D"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7BMuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqO5BAAm+Rf1xJlSMSYJFZqUvRE16tREAzmdaoKYvJ90s0YjyG9xiRH\r\nW3wlgq8CQDmMJ2Wf/ZFAj3WtGFMScu8FNucIiCt8EGObiNNNuHyucyV4KRSI\r\n0X31i+ADUL7lzOBxeZK+mlW6FefQIUs3vRcUvD8yoF1eIR1tiDZmcAfCv/Q7\r\nqrKYhCSQeD3RdopeapBIRXmZxIc7WNjlhUXv5CRhms4Hbg9Ukb1THR4ygEKr\r\n1eG7UNYWQHxr/JJUGrtanXHAG7cce+9xaZL3lyNqqLxjtYzHAr8s3KQyohhE\r\nhPi62B8vbUeeKer/KNnzHjESBndk/moq1BPkq5+l9KEGqvJSoLj5bXtFdby0\r\ntIK1j3Rm1B/9qz3hxUvNuGzWwL+S9szg2CKfA9kNohZLb+NkJhK1JuGJshHF\r\n0bY7bRqbCRbPb53cUrzk4m3MdWOjsnAZ+TJ0d0RIzizavU0t0wJUIvjOxqLF\r\nin+yeL7OAm1KfPKQ1wJrQyVu58vP/63VrvoA8pyL9zfZm+TG/ndOJdCtpGX0\r\nTyp/ivSPl4YyvQbDxDdWXahKciHm9LkKB74CjnpDMOcuQ3+SVngRJOWT0+x9\r\n43gEoA6ryUS37QmPuqCH1YpAFw+0ZDNO9koSLZg7y1PsMKtTu20/YaHXq+FA\r\nMeKTFu4nTOJduzlQA9uoikMXFxK2HCmdy/A=\r\n=k4LK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.5-rc.5_1676415790352_0.26375856339821957"},"_hasShrinkwrap":false},"0.0.5-rc.6":{"name":"rn-navio","version":"0.0.5-rc.6","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n  options: {\n    tab: {\n      // default tab's options\n      headerShown: false,\n    },\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s or `Drawer`'s screens generated within the app.\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stack?: NativeStackNavigationOptions;\n  tab?: BottomTabNavigationOptions;\n  drawer?: DrawerNavigationOptions;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stack: {\n      headerShadowVisible: false,\n      headerTintColor: Colors.primary,\n    },\n    tab: tabDefaultOptions,\n    drawer: drawerDefaultOptions,\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.5-rc.6","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-PFn1vi+0AX4wGlxqZ6/agx/I6lrobti/R7FWPYqmVN79V3hTx6cb+WB5LzOg5/YMgazTSActKZ238JuIWVDpMA==","shasum":"186806a3dcdbdf64d8dbdc7ccdfdde9bddbed80b","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.5-rc.6.tgz","fileCount":9,"unpackedSize":60126,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFxamxC2GWZ6IUDZJrRB+9ujxFl1e41mUsarQgC/dE6AiEAoQwagSAKTxItNduXpgoH6E+T78cIxhNGs8Wc+2MmwxE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7Bb/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4gRAAhMsT5JZxIx8gp7YqsZCSQ0D24jQ+SnquSIOcnGyzFnG3dwux\r\nilXKk2AtfJulOaqW8UwkuzG/FOjpiiohdFJm5qoAdH2wxud1N1DJs3BZHG7x\r\n0XcVC49+E7C0Nte8THQeU2ko5fH+uYQxTtw0KD5SQ1ds38W1nNjDKjbztg8T\r\nWJS3bD1S/IZUg7N4ve8rMe78YXghZ/+8pG9vkg3pBxMHzhL2jmCp6u8YYBYS\r\nmqk2ketqjneGunGVTu+drEzvKjeAw+Upg+aqiqtQIUo20o9121U2khnM3QYn\r\nS3v5XoSgtLtNSyPO9MlS4iRbX6+QO2iirXUeC1AhNzv34Svwb93SalBt/71E\r\nl+b23JB0bN53IXigy6ndw8HuHs50Il2YkMTx6kU+3kIIkA/FigIX7ii6ikxq\r\nLpmWXnhI8MFsV7AEt8uhHCtkEIoZZbiQsqlM/0Rh3CSBInn93MnwcirIlCb7\r\n13JoUWnKfs8TTSmHKI0QB8Wr/x2z8hxMh1IG1FQ00mRfgvDxfWy1aj/foF4S\r\nE1L7QhQtkVgX/w8EZENu/ajE57XjBhDZu9nTDltSjWQRCBTyjmC4zTFNq6GK\r\nNp9f41fdwMCzUEZ1N/E6+hA+4P779yezu2jAySBSbOWUeytQFfiRp3P/LOS0\r\n4dRIbtBQExTgLV3weON6NBvGGteHzXfGF/I=\r\n=FzCR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.5-rc.6_1676416767149_0.012321839428330206"},"_hasShrinkwrap":false},"0.0.5-rc.7":{"name":"rn-navio","version":"0.0.5-rc.7","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Drawer\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/screens/index.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n## App root\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.Root />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation with the app. Most of the methods are similar to ones from [React Navigation](https://github.com/react-navigation/react-navigation).\n\n### Common\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] `.updateOptions()` for all stacks. It's quite hard to achieve without any re-render. So it takes some time and probably will be relased in v`0.1.0`.\n- [ ] `.updateProps()` for all stacks.\n- [ ] Extend Navio funtionality and app layout .\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"26ba499d22efeae4cfe4fe4a86eebc0d1005ac50","_id":"rn-navio@0.0.5-rc.7","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-hcOctMBAdbCw/ZBCdJ/qYarm037kVDObJV/ImCnY33wTR0+BmngKkfLo316V0a2/R83U2QtF4Xwjip+V122vQQ==","shasum":"3593480008c23a2e0424d114d4f386a941c87751","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.5-rc.7.tgz","fileCount":9,"unpackedSize":62039,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmKH96+AoI0TXoF9CYnBFiOezhwLKRUxPJ564/vlcC3AiAaT15lZLK7tVMy8Ap5S92WmvzDZP5Os2bv/NZw5cJq+w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7ChNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrIKRAAjAP4G5lZ+lwAVowlu4yULEuFdLPZp1I/LrtrbjGmzuwslVvz\r\nEK79UoZ48faf82f7LGv2/rNQx6f1P0aymbdWQAyGWJziixgYC/Y0Lul60kj2\r\nGTCivmQWZS1rdO4c16G0ekyxb9VyWvTLDPqp9oqHbmVD4s8vws43m145g6wo\r\nBvrVNjq+AHoS64pPjxTdgedOgfoqxeOA5E8gFtzh8QHN98euKw0koe0LdhZ4\r\nfJsR3IQOwVG8/idPPgNEXvJs0ABe54WsJepVFB+e0MavdeiBfo3dQlbEUnW9\r\nyiTbWHuhyx/DWZVVZmhPdc2ZYyZltBSL6OaFISpKK6XNad6uIUkNRhLpLm5Q\r\n7GT1zDRs6oiHEu3fCCXFKgyEQgkO5NcVah1azR15NWobg4cjtC7GUznpeDnb\r\nLZTksGATvLPBDz4YWqRLdODLh+qsJ63nV2fgSRoIIYJ4Qw0hSQTpaYz45uHl\r\ngAEk8WHkYdKKBXRaffEmyoWLhcNjSF9+VxBFG+lnu7FrgpOL8YRDLVIW1m7v\r\n+7D9acaa7Y6c3W8ClFyqw94eR9yJwYW4iTTdUBCRxu7ihPAXeKQcmb9lekXG\r\nOY0NoTPh1VChR/VRke1cjy2/W0flr1aWEMNCgN67wd7KaOMwb7KJmvs1HHWj\r\nLbu5dYGQvQalVbnDd18tQXTupBMVWZ+b41w=\r\n=OR1t\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.5-rc.7_1676421197821_0.5390826761637233"},"_hasShrinkwrap":false},"0.0.5":{"name":"rn-navio","version":"0.0.5","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"39c8e81844ad680a3311b2013dc79c5135ec3096","_id":"rn-navio@0.0.5","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-O4hqh9hWiJbuaWCsCnXy3OSht9v5OsbLmi6yEU88Yr4/sxeXYRF16im2D6aCtaJPIuCdjUJYnIzlmHhThZkAzw==","shasum":"b0031d6593b0a5ba36d642b93af8fcecb791fe2a","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.5.tgz","fileCount":9,"unpackedSize":62034,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLlqA1SnCKjraIBJDfcM3yTuUxCZrC0Unn/QXVIs73TQIhAOl6W6lBljbS4ILt7a9H6do5Baze+XGyI3Pj8HKKvsqY"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7CrXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj0g//QUweNsh3AoFGF8sX4XGH6PhO6TpBgeWxfGYm9XDvCBopC95h\r\nN2yI74/duU3fyo7+I3SyOaKDjvWJ/5nNvNNSxe0gn0VJi87N3yuKI9w8J035\r\ntpyWsUNZyWOs7r+kY/jNjbcHCtoc45v5FurnajTkVvlmRj4UR8R3mzUVzi7z\r\nvwzVgipVnKZhFT5eVtaQZdzfdUGQxXVPF9W40Z2HuNaX8Wmf2++AyPDFQ3Id\r\naHtpuKl7HS0Rx2SmJzOpXkvZaq7Tz00N/t9m/oWE+i6lZi2Xi1iMAjlXPB/t\r\n7RTpPAxPW0GpJSKboUf3vjygWpsTLieOSnmn+f0YA2P0R1gWlMJPv0Of0qMo\r\n4vXkHH0rhNyCC0mJUNcuC6YuxlkQnx/k/CWZP3OfyKNMPcz3cHvSxuYKqsYz\r\niDRJYoUrqkKYn8zIXEJsEYp6G17Plgkb7k/4y22mZ/9K8BCZSDhC53+/2so/\r\nT0yckCXMaBETMamBUMaRQNL3lmPYu3ee6gLt2k+g/Uyf4txhj//zJRpMbyoG\r\n2RAg4IHZEsOowEDvJ3GMmMmjEiGhD10a+nqjGkO42kvem3gVWr0Gghs9x0o9\r\nXpyWnlMX0eaL6ZU/X7TVz8tp9PctOmEPQqhWe7ousRedWQTtTOimHYqtVdlz\r\n7c+yFujCAFwiQcSzIUKxcdCkFJk7p0wArFs=\r\n=Jmyv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.5_1676421847715_0.3313546196255215"},"_hasShrinkwrap":false},"0.0.6-rc.0":{"name":"rn-navio","version":"0.0.6-rc.0","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Usage\n\n### 2 screens\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n  },\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Tabs\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n            tabBarIcon: getTabBarIcon('PlaygroundTab'),\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: services.t.do('settings.title'),\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Drawer\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\n\nconst navio = Navio.build({\n  screens: {\n    Home: () => (\n      <>\n        <Text>Home</Text>\n        <Button title=\"Push\" onPress={() => navio.push('Example')} />\n        <Button title=\"Push stack\" onPress={() => navio.stacks.push('HomeStack')} />\n        <Button title=\"Set Root - Stack\" onPress={() => navio.stacks.setRoot('HomeStack')} />\n        <Button title=\"Set Root - Tabs\" onPress={() => navio.setRoot('tabs', 'AppTabs')} />\n      </>\n    ),\n    Example: () => (\n      <>\n        <Text>Example</Text>\n        <Button title=\"Go back\" onPress={() => navio.goBack()} />\n      </>\n    ),\n    Settings: {\n      component: () => (\n        <>\n          <Text>Settings</Text>\n          <Button title=\"Jump to tab\" onPress={() => navio.tabs.jumpTo('HomeTab')} />\n        </>\n      ),\n      options: () => ({\n        headerTitleStyle: {color: 'red'},\n      }),\n    },\n  },\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.Root />;\n```\n\n</details>\n\n### Advanced example\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"cac679b3f433a6bf583628f4762d693b9779e182","_id":"rn-navio@0.0.6-rc.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-fh8ty/neBcWOoQfduFZ069LBpslGAbftF7xT0C/H3+e6CRtlNFvvz8jaGYfAntXS4KC5kZPsEHw0B5S/6QX3Rg==","shasum":"4f6162447454ba88f2f56ddee3399b77ca9736a2","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.6-rc.0.tgz","fileCount":13,"unpackedSize":64058,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDK6fDG7z5GhZAPFmiS26f0YzNEKSxm+pzfI8WudwfiJgIhAI8gAbPf//uUsCznmrL1WDc/lntbGgAHGWatJnUtY0+j"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+NQvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeFQ//SN7qTQ0aCbqYH0vA0t0Jdq/fJy6modzYUfi165vz890RZOla\r\nlnRVUWs0jw1ZEQrSpiO+murTLA+DqBthbJu7/wr9lm66Ji+2IInnVXC0Mn3i\r\nSTNfQ1Y/p9SHAcxamKrMDq/m1dPXhWL36RWITS9lYnYht5s9iOjXNGJhHlIM\r\niSZbK4wXFUd3Fsp+qtGhQKBt68uDRHp9HLM6G2QS/UXR2witlc3sI446SlQg\r\n1hLIJUILdC5bjngOEdmXI65J7SOXWeOK92pKLjUzE1pMKqGxCglAr8Gp7YcI\r\nP95ecAKvCbOxg496EtNP0GUGNUnFqjLU5ODFPJ4DLofh/LR4TmPByExNit5X\r\nGjDu/xLrE8/a6BrtUu0NYt4eydLWnn3AD5sLbd6Ho5Tu+TNRuRphczh6Knzb\r\n9US4e60qra2PGrdNoPz5CrQYOj2mKmVrrCldhqUaFp6NzKJyiXhB7Mnz+LN/\r\naRRB4LucZw+lbuLHg2IedUE/1AXJPN6tjohPmwgHWTsNv78i0mJYljmDj5u0\r\nfRyoNXu8Kqv+zEi86JsltS+COB1N1GztywQxuxeZXOIWcH8xzU3NWZeQ19Z/\r\n0ou2IZucptE4PrI3mX7z/lWrGkML+rehlyU1hSrVVmO77+QEH/I7jgT3/wC9\r\nXkTOvekid/UaqLiS9RIppEPP/yck4ZY6p2o=\r\n=YVe/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.6-rc.0_1677251631635_0.2658600258006887"},"_hasShrinkwrap":false},"0.0.6":{"name":"rn-navio","version":"0.0.6","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"8258d5d4a178786dea8130d639eae572ddf077b8","_id":"rn-navio@0.0.6","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-OaL8FvVEcdq9q5hr8KM8KYiHEv2RYVomTxlibHrX13nkTVqTuatHh87Y4lK+9yJaZdHUA0iPgkd0fWgmziU0JQ==","shasum":"7a6102d918413a254afd263c4a06f309278bfc98","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.6.tgz","fileCount":13,"unpackedSize":64053,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBa+4nkRS8zS55KxpYPqzfbeljfTbIzUC5Y7Xt9bqi5EAiEAm3nmckjlTLVFbTArGKJULO+p3Bjyb/IO9qWH0XXBC1w="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+NrQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGjg/+IjC7H6JTwioNgx4QLeJAkSW2nLLXIrhy6omLWxvs7b6TAM3e\r\nFLy8JdmxeViBHAOOw8wUeVRmlDJQk5tcO/TLytAGJBPxK0qgwWC9xms0SV/C\r\nKHTGtoJuou6eCav1FhRvAEmQHcO45kCsqsHOaQstrI/XhokCGA5MeXYOWzkb\r\nNhCSXYCNTVh6Fo4tRZOg1bKH5FwXcQI5ocf+eBjmo4YQr/rYiobs4/ppZ3qz\r\nOg/BG1HTlzp2mFAlYy8vktVzTzXiwV8QozR3AvP7JV6vfGIKHt97sJi7ZZsu\r\nlSNpcdhqndL7KGy4qluT0EWefDes4s8nMQXtDrlGI18ElOsngm7nQmw720pL\r\nUUMg7NHuDakbjHunQo1ilUoeVncZGHp38GybvyefpvqrD/cY9B1Bbv3fXRlT\r\ndNc9ZVRA7J+LwbPZVWhs7iZOOHPiZO5ZYJZJpGd7ocHnOck4qWczwWYhhBlB\r\n4YSokAcvSW540d08dQOZd30jCP/oc3PGMi6FQNkYfskJPI02srQhHCtCdLRo\r\n2VgfCzJrgM4BontKGwI+Whbbwi+U5US216Z6x8ZIcVohQkQjHuws5n/KP5Ez\r\nGBbl7LuGt4kN9VacEF6x/zQr5ZZ4NI0GsZswk7UJzr5BeNM/5lVV9SbefBh+\r\n5CJHa3Sa7JZpqr4rYQIize9Y+KWPbsh7tJs=\r\n=N9oL\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.6_1677253328250_0.4895438015040867"},"_hasShrinkwrap":false},"0.0.7-rc.0":{"name":"rn-navio","version":"0.0.7-rc.0","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n> If `Navio` helped you in any way, don't hesitate to ⭐️ the repo!\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: ['Playground'],\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: ['Settings'],\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\nAdvanced example with all available props can be found @ [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\n#### Definition\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n#### Example\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\n#### Definition\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n### Tabs\n\nTabs are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n### Drawers\n\nDrawers are built using `Screens` and `Stacks` that have been defined before.\n\n#### Definition\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack: StackDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\n#### Definition\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n#### Definition\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n#### Definition\n\n```tsx\ntype Hooks = Function[];\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n#### Definition\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n#### Example\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `navio.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `navio.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `navio.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `navio.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `navio.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `navio.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `navio.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `navio.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `navio.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `navio.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `navio.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `navio.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `navio.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `navio.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `navio.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `navio.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `navio.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"a14f4dadf89548b20be3eb1457f6425cdfc555a0","_id":"rn-navio@0.0.7-rc.0","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-LIOxP1hbb7i/Z5gpRzMQNVCrwn2rb2QMCjQFwTbJ22yGrY9s7f5unrs3uhGgoBKeJTr0g3ykQppnb0MC1fBfGw==","shasum":"4d05320808f1019d370b0da7f61b400761a7e30f","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.7-rc.0.tgz","fileCount":13,"unpackedSize":65373,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfvyjNRVWWonzwougnx5wONPUwsOTWzy4QWtqyfpQ8+QIgcfvXdOdkElgEjg1o9O62oQVcnmM7+jt4q5O55JDvuTI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFPrXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqw8g/+Lj+txjq0hUOidbivyaGRR3rVPPStl+JtOymtQL+SAWbsMIYA\r\n4qYNAp//mBFHbNHDqUMG3piErWqxkNBGfjxBI1Bl5bjOYZaLD5j9ky4dvXWZ\r\nQqPfPF7SFYbveVn4pMtQMHNRLt08nIcUAGtlCCkN2aXIMrWtuKqPqx9+Tw48\r\nrRg6w4VKm+P35ORaDDOF8UYWKkgVgRCcECeuvaGRNSACvMfger5cAlx2XqjC\r\nKdi2SvKRjJHaLdEfIdaVXKT3s5R8+y8c/qlTiU8WcHDH1+RVIThltAwdfR1j\r\nNJyyc4vmZeBjnGoodwop/zSgF8xJMP2qPWu9lrAEP1xlRNkrwq55d8M79r5/\r\nKZBmywF34OdHYe9J7Da7rYJpZTqYPGpO9d3dEllp7pnzSVgjQ1LsBwVAPgFC\r\n6j+iSx1IR0SZ17p/WJ8JXFHt5H9DxB46Z7Z2KwpafXQ2pbiiTpLjMzbJTS2q\r\ncNwOqZph2YPmRbdph0xDGTkezyg/gyFvWMIs+aJJ3MNAUqmiC6laMf12QCPP\r\n4g7Nd30ZnDkvxXbQHDSaiPRj9i6+d/fTSrwWhkJ9jjZxZ6sa7yrP2+S1GWDf\r\n3yPz2pvL4LyLGy3UWat3AGO/TfOqrWM3kcYSftOjP5lQnZ+Z0+SFkGibX5XD\r\nTkmeNHv+Fv0n1jzwalyTmS1sIV0C8xnDEZk=\r\n=HcLs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.7-rc.0_1679096534918_0.5840112531869612"},"_hasShrinkwrap":false},"0.0.7-rc.1":{"name":"rn-navio","version":"0.0.7-rc.1","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native (compatible with Expo) built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide route names autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality.\n\n> If `Navio` helped you in any way, don't hesitate to ⭐️ the repo!\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n    PlaygroundStack: ['Playground'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: 'PlaygroundStack',\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: 'SettingsStack',\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\n### Drawer with tabs\n\nOpens app with main drawer and tabs inside one of the drawer content. It can be used to build Twitter like app's layout.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n    },\n  },\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Tabs: {\n          tabs: 'SomeTabs',\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs with drawer\n\nOpens 2 tabs app with a drawer inside one of the tab. It can be used for showing product categories or similar.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, PlaygroundFlashList, PlaygroundExpoImage, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          drawer: 'DrawerForTabs',\n        },\n      },\n    },\n  },\n  drawers: {\n    DrawerForTabs: {\n      content: {\n        FlashList: {\n          stack: ['PlaygroundFlashList'],\n          options: {\n            title: 'Flash List',\n            drawerPosition: 'right',\n          },\n        },\n        ExpoImage: {\n          stack: ['PlaygroundExpoImage'],\n          options: {\n            title: 'Expo Image',\n            drawerPosition: 'right',\n          },\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer with custom content\n\nOpens app with main drawer with custom content.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n\n      navigatorProps: {\n        drawerContent: (props: any) => (\n          <DrawerContentScrollView {...props}>\n            <DrawerItemList {...props} />\n\n            <View style={{height: 1, backgroundColor: 'black'}} />\n            <DrawerItem label=\"Close drawer\" onPress={() => navio.drawers.close()} />\n          </DrawerContentScrollView>\n        ),\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nAdvanced example with all available props can be found at [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack?: StackDefinition;\n  drawer?: DrawerDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack?: StackDefinition;\n  tabs?: TabsDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Hooks = Function[];\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some cases where I don't know the best way of doing it in TypeScript. So if you are a TypeScript expert, please open an issue for help.\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"a6b8ccdfd01f7cc733174734b4babe499158a295","_id":"rn-navio@0.0.7-rc.1","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-yn29RU5n9/MO9tS6VohjfDxB6KZ5t4mSKp/6pZmEJI5nqclbXyQPL0THFpikM0N6A9uvt1KhLgGk9zWXn+NZxg==","shasum":"4024fac8fc7bb22744ebc6660cadbf2a59afd555","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.7-rc.1.tgz","fileCount":13,"unpackedSize":70818,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtxBN1ZJ9NpamajNWL15alD276OCwvXj41SZT452wMRQIhALS+f1fClYdum7Jx99rV5NIOomDHh50onpcn7BTQx37N"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkF10TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZJg/9HnhGo03pIJZCEY0LuYvhtbiTIxMnC11s9Lw3kQfX/mxDoE3H\r\neileaUbcAKpYGQb06sp+iF2gnLn8oL/Gscfua33AWlbJ/EciZGyYcBfbJ5cJ\r\nxZffzfXhevZ2+ikgB9e0m3IKc+5Ys7yqq+wPELPgY1hKLMZziJrJRa4TeIIm\r\n8Lcj86t4GU2bipYgWLoOihzsFqjyk7QznkZZOPUfiBHYQcgNGDmXMaLjOMno\r\nVo4wmEAQQtj8eT3UXEeZ6ZSDnGBopL9EhQhHgmcVWLy+daGS953KwFO7G3vk\r\ndhofhags2k3DSXxUxMp2/qMUHpR7OEYWprSQoKYDkxZgeLkr3FVkjDe9astL\r\nDL79777L7yu6PUfaeggjwximr/GUfrUdvagpWKVLxOx9if88o/ykPrAwBqcX\r\nI3XFr0iOhRDS4XESjLuzfw8cuodUI4dLUIQby6eaoleo0SOaCBnpthWEgtNN\r\nPFMbZbEAl6wJwTi4KNfVrCEiL54r5ULfs13/u+RFGWAWMMik9HMGtDYMBOXO\r\ny6qzRe5ZJW/aMQGZfaq+bAMVyDAtd2yiJXHTtmaJcdN1GVI9fyaEPFXnJURm\r\nmY8NiFWYgKP9b9g3ACMJkCmQoMJ1nqUuudDDz+yzbgR/ViLgm+5XnWOVtIzk\r\nYb8A5zDRXV2HoNUXXXdMZ7e6evZ/VaHCFRw=\r\n=mV1Y\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.7-rc.1_1679252755696_0.056114925947150285"},"_hasShrinkwrap":false},"0.0.7":{"name":"rn-navio","version":"0.0.7","description":"🧭 Navigation library for React Native (Expo). Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"3aa5a8b7782872ff5b01df8544d16ba6f20b7905","_id":"rn-navio@0.0.7","_nodeVersion":"16.15.1","_npmVersion":"8.11.0","dist":{"integrity":"sha512-9D7pmeDroEjlELjZvUMidyToBJRnSI0NbVgfafWcUtY4AvLt1Lwa7kqPXAn4UlLSJ4dGGLbnazphXGlpA9a+sw==","shasum":"574504b7e3c54e9dae646f835ca442a667b09c51","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.7.tgz","fileCount":13,"unpackedSize":71460,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDr2FehkDfWgxoYbMzPe4SfMCzPpCnLbQhOhvFtaHrZbQIgYPmml90He/V/5gh5mkbCzgw73J8DvAnSxmJXhQomv4s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkF4ROACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH+RAAnkR1mE52Q4wiEhlF2Gw9fyyWtMn4PR0mj0nd3aIH4a+9M51R\r\nJen9FOEu0IcBtE+pvD6B6Jpn8OxAA89f6Dgj1ZKOxRqnKCZxaCRS+JK5te8w\r\n7G8elYyV7AvWzCczU0MDxeLrcwyf7wbVslXx/oHtXlNHYVJLSxPAol8CbRk5\r\nK7HOVLMhNnkc23HOOUePH2UmKlG4QLuK8Y5Jgiy1vZucFjnQ8z1ztpIBd28/\r\nX7209tJ7iPUKnvCuBUXx4ztay40BzTAEQdngVFSSiunMsHDfQg8t3/eLO+MU\r\nFaMAGb/xHr3TCsc4nTPISuxCgVmlOwDH5cQjRQSoSLT3Wd9uySqxoN2+shi6\r\n/spkH5Md9QUmgI01Cqr7NW/Lr7oA3VqNmD1OVwKzlDgM2uarIkzND53WjDr5\r\n7zE0t+vfQL7tKQfJyVOt/rDA2yUXDoVdohXq42hLKxFgEbVFg4N9z1eFEx50\r\n/IGYJhX+m4IStp75nUyQOd4BMZV+wWBPt6gcsXQa/X3UeiFCuWQY29ivl91x\r\ncS1JybybOGPxSsCWEF4Ly6LTza2gS/s7ahWogySIRzEUyOwW29qAvkWSjQ28\r\n7HnRio0X3hfm8dtWWYrhAwTfLTZdPN1yfx/2v+w98XoHlI0DiODLL6iuG0a4\r\n1DVpIkLZBST6hpVm49jdoBhxw8x+MwWg2RI=\r\n=+BqZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.7_1679262797867_0.3772184207391416"},"_hasShrinkwrap":false},"0.0.8-rc.0":{"name":"rn-navio","version":"0.0.8-rc.0","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality. One of the strong parts of Navio is it helps to separate business logic and UI part of the app with ease.\n\n> If `Navio` helped you in any way, give it a ⭐️ !\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n    PlaygroundStack: ['Playground'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: 'PlaygroundStack',\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: 'SettingsStack',\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\n### Drawer with tabs\n\nOpens app with main drawer and tabs inside one of the drawer content. It can be used to build Twitter like app's layout.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n    },\n  },\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Tabs: {\n          tabs: 'SomeTabs',\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs with drawer\n\nOpens 2 tabs app with a drawer inside one of the tab. It can be used for showing product categories or similar.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, PlaygroundFlashList, PlaygroundExpoImage, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          drawer: 'DrawerForTabs',\n        },\n      },\n    },\n  },\n  drawers: {\n    DrawerForTabs: {\n      content: {\n        FlashList: {\n          stack: ['PlaygroundFlashList'],\n          options: {\n            title: 'Flash List',\n            drawerPosition: 'right',\n          },\n        },\n        ExpoImage: {\n          stack: ['PlaygroundExpoImage'],\n          options: {\n            title: 'Expo Image',\n            drawerPosition: 'right',\n          },\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer with custom content\n\nOpens app with main drawer with custom content.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n\n      navigatorProps: {\n        drawerContent: (props: any) => (\n          <DrawerContentScrollView {...props}>\n            <DrawerItemList {...props} />\n\n            <View style={{height: 1, backgroundColor: 'black'}} />\n            <DrawerItem label=\"Close drawer\" onPress={() => navio.drawers.close()} />\n          </DrawerContentScrollView>\n        ),\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nAdvanced example with all available props can be found at [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack?: StackDefinition;\n  drawer?: DrawerDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack?: StackDefinition;\n  tabs?: TabsDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Hooks = Function[];\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `.drawers.updateOptions(name, options)`\n\nUpdates options for a given drawer menu content. Can be used to change its title.\n\n#### `.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some issues (could be found at `index.tsx`). So if you are a TypeScript expert, please open an issue for help.\n\n#### Autocompletion\n\nIn order to use full power of TS autocompletion, you'll need to define all layout components (could be just empty object). I don't know how to fix that at the moment.\n\n```tsx\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  root: '...', // 🚫 won't help w/ autocompletion\n});\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  drawers: {},\n  tabs: {},\n  root: '...', // ✅ will help w/ autocompletion\n});\n```\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"4e4da8c8bfdd70bd311ada94caddf8ea70b674a2","_id":"rn-navio@0.0.8-rc.0","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-X64ybpCr3IKEkjfa0Kauwtioo5UIutchfXvBp3C1BDJiyBaSk0yip9P/dj8UeLQuWSBqGbiSF1d9h14OcPz36w==","shasum":"f761d7716c810d52dcb7dbc4ad61dc715ec9c12e","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.8-rc.0.tgz","fileCount":13,"unpackedSize":73157,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHdcxlgD8lplZkJjpCS0V4InDAai0G5+w8jHo2OJNYP/AiEApGGJ6mSVNA5esCWSUSuSX1GM53ikmEuOVBZyyV1nD9A="}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.8-rc.0_1711318434399_0.05608184991460896"},"_hasShrinkwrap":false},"0.0.8-rc.1":{"name":"rn-navio","version":"0.0.8-rc.1","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality. One of the strong parts of Navio is it helps to separate business logic and UI part of the app with ease.\n\n> If `Navio` helped you in any way, give it a ⭐️ !\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n    PlaygroundStack: ['Playground'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: 'PlaygroundStack',\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: 'SettingsStack',\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\n### Drawer with tabs\n\nOpens app with main drawer and tabs inside one of the drawer content. It can be used to build Twitter like app's layout.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n    },\n  },\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Tabs: {\n          tabs: 'SomeTabs',\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs with drawer\n\nOpens 2 tabs app with a drawer inside one of the tab. It can be used for showing product categories or similar.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, PlaygroundFlashList, PlaygroundExpoImage, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          drawer: 'DrawerForTabs',\n        },\n      },\n    },\n  },\n  drawers: {\n    DrawerForTabs: {\n      content: {\n        FlashList: {\n          stack: ['PlaygroundFlashList'],\n          options: {\n            title: 'Flash List',\n            drawerPosition: 'right',\n          },\n        },\n        ExpoImage: {\n          stack: ['PlaygroundExpoImage'],\n          options: {\n            title: 'Expo Image',\n            drawerPosition: 'right',\n          },\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer with custom content\n\nOpens app with main drawer with custom content.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n\n      navigatorProps: {\n        drawerContent: (props: any) => (\n          <DrawerContentScrollView {...props}>\n            <DrawerItemList {...props} />\n\n            <View style={{height: 1, backgroundColor: 'black'}} />\n            <DrawerItem label=\"Close drawer\" onPress={() => navio.drawers.close()} />\n          </DrawerContentScrollView>\n        ),\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nAdvanced example with all available props can be found at [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack?: StackDefinition;\n  drawer?: DrawerDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack?: StackDefinition;\n  tabs?: TabsDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Hooks = Function[];\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `.drawers.updateOptions(name, options)`\n\nUpdates options for a given drawer menu content. Can be used to change its title.\n\n#### `.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some issues (could be found at `index.tsx`). So if you are a TypeScript expert, please open an issue for help.\n\n#### Autocompletion\n\nIn order to use full power of TS autocompletion, you'll need to define all layout components (could be just empty object). I don't know how to fix that at the moment.\n\n```tsx\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  root: '...', // 🚫 won't help w/ autocompletion\n});\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  drawers: {},\n  tabs: {},\n  root: '...', // ✅ will help w/ autocompletion\n});\n```\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"4e4da8c8bfdd70bd311ada94caddf8ea70b674a2","_id":"rn-navio@0.0.8-rc.1","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-s9xEgQRWDEX0DFbRrtuJZC7/mRgxz+Bt4vzIo8dALnlkRkiZz6C3jH72hsFpnf+F26KlYnmmCrdzWR6D/tQQbw==","shasum":"888dfb47139cfb892b4e1fed33d72450d865a0b8","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.8-rc.1.tgz","fileCount":13,"unpackedSize":74304,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEtHoTAeDHeEDBvgegv4EgQ8oNp4XFt5iFBRPZxto62wAiEAt/TiKyYXMCwg6C/Dwo95pezStyz8gTbcBvXjIjBs8+g="}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.8-rc.1_1711320204557_0.3433607445828486"},"_hasShrinkwrap":false},"0.0.8-rc.2":{"name":"rn-navio","version":"0.0.8-rc.2","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality. One of the strong parts of Navio is it helps to separate business logic and UI part of the app with ease.\n\n> If `Navio` helped you in any way, give it a ⭐️ !\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n    PlaygroundStack: ['Playground'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: 'PlaygroundStack',\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: 'SettingsStack',\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\n### Drawer with tabs\n\nOpens app with main drawer and tabs inside one of the drawer content. It can be used to build Twitter like app's layout.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n    },\n  },\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Tabs: {\n          tabs: 'SomeTabs',\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs with drawer\n\nOpens 2 tabs app with a drawer inside one of the tab. It can be used for showing product categories or similar.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, PlaygroundFlashList, PlaygroundExpoImage, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          drawer: 'DrawerForTabs',\n        },\n      },\n    },\n  },\n  drawers: {\n    DrawerForTabs: {\n      content: {\n        FlashList: {\n          stack: ['PlaygroundFlashList'],\n          options: {\n            title: 'Flash List',\n            drawerPosition: 'right',\n          },\n        },\n        ExpoImage: {\n          stack: ['PlaygroundExpoImage'],\n          options: {\n            title: 'Expo Image',\n            drawerPosition: 'right',\n          },\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer with custom content\n\nOpens app with main drawer with custom content.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n\n      navigatorProps: {\n        drawerContent: (props: any) => (\n          <DrawerContentScrollView {...props}>\n            <DrawerItemList {...props} />\n\n            <View style={{height: 1, backgroundColor: 'black'}} />\n            <DrawerItem label=\"Close drawer\" onPress={() => navio.drawers.close()} />\n          </DrawerContentScrollView>\n        ),\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nAdvanced example with all available props can be found at [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack?: StackDefinition;\n  drawer?: DrawerDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack?: StackDefinition;\n  tabs?: TabsDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Hooks = Function[];\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `.drawers.updateOptions(name, options)`\n\nUpdates options for a given drawer menu content. Can be used to change its title.\n\n#### `.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some issues (could be found at `index.tsx`). So if you are a TypeScript expert, please open an issue for help.\n\n#### Autocompletion\n\nIn order to use full power of TS autocompletion, you'll need to define all layout components (could be just empty object). I don't know how to fix that at the moment.\n\n```tsx\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  root: '...', // 🚫 won't help w/ autocompletion\n});\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  drawers: {},\n  tabs: {},\n  root: '...', // ✅ will help w/ autocompletion\n});\n```\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"327457f04b0234f8728ce9058fea65a71f460dc2","_id":"rn-navio@0.0.8-rc.2","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-17td4aPwdWFRTtzRioFteBE53MoezcLNNq2bnarCnFNGeQVqy3ZEUQhX8xqxBbGcAwOvby6nkDQ0V9Z+YZhiYQ==","shasum":"82952f30bbeded4db9f5cc7624026a29d055dbc1","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.8-rc.2.tgz","fileCount":13,"unpackedSize":75211,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiE/o+7/99oEylW+cQTHWEQ3/Mi3xDpAA92+j6fE9glgIhANBBxkM3eCRKTjusDJ5SXY5gfraps7Jleirw5AUDsiqY"}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.8-rc.2_1711324002878_0.7048645466843564"},"_hasShrinkwrap":false},"0.0.8-rc.3":{"name":"rn-navio","version":"0.0.8-rc.3","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality. One of the strong parts of Navio is it helps to separate business logic and UI part of the app with ease.\n\n> If `Navio` helped you in any way, give it a ⭐️ !\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n    PlaygroundStack: ['Playground'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: 'PlaygroundStack',\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: 'SettingsStack',\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\n### Drawer with tabs\n\nOpens app with main drawer and tabs inside one of the drawer content. It can be used to build Twitter like app's layout.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n    },\n  },\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Tabs: {\n          tabs: 'SomeTabs',\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs with drawer\n\nOpens 2 tabs app with a drawer inside one of the tab. It can be used for showing product categories or similar.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, PlaygroundFlashList, PlaygroundExpoImage, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          drawer: 'DrawerForTabs',\n        },\n      },\n    },\n  },\n  drawers: {\n    DrawerForTabs: {\n      content: {\n        FlashList: {\n          stack: ['PlaygroundFlashList'],\n          options: {\n            title: 'Flash List',\n            drawerPosition: 'right',\n          },\n        },\n        ExpoImage: {\n          stack: ['PlaygroundExpoImage'],\n          options: {\n            title: 'Expo Image',\n            drawerPosition: 'right',\n          },\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer with custom content\n\nOpens app with main drawer with custom content.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n\n      navigatorProps: {\n        drawerContent: (props: any) => (\n          <DrawerContentScrollView {...props}>\n            <DrawerItemList {...props} />\n\n            <View style={{height: 1, backgroundColor: 'black'}} />\n            <DrawerItem label=\"Close drawer\" onPress={() => navio.drawers.close()} />\n          </DrawerContentScrollView>\n        ),\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nAdvanced example with all available props can be found at [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack?: StackDefinition;\n  drawer?: DrawerDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack?: StackDefinition;\n  tabs?: TabsDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Hooks = Function[];\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `.drawers.updateOptions(name, options)`\n\nUpdates options for a given drawer menu content. Can be used to change its title.\n\n#### `.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some issues (could be found at `index.tsx`). So if you are a TypeScript expert, please open an issue for help.\n\n#### Autocompletion\n\nIn order to use full power of TS autocompletion, you'll need to define all layout components (could be just empty object). I don't know how to fix that at the moment.\n\n```tsx\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  root: '...', // 🚫 won't help w/ autocompletion\n});\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  drawers: {},\n  tabs: {},\n  root: '...', // ✅ will help w/ autocompletion\n});\n```\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"8dc85e89cb7ab97b12cebd55caa7696b1297c989","_id":"rn-navio@0.0.8-rc.3","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-l1ipL44G1mh+UZVZ50h01hxkor1jauatGDxyVS0BRyhRZKN6r//MzLgWxlSFOHIchFdVexYEbBXLgn1DpgLf6A==","shasum":"2cb8b1b0a29dfef18596339ac8d1230996de3350","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.8-rc.3.tgz","fileCount":13,"unpackedSize":76116,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6f7gD22Q5Rerm0ECF88c4iUYoFFKFZ9cDpLCJ0nLu7QIgS6hzENIdFti00ONb11r8FHh0NKQQOnPP7ThgnfPjdWg="}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.8-rc.3_1711325755709_0.07693232703031705"},"_hasShrinkwrap":false},"0.0.8-rc.4":{"name":"rn-navio","version":"0.0.8-rc.4","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality. One of the strong parts of Navio is it helps to separate business logic and UI part of the app with ease.\n\n> If `Navio` helped you in any way, give it a ⭐️ !\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n    PlaygroundStack: ['Playground'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: 'PlaygroundStack',\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: 'SettingsStack',\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\n### Drawer with tabs\n\nOpens app with main drawer and tabs inside one of the drawer content. It can be used to build Twitter like app's layout.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n    },\n  },\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Tabs: {\n          tabs: 'SomeTabs',\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs with drawer\n\nOpens 2 tabs app with a drawer inside one of the tab. It can be used for showing product categories or similar.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, PlaygroundFlashList, PlaygroundExpoImage, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          drawer: 'DrawerForTabs',\n        },\n      },\n    },\n  },\n  drawers: {\n    DrawerForTabs: {\n      content: {\n        FlashList: {\n          stack: ['PlaygroundFlashList'],\n          options: {\n            title: 'Flash List',\n            drawerPosition: 'right',\n          },\n        },\n        ExpoImage: {\n          stack: ['PlaygroundExpoImage'],\n          options: {\n            title: 'Expo Image',\n            drawerPosition: 'right',\n          },\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer with custom content\n\nOpens app with main drawer with custom content.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n\n      navigatorProps: {\n        drawerContent: (props: any) => (\n          <DrawerContentScrollView {...props}>\n            <DrawerItemList {...props} />\n\n            <View style={{height: 1, backgroundColor: 'black'}} />\n            <DrawerItem label=\"Close drawer\" onPress={() => navio.drawers.close()} />\n          </DrawerContentScrollView>\n        ),\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nAdvanced example with all available props can be found at [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack?: StackDefinition;\n  drawer?: DrawerDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack?: StackDefinition;\n  tabs?: TabsDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Hooks = Function[];\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `.drawers.updateOptions(name, options)`\n\nUpdates options for a given drawer menu content. Can be used to change its title.\n\n#### `.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some issues (could be found at `index.tsx`). So if you are a TypeScript expert, please open an issue for help.\n\n#### Autocompletion\n\nIn order to use full power of TS autocompletion, you'll need to define all layout components (could be just empty object). I don't know how to fix that at the moment.\n\n```tsx\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  root: '...', // 🚫 won't help w/ autocompletion\n});\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  drawers: {},\n  tabs: {},\n  root: '...', // ✅ will help w/ autocompletion\n});\n```\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"9e9af419053e80ac66231236f9a9dd7a033796e3","_id":"rn-navio@0.0.8-rc.4","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-iNf6LIWyhgunjwcKEdjw0oA1QRO421q8ac0x0mPU85AN/jRgZa2hGY27I6IT90IdfLyFEgSwuLcJB9OkxcQ9GA==","shasum":"7b4512290af9bf752fbdd6fbf58bca4b5b08c039","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.8-rc.4.tgz","fileCount":13,"unpackedSize":77340,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgiGFm6WjPHw1r1aLVdP3g+J/pPI5Ob2Lo883I2FDUpgIgfIKaXjHQPKEIfmJ92GjId0xHtIa+thUYQ8GXZdFvY24="}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.8-rc.4_1711327211352_0.1326920641459659"},"_hasShrinkwrap":false},"0.0.8-rc.5":{"name":"rn-navio","version":"0.0.8-rc.5","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality. One of the strong parts of Navio is it helps to separate business logic and UI part of the app with ease.\n\n> If `Navio` helped you in any way, give it a ⭐️ !\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n    PlaygroundStack: ['Playground'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: 'PlaygroundStack',\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: 'SettingsStack',\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\n### Drawer with tabs\n\nOpens app with main drawer and tabs inside one of the drawer content. It can be used to build Twitter like app's layout.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n    },\n  },\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Tabs: {\n          tabs: 'SomeTabs',\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs with drawer\n\nOpens 2 tabs app with a drawer inside one of the tab. It can be used for showing product categories or similar.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, PlaygroundFlashList, PlaygroundExpoImage, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          drawer: 'DrawerForTabs',\n        },\n      },\n    },\n  },\n  drawers: {\n    DrawerForTabs: {\n      content: {\n        FlashList: {\n          stack: ['PlaygroundFlashList'],\n          options: {\n            title: 'Flash List',\n            drawerPosition: 'right',\n          },\n        },\n        ExpoImage: {\n          stack: ['PlaygroundExpoImage'],\n          options: {\n            title: 'Expo Image',\n            drawerPosition: 'right',\n          },\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer with custom content\n\nOpens app with main drawer with custom content.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n\n      navigatorProps: {\n        drawerContent: (props: any) => (\n          <DrawerContentScrollView {...props}>\n            <DrawerItemList {...props} />\n\n            <View style={{height: 1, backgroundColor: 'black'}} />\n            <DrawerItem label=\"Close drawer\" onPress={() => navio.drawers.close()} />\n          </DrawerContentScrollView>\n        ),\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nAdvanced example with all available props can be found at [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack?: StackDefinition;\n  drawer?: DrawerDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack?: StackDefinition;\n  tabs?: TabsDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Hooks = Function[];\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `.drawers.updateOptions(name, options)`\n\nUpdates options for a given drawer menu content. Can be used to change its title.\n\n#### `.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some issues (could be found at `index.tsx`). So if you are a TypeScript expert, please open an issue for help.\n\n#### Autocompletion\n\nIn order to use full power of TS autocompletion, you'll need to define all layout components (could be just empty object). I don't know how to fix that at the moment.\n\n```tsx\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  root: '...', // 🚫 won't help w/ autocompletion\n});\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  drawers: {},\n  tabs: {},\n  root: '...', // ✅ will help w/ autocompletion\n});\n```\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"9e9af419053e80ac66231236f9a9dd7a033796e3","_id":"rn-navio@0.0.8-rc.5","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-0pkrTLi5hZtpVdnjjSrlPjaOQzNhy/lvjoqSKWsLEkeLFPhLiEWFPvHOtd2fPjDUBZAPsHMDe38waBy8TMr8Qw==","shasum":"f1c6b229dcd482ce6d33be39c95c16092416af1d","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.8-rc.5.tgz","fileCount":13,"unpackedSize":77365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ2rtQgZeHpvp0jupGLL4Lk2LT+uSTK7NygqR1kgTYnAIhAKlC7WMIe3kL+VPB+XeagAtd+4VjsHU0qgj3kcN1Uofk"}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.8-rc.5_1711327327208_0.19137888207916465"},"_hasShrinkwrap":false},"0.0.8-rc.6":{"name":"rn-navio","version":"0.0.8-rc.6","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app functionality. One of the strong parts of Navio is it helps to separate business logic and UI part of the app with ease.\n\n> If `Navio` helped you in any way, give it a ⭐️ !\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n## Playground\n\n### Expo Starter\n\nYou can bootstrap a new project with Navio (from [expo-starter](https://github.com/kanzitelli/expo-starter)):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Examples\n\n### 2 screens\n\nSimple app with 2 screens.\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    Main: ['Home', 'Settings'],\n  },\n  root: 'Main',\n});\n\nexport default () => <navio.App />;\n```\n\n### Tabs\n\nTab-based app with 3 tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n    PlaygroundStack: ['Playground'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        HomeTab: {\n          stack: 'HomeStack',\n          options: () => ({\n            title: 'Home',\n          }),\n        },\n        PlaygroundTab: {\n          stack: 'PlaygroundStack',\n          options: () => ({\n            title: 'Playground',\n          }),\n        },\n        SettingsTab: {\n          stack: 'SettingsStack',\n          options: () => ({\n            title: 'Settings',\n          }),\n        },\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer\n\nSimple app with drawer and 3 stacks.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Example, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Example, Playground, Settings},\n  stacks: {\n    HomeStack: ['Home', 'Example'],\n  },\n  drawers: {\n    AppDrawer: {\n      content: {\n        Main: 'HomeStack',\n        Playground: ['Playground'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Auth flow\n\nThere are two ways of handling `Auth` flow with Navio: Static and Dynamic.\n\n<details>\n<summary>Static - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you show `MainApp` in the beginning with limited functionality\n// and have some screen with \"Sign in\" button. After pressing \"Sign in\",\n// you can show `Auth` flow.\nconst Screen = () => {\n  const {navio} = useServices();\n\n  const onSignInPressed = () => {\n    navio.setRoot('stacks', 'Auth');\n  };\n\n  return <>{Content}</>;\n};\n\n// After `Auth` flow is successfully finished, you can show `MainApp`.\nnavio.setRoot('stacks', 'MainApp');\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n<details>\n<summary>Dynamic - Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Main, SignIn, SignUp} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Main, SignIn, SignUp},\n  stacks: {\n    MainApp: ['Main'],\n    Auth: ['SignIn', 'SignUp'],\n  },\n  root: 'MainApp',\n});\n\n// Let's say you want to react on changes from auth provider (stores, hook, etc.)\n// and show root app depending on that value.\nexport default (): JSX.Element => {\n  const {authData} = useAuth();\n  const isLoggedIn = !!authData;\n\n  return (\n    <SomeProviders>\n      <navio.App initialRouteName={isLoggedIn ? 'MainApp' : 'Auth'} />\n    </SomeProviders>\n  );\n};\n```\n\n</details>\n\n### Hide tabs\n\nHide tabs on a specific screen.\n\nAs React Navigation suggests in the [docs](https://reactnavigation.org/docs/hiding-tabbar-in-screens/), we need to define a stack that we want to \"push over\" tabs.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Product, Playground, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    Home,\n    Settings,\n\n    ProductPage: {\n      component: Product,\n      options: {\n        headerShown: false,\n      },\n    },\n  },\n  stacks: {\n    ProductPageStack: {\n      screens: ['ProductPage'],\n      containerOptions: {\n        headerShown: true,\n        title: 'Product page',\n      },\n    },\n  },\n  tabs: {\n    AppTabs: {\n      content: {\n        Home: ['Home'],\n        Settings: ['Settings'],\n      },\n    },\n  },\n  root: 'AppTabs',\n});\n\n// Now you can push `ProductPageStack` from tabs and it will be without tabs.\nnavio.stacks.push('ProductPageStack');\n```\n\n</details>\n\n### Drawer with tabs\n\nOpens app with main drawer and tabs inside one of the drawer content. It can be used to build Twitter like app's layout.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n    },\n  },\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Tabs: {\n          tabs: 'SomeTabs',\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Tabs with drawer\n\nOpens 2 tabs app with a drawer inside one of the tab. It can be used for showing product categories or similar.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, PlaygroundFlashList, PlaygroundExpoImage, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  tabs: {\n    SomeTabs: {\n      content: {\n        Home: {\n          stack: ['Home'],\n        },\n        Settings: {\n          drawer: 'DrawerForTabs',\n        },\n      },\n    },\n  },\n  drawers: {\n    DrawerForTabs: {\n      content: {\n        FlashList: {\n          stack: ['PlaygroundFlashList'],\n          options: {\n            title: 'Flash List',\n            drawerPosition: 'right',\n          },\n        },\n        ExpoImage: {\n          stack: ['PlaygroundExpoImage'],\n          options: {\n            title: 'Expo Image',\n            drawerPosition: 'right',\n          },\n        },\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\n### Drawer with custom content\n\nOpens app with main drawer with custom content.\n\n<details>\n<summary>Show code</summary>\n\n```tsx\nimport {Navio} from 'rn-navio';\nimport {Home, Settings} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: {\n          stack: ['Home'],\n        },\n        Settings: {\n          stack: ['Settings'],\n        },\n      },\n\n      navigatorProps: {\n        drawerContent: (props: any) => (\n          <DrawerContentScrollView {...props}>\n            <DrawerItemList {...props} />\n\n            <View style={{height: 1, backgroundColor: 'black'}} />\n            <DrawerItem label=\"Close drawer\" onPress={() => navio.drawers.close()} />\n          </DrawerContentScrollView>\n        ),\n      },\n    },\n  },\n  root: 'MainDrawer',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nAdvanced example with all available props can be found at [expo-starter](https://github.com/kanzitelli/expo-starter/blob/master/src/navio.tsx)\n\n## Layout\n\nNavio requires only `screens` prop to build an app layout. `stacks`, `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Screens = Record<string, Screen>;\n\ntype Screen =\n  | NavioScreen<Props>\n  | {\n      component: NavioScreen<Props>;\n      options?: BaseOptions<NativeStackNavigationOptions>;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {ScreenOne} from './screens/one.tsx';\n\nconst navio = Navio.build({\n  screens: {\n    One: ScreenOne,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: ScreenOne,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Stacks = Record<string, Stack>;\n\ntype Stack =\n  | ScreenName[]\n  | {\n      screens: ScreenName[];\n      containerOptions?: ContainerOptions;\n      navigatorProps?: NativeStackNavigatorProps;\n    };\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Tabs = Record<string, Tab>;\n\ntype Tab = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype ContentValue = {\n  stack?: StackDefinition;\n  drawer?: DrawerDefinition;\n  options?: BaseOptions<BottomTabNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  tabs: {\n    AppTabs: {\n      content: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Drawers = Record<string, Drawer>;\n\ntype Drawer = {\n  content: Record<string, ContentValue>;\n  containerOptions?: ContainerOptions;\n  navigatorProps?: any;\n};\n\ntype DrawerContentValue = {\n  stack?: StackDefinition;\n  tabs?: TabsDefinition;\n  options?: BaseOptions<DrawerNavigationOptions>;\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  drawers: {\n    MainDrawer: {\n      content: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Modals = Record<string, Modal>;\n\ntype Modal = StackDefinition;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  modals: {\n    ExampleModal: 'ExampleStack',\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.Root />` component.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype RootName = StacksName | TabsName | DrawersName;\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  root: 'AppTabs',\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype Hooks = Function[];\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useAppearance],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Definition</summary>\n\n```tsx\ntype DefaultOptions = {\n  stacks?: {\n    screen?: StackScreenOptions;\n    container?: ContainerOptions;\n  };\n  tabs?: {\n    screen?: TabScreenOptions;\n    container?: ContainerOptions;\n  };\n  drawers?: {\n    screen?: DrawerScreenOptions;\n    container?: ContainerOptions;\n  };\n  modals?: {\n    container?: ContainerOptions;\n  };\n};\n```\n\n</details>\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n## App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'MainDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## Navigation\n\nNavio provides a colleciton of actions to perform navigation within the app.\n\n### Common\n\n#### `navio.N`\n\nCurrent navigation instance (from React Navigation). You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n#### `.push(name, params?)`\n\nAdds a route on top of the stack and navigates forward to it.\n\n#### `.goBack()`\n\nAllows to go back to the previous route in history.\n\n#### `.setParams(name, params)`\n\nAllows to update params for a certain route.\n\n#### `.setRoot(as, rootName)`\n\nSets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n#### `.stacks.push(name)`\n\nAdds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n#### `.stacks.pop(count?)`\n\nTakes you back to a previous screen in the stack.\n\n#### `.stacks.popToTop()`\n\nTakes you back to the first screen in the stack, dismissing all the others.\n\n#### `.stacks.setRoot(name)`\n\nSets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n#### `.tabs.jumpTo(name)`\n\nCan be used to jump to an existing route in the tab navigator.\n\n#### `.tabs.updateOptions(name, options)`\n\nUpdates options for a given tab. Can be used to change badge count.\n\n#### `.tabs.setRoot(name)`\n\nSets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n#### `.drawers.open()`\n\nCan be used to open the drawer pane.\n\n#### `.drawers.close()`\n\nCan be used to close the drawer pane.\n\n#### `.drawers.toggle()`\n\nCan be used to open the drawer pane if closed, or close if open.\n\n#### `.drawers.jumpTo(name)`\n\nCan be used to jump to an existing route in the drawer navigator.\n\n#### `.drawers.updateOptions(name, options)`\n\nUpdates options for a given drawer menu content. Can be used to change its title.\n\n#### `.drawers.setRoot(name)`\n\nSets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n#### `.modals.show()`\n\nCan be used to show an existing modal.\n\n## TypeScript\n\nNavio is developed in TypeScript from the beginning. TypeScript helps with autocompletion and to achieve better DX. There are still some issues (could be found at `index.tsx`). So if you are a TypeScript expert, please open an issue for help.\n\n#### Autocompletion\n\nIn order to use full power of TS autocompletion, you'll need to define all layout components (could be just empty object). I don't know how to fix that at the moment.\n\n```tsx\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  root: '...', // 🚫 won't help w/ autocompletion\n});\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {MainStack: ['Main', 'Settings']},\n  drawers: {},\n  tabs: {},\n  root: '...', // ✅ will help w/ autocompletion\n});\n```\n\n## Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [ ] Make deeplinking easier by providing `linking` prop to screens.\n- [ ] Improve docs. Deeplinking section, etc. Based on this [issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"9e9af419053e80ac66231236f9a9dd7a033796e3","_id":"rn-navio@0.0.8-rc.6","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-22W0gDmgE8nuJCA71j2NBgtoDTmDuUQL48EbTudeZJNzuEB4HEzzR4ZFHSiUnimy4XX7KHe6CLt9lhDPJVCrDw==","shasum":"2f4ebfa2b8e14db8b44a70e03017c6c631cb9b8f","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.0.8-rc.6.tgz","fileCount":13,"unpackedSize":77352,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2pSJvExSEhm1ZjeaBDSFgD0XpuzQPMzpOvvBGd7RUWgIgboOGzBWdm9IovdELSLYVB1EqxWB9YVTWrlpHL8pPRSw="}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.0.8-rc.6_1711327384878_0.8545091393740865"},"_hasShrinkwrap":false},"0.1.0-rc.0":{"name":"rn-navio","version":"0.1.0-rc.0","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app's business logic.\n\n> If `Navio` helped you in a way, support it with ⭐️\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n### Install dependencies\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n### Create your first Navio layout\n\nThis code will build a simple app with one screen.\n\n```tsx\n// App.tsx\nimport {Text} from 'react-native';\nimport {Navio} from 'rn-navio';\n\nconst Home = () => {\n  return <Text>Home page</Text>;\n};\n\nconst navio = Navio.build({\n  screens: {Home},\n  stacks: {\n    HomeStack: ['Home'],\n  },\n  root: 'stacks.HomeStack',\n});\n\nexport default () => <navio.App />;\n```\n\n<details>\n<summary>Tab-based app with 2 tabs</summary>\n\n```tsx\n// App.tsx\nimport {Text} from 'react-native';\nimport {Navio} from 'rn-navio';\n\nconst Home = () => {\n  return <Text>Home page</Text>;\n};\nconst Settings = () => {\n  return <Text>Settings page</Text>;\n};\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    HomeStack: ['Home'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      layout: {\n        HomeTab: {stack: 'HomeStack'},\n        SettingsTab: {stack: 'SettingsStack'},\n      },\n    },\n  },\n  root: 'tabs.AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nIf you'd like to see more complex and exotic example, please follow [this link](/docs/layout-examples.md).\n\n## Playground\n\n### React Native Starter\n\nYou can bootstrap a new project with Navio from [expo-starter](https://github.com/kanzitelli/expo-starter):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Navigation API\n\nNavio provides a colleciton of actions to perform navigation within the app. Suppose, you have a `navio` object:\n\n### Common\n\n- `.N`\n\n  Current navigation object from React Navigation. You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n- `.push(name, params?)`\n\n  Adds a route on top of the stack and navigates forward to it.\n\n- `.goBack()`\n\n  Allows to go back to the previous route in history.\n\n- `.setParams(name, params)`\n\n  Allows to update params for a certain route.\n\n- `.setRoot(as, rootName)`\n\n  Sets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n- `.stacks.push(name)`\n\n  Adds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n- `.stacks.pop(count?)`\n\n  Takes you back to a previous screen in the stack.\n\n- `.stacks.popToTop()`\n\n  Takes you back to the first screen in the stack, dismissing all the others.\n\n- `.stacks.setRoot(name)`\n\n  Sets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n- `.tabs.jumpTo(name)`\n\n  Used to jump to an existing route in the tab navigator.\n\n- `.tabs.updateOptions(name, options)`\n\n  Updates options for a given tab. Used to change badge count.\n\n- `.tabs.setRoot(name)`\n\n  Sets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n- `.drawers.open()`\n\n  Used to open the drawer pane.\n\n- `.drawers.close()`\n\n  Used to close the drawer pane.\n\n- `.drawers.toggle()`\n\n  Used to open the drawer pane if closed, or close if open.\n\n- `.drawers.jumpTo(name)`\n\n  Used to jump to an existing route in the drawer navigator.\n\n- `.drawers.updateOptions(name, options)`\n\n  Updates options for a given drawer menu content. Used to change its title.\n\n- `.drawers.setRoot(name)`\n\n  Sets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n- `.modals.show(name, params)`\n\n  Used to show an existing modal and pass params.\n\n- `.modals.getParams(name)`\n\n  Returns params passed for modal on .show() method.\n\n### Hooks\n\nUseful hooks.\n\n- `.useN()`\n\n  Duplicate of `useNavigation()` hook from React Navigation. Used for convenience inside screens to get access to navigation object. [Docs](https://reactnavigation.org/docs/use-navigation/).\n\n- `.useR()`\n\n  Duplicate of `useRoute()` hook from React Navigation. Used to convenience inside screens to get access to route object. [Docs](https://reactnavigation.org/docs/use-route)\n\n- `.useParams()`\n\n  Used for quick access to navigation route params. Used to convenience inside screens when passing params.\n\n## Layout structure\n\nNavio requires `screens` and at least one `stacks` to build an app layout. `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {Screen1, Screen3} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    One: Screen1,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: Screen3,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // screens are taken from previous step\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // screens and stacks are taken from previous step\n  tabs: {\n    AppTabs: {\n      layout: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          // or drawer: 'SomeDrawer',\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          // or drawer: 'SomeDrawer',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n      options: { ... }, // optional\n      navigatorProps: { ... }, // optional\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // screens and stacks are taken from previous step\n  drawers: {\n    MainDrawer: {\n      layout: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n      options: { ... }, // optional\n      navigatorProps: { ... }, // optional\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // screens and stacks are taken from previous step\n  modals: {\n    ExampleModal: {\n      stack: 'ExampleStack',\n      options: { ... }, // optional\n    },\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'AppDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // stacks, tabs and drawers are taken from previous examples\n  root: 'tabs.AppTabs', // or 'stacks.MainStack', or 'drawers.AppDrawer'\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useTranslation],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n### App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'AppDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## FAQs\n\n### Passing params to a modal\n\nThis is most frequently asked question ([here](https://github.com/kanzitelli/rn-navio/issues/19), [here](https://github.com/kanzitelli/rn-navio/issues/20) and [here](https://github.com/kanzitelli/rn-navio/issues/28)). Below you can find two solutions:\n\n#### Old approach using React Navigation object\n\n```tsx\n// Use .navigate method of React Navigation object and pass params\nnavio.N.navigate('MyModal', {screen: 'ScreenName', params: {userId: 'someid'}});\n\n// Access params on a screen\nconst Screen = () => {\n  const {userId} = navio.useParams();\n};\n```\n\n#### New approach with Navio `v0.1.+`\n\n```tsx\n// Use .modals.show method of Navio and pass params\nnavio.modals.show('MyModal', {userId: 'someid'});\n\n// Access params on a screen\nconst Screen = () => {\n  const {userId} = navio.modals.getParams('MyModal');\n};\n```\n\n### Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Future plans\n\n### Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [x] Pass props to Modals.\n- [ ] Make deeplinking easier by providing `linking` prop to screens. [Issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md","gitHead":"9468c155b4bc32d2175a8bfeacde4b26847fe7cd","_id":"rn-navio@0.1.0-rc.0","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-gRz0Lfs0x476xY5JYjq6JtVHbIO2UsTs4DXLg7WFlktb3QFa3QIdr5U0VmLgjXnlUcqY6Qqc0AbnBJ4UOH1rzw==","shasum":"30ea234341a73fe5491ec188ffaa496bac3404d2","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.1.0-rc.0.tgz","fileCount":13,"unpackedSize":70488,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbk7nAOI2CNEzgYYhvhhxVBfCuJ3/Pi44ql/Z+tAG2TAiEA+qbJRZ1yRwUZVtJdCWCroS7EWB2nF5z9oW3X9TXjU5Q="}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.1.0-rc.0_1711390153822_0.2903979151192937"},"_hasShrinkwrap":false},"0.1.0":{"name":"rn-navio","version":"0.1.0","description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","author":{"name":"Batyr","email":"dev@batyr.io"},"homepage":"https://github.com/kanzitelli/rn-navio","bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"clean":"rimraf dist","format":"prettier --write \"{src,}/**/*.{ts,tsx}\"","build":"run-s clean format build:*","build:main":"tsc -p tsconfig.json","release":"run-s release:github release:npm","release:github":"dotenv release-it","release:npm":"npm publish --access public","release:npm:next":"run-s build && npm publish --tag next"},"peerDependencies":{"@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","react":"*","react-native":"*"},"devDependencies":{"@react-native-community/eslint-config":"^3.1.0","@react-navigation/bottom-tabs":"^6.4.0","@react-navigation/drawer":"^6.5.8","@react-navigation/native":"^6.0.13","@react-navigation/native-stack":"^6.9.0","@tsconfig/react-native":"^2.0.2","@types/react":"^18.0.21","dotenv-cli":"^6.0.0","eslint":"^8.24.0","husky":"^8.0.1","npm-run-all":"^4.1.5","prettier":"^2.7.1","pretty-quick":"^3.1.3","release-it":"^15.4.2","rimraf":"^3.0.2","typescript":"^4.8.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"license":"MIT","gitHead":"8a5e267eda74335d2f74be35d9c182590e8d1a87","_id":"rn-navio@0.1.0","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-pmYOHM0cxUqIZa9an8WKSkKKEHuFdkd4v6bgd1YRIh4/fM86ACu9dJYZLK7RJEDrroGd0s4ATCaNpsARf/yBnQ==","shasum":"bf09019263b13582e4c22a1f75944cbd3cb208b8","tarball":"https://registry.npmjs.org/rn-navio/-/rn-navio-0.1.0.tgz","fileCount":13,"unpackedSize":70483,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS+UDWpRus7QhwKJJMDJNDSoXato3O/cjnzqaxeAdSigIgPYcvG8VKfeX3Anaf6TscfaziJQsF7OMYfye1AfNz3L0="}]},"_npmUser":{"name":"kanzitelli","email":"kanzitdinov@gmail.com"},"directories":{},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rn-navio_0.1.0_1711390393049_0.9897433722015645"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-01T17:26:21.216Z","0.0.0":"2022-10-01T17:26:21.436Z","modified":"2024-03-25T18:13:13.710Z","0.0.1-rc.0":"2022-10-01T17:38:52.664Z","0.0.1":"2022-10-01T21:59:41.790Z","0.0.2-rc.0":"2023-01-30T20:58:05.438Z","0.0.2-rc.1":"2023-01-30T23:48:58.448Z","0.0.2-rc.2":"2023-01-31T00:13:06.846Z","0.0.2-rc.3":"2023-02-01T15:55:26.709Z","0.0.2-rc.4":"2023-02-01T16:09:11.717Z","0.0.2-rc.5":"2023-02-02T01:35:10.703Z","0.0.2-rc.6":"2023-02-02T14:29:53.534Z","0.0.2-rc.7":"2023-02-02T15:13:21.705Z","0.0.2-rc.8":"2023-02-02T15:18:44.823Z","0.0.2-rc.9":"2023-02-02T15:43:58.138Z","0.0.2-rc.10":"2023-02-02T16:10:13.967Z","0.0.2-rc.11":"2023-02-02T17:31:41.771Z","0.0.2-rc.12":"2023-02-02T18:50:40.243Z","0.0.2-rc.13":"2023-02-02T19:02:03.473Z","0.0.2-rc.14":"2023-02-02T19:46:35.723Z","0.0.2-rc.15":"2023-02-02T20:47:46.717Z","0.0.2-rc.16":"2023-02-02T20:59:58.406Z","0.0.2-rc.17":"2023-02-03T16:54:04.433Z","0.0.2-rc.18":"2023-02-03T18:09:19.042Z","0.0.2-rc.19":"2023-02-03T18:11:42.353Z","0.0.2":"2023-02-03T19:30:09.803Z","0.0.3-rc.0":"2023-02-14T13:52:48.874Z","0.0.3-rc.1":"2023-02-14T13:57:25.592Z","0.0.3-rc.2":"2023-02-14T14:01:29.857Z","0.0.3":"2023-02-14T14:02:26.185Z","0.0.4":"2023-02-14T14:57:46.903Z","0.0.5-rc.1":"2023-02-14T15:18:42.817Z","0.0.5-rc.2":"2023-02-14T16:53:01.691Z","0.0.5-rc.3":"2023-02-14T17:54:49.736Z","0.0.5-rc.4":"2023-02-14T22:58:03.377Z","0.0.5-rc.5":"2023-02-14T23:03:10.605Z","0.0.5-rc.6":"2023-02-14T23:19:27.299Z","0.0.5-rc.7":"2023-02-15T00:33:17.950Z","0.0.5":"2023-02-15T00:44:07.933Z","0.0.6-rc.0":"2023-02-24T15:13:51.801Z","0.0.6":"2023-02-24T15:42:08.488Z","0.0.7-rc.0":"2023-03-17T23:42:15.131Z","0.0.7-rc.1":"2023-03-19T19:05:55.859Z","0.0.7":"2023-03-19T21:53:18.038Z","0.0.8-rc.0":"2024-03-24T22:13:54.568Z","0.0.8-rc.1":"2024-03-24T22:43:24.709Z","0.0.8-rc.2":"2024-03-24T23:46:43.068Z","0.0.8-rc.3":"2024-03-25T00:15:55.861Z","0.0.8-rc.4":"2024-03-25T00:40:11.497Z","0.0.8-rc.5":"2024-03-25T00:42:07.350Z","0.0.8-rc.6":"2024-03-25T00:43:05.021Z","0.1.0-rc.0":"2024-03-25T18:09:13.995Z","0.1.0":"2024-03-25T18:13:13.244Z"},"maintainers":[{"name":"kanzitelli","email":"kanzitdinov@gmail.com"}],"description":"🧭 Navigation library for React Native. Build once, navigate from anywhere to everywhere!","homepage":"https://github.com/kanzitelli/rn-navio","keywords":["react-native","react-navigation","react-native-navigation","expo","navio","rn-navio"],"author":{"name":"Batyr","email":"dev@batyr.io"},"bugs":{"url":"https://github.com/kanzitelli/rn-navio/issues"},"license":"MIT","readme":"# 🧭 Navio\n\n[![React Native Compatible](https://img.shields.io/badge/React%20Native-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Compatible](https://img.shields.io/badge/𝝠%20Expo-Compatible-brightgreen)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n[![Expo Snack](https://img.shields.io/badge/𝝠%20Expo-Snack-blue)](https://snack.expo.dev/@kanzitelli/rn-navio-snack)\n\nNavio is a navigation library for React Native built on top of [React Navigation](https://github.com/react-navigation/react-navigation). The main goal is to improve DX by building the app layout in one place and using the power of TypeScript to provide autocompletion and other features.\n\nNavio lets you easily create different kinds of apps: bottom tabs-based, simple single-screen, and apps with drawer layouts. It takes care of all boilerplate code configuration for Navigators, Screens, Stacks, Tabs, and Drawers under the hood, so you can focus on developing your app's business logic.\n\n> If `Navio` helped you in a way, support it with ⭐️\n\n☣️ <i>Navio is still a young library and may have breaking changes in the future.</i>\n\n## Quickstart\n\n### Install dependencies\n\n```bash\nyarn add rn-navio\n```\n\n<details>\n<summary>React Navigation dependencies</summary>\n\nAs Navio is built on top of [React Navigation](https://github.com/react-navigation/react-navigation), you will need to have the following libraries installed:\n\n```bash\nyarn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs @react-navigation/drawer\n```\n\nFor more information, please check the [installation steps](https://reactnavigation.org/docs/getting-started/#installation).\n\n</details>\n\n### Create your first Navio layout\n\nThis code will build a simple app with one screen.\n\n```tsx\n// App.tsx\nimport {Text} from 'react-native';\nimport {Navio} from 'rn-navio';\n\nconst Home = () => {\n  return <Text>Home page</Text>;\n};\n\nconst navio = Navio.build({\n  screens: {Home},\n  stacks: {\n    HomeStack: ['Home'],\n  },\n  root: 'stacks.HomeStack',\n});\n\nexport default () => <navio.App />;\n```\n\n<details>\n<summary>Tab-based app with 2 tabs</summary>\n\n```tsx\n// App.tsx\nimport {Text} from 'react-native';\nimport {Navio} from 'rn-navio';\n\nconst Home = () => {\n  return <Text>Home page</Text>;\n};\nconst Settings = () => {\n  return <Text>Settings page</Text>;\n};\n\nconst navio = Navio.build({\n  screens: {Home, Settings},\n  stacks: {\n    HomeStack: ['Home'],\n    SettingsStack: ['Settings'],\n  },\n  tabs: {\n    AppTabs: {\n      layout: {\n        HomeTab: {stack: 'HomeStack'},\n        SettingsTab: {stack: 'SettingsStack'},\n      },\n    },\n  },\n  root: 'tabs.AppTabs',\n});\n\nexport default () => <navio.App />;\n```\n\n</details>\n\nIf you'd like to see more complex and exotic example, please follow [this link](/docs/layout-examples.md).\n\n## Playground\n\n### React Native Starter\n\nYou can bootstrap a new project with Navio from [expo-starter](https://github.com/kanzitelli/expo-starter):\n\n```bash\nnpx cli-rn new app\n```\n\n### Expo Snack\n\nPlay with the library in the [Expo Snack](https://snack.expo.dev/@kanzitelli/rn-navio-snack).\n\n## Navigation API\n\nNavio provides a colleciton of actions to perform navigation within the app. Suppose, you have a `navio` object:\n\n### Common\n\n- `.N`\n\n  Current navigation object from React Navigation. You can perform any of [these actions](https://reactnavigation.org/docs/navigation-actions).\n\n- `.push(name, params?)`\n\n  Adds a route on top of the stack and navigates forward to it.\n\n- `.goBack()`\n\n  Allows to go back to the previous route in history.\n\n- `.setParams(name, params)`\n\n  Allows to update params for a certain route.\n\n- `.setRoot(as, rootName)`\n\n  Sets a new app root. It can be used to switch between `Stacks`, `Tabs`, and `Drawers`.\n\n### Stacks\n\nStacks-related actions.\n\n- `.stacks.push(name)`\n\n  Adds a route on top of the stack and navigates forward to it. It can hide tab bar.\n\n- `.stacks.pop(count?)`\n\n  Takes you back to a previous screen in the stack.\n\n- `.stacks.popToTop()`\n\n  Takes you back to the first screen in the stack, dismissing all the others.\n\n- `.stacks.setRoot(name)`\n\n  Sets a new app root from stacks.\n\n### Tabs\n\nTabs-related actions.\n\n- `.tabs.jumpTo(name)`\n\n  Used to jump to an existing route in the tab navigator.\n\n- `.tabs.updateOptions(name, options)`\n\n  Updates options for a given tab. Used to change badge count.\n\n- `.tabs.setRoot(name)`\n\n  Sets a new app root from tabs.\n\n### Drawers\n\nDrawers-related actions.\n\n- `.drawers.open()`\n\n  Used to open the drawer pane.\n\n- `.drawers.close()`\n\n  Used to close the drawer pane.\n\n- `.drawers.toggle()`\n\n  Used to open the drawer pane if closed, or close if open.\n\n- `.drawers.jumpTo(name)`\n\n  Used to jump to an existing route in the drawer navigator.\n\n- `.drawers.updateOptions(name, options)`\n\n  Updates options for a given drawer menu content. Used to change its title.\n\n- `.drawers.setRoot(name)`\n\n  Sets a new app root from drawers.\n\n### Modals\n\nModals-related actions.\n\n- `.modals.show(name, params)`\n\n  Used to show an existing modal and pass params.\n\n- `.modals.getParams(name)`\n\n  Returns params passed for modal on .show() method.\n\n### Hooks\n\nUseful hooks.\n\n- `.useN()`\n\n  Duplicate of `useNavigation()` hook from React Navigation. Used for convenience inside screens to get access to navigation object. [Docs](https://reactnavigation.org/docs/use-navigation/).\n\n- `.useR()`\n\n  Duplicate of `useRoute()` hook from React Navigation. Used to convenience inside screens to get access to route object. [Docs](https://reactnavigation.org/docs/use-route)\n\n- `.useParams()`\n\n  Used for quick access to navigation route params. Used to convenience inside screens when passing params.\n\n## Layout structure\n\nNavio requires `screens` and at least one `stacks` to build an app layout. `tabs`, `drawers`, `modals`, `root`, `hooks` and `defaultOptions` are optional and used for more advanced app layouts.\n\n### Screens\n\nThese are main bricks of your app with Navio. You can reuse them for any stack you want to build.\n\nA screen can be defined by passing a plain React component. If you'd like to pass some options which describe the screen, then you can pass an object as well.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nimport {Screen1, Screen3} from '@app/screens';\n\nconst navio = Navio.build({\n  screens: {\n    One: Screen1,\n    Two: () => {\n      return <></>;\n    }\n    Three: {\n      component: Screen3,\n      options: (props) => ({\n        title: 'ThreeOne'\n      })\n    }\n  },\n});\n```\n\n</details>\n\n### Stacks\n\nStacks are built using `Screens` that have been defined before. IDEs should help with autocompletion for better DX.\n\nA stack can be defined by passing an array of `Screens`. If you'd like to pass some options down to stack navigator, then you can pass an object.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // screens are taken from previous step\n  stacks: {\n    MainStack: ['One', 'Two'],\n    ExampleStack: {\n      screens: ['Three'],\n      navigatorProps: {\n        screenListeners: {\n          focus: () => {},\n        },\n      },\n    },\n  },\n});\n```\n\n</details>\n\n### Tabs\n\nTabs are built using `Screens`, `Stacks`, and `Drawers` that have been defined before.\n\nTabs can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Drawers`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // screens and stacks are taken from previous step\n  tabs: {\n    AppTabs: {\n      layout: {\n        MainTab: {\n          stack: ['One', 'Two'],\n          // or drawer: 'SomeDrawer',\n          options: () => ({\n            title: 'Main',\n          }),\n        },\n        ExampleTab: {\n          stack: 'ExampleStack',\n          // or drawer: 'SomeDrawer',\n          options: () => ({\n            title: 'Example',\n          }),\n        },\n      },\n      options: { ... }, // optional\n      navigatorProps: { ... }, // optional\n    },\n  },\n});\n```\n\n</details>\n\n### Drawers\n\nDrawers are built using `Screens`, `Stacks`, and `Tabs` that have been defined before.\n\nDrawers can be defined by passing an object with `content` and, optionally, props for navigator.\n\nContent can take as a value one of `Stacks`, `Tabs`, array of `Screens`, or an object that describes stack and options for bottom tab (describing title, icon, etc.).\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // screens and stacks are taken from previous step\n  drawers: {\n    MainDrawer: {\n      layout: {\n        Main: 'MainStack',\n        Example: 'ExampleStack',\n        Playground: ['One', 'Two', 'Three'],\n      },\n      options: { ... }, // optional\n      navigatorProps: { ... }, // optional\n    },\n  },\n});\n```\n\n</details>\n\n### Modals\n\nModals are built using `Screens` and `Stacks` that have been defined before. You can show/present them at any point of time while using the app.\n\nA modal can be defined by passing an array of `Screens` or a name of `Stacks`.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // screens and stacks are taken from previous step\n  modals: {\n    ExampleModal: {\n      stack: 'ExampleStack',\n      options: { ... }, // optional\n    },\n  },\n});\n```\n\n</details>\n\n### Root\n\nThis is a root name of the app. It can be one of `Stacks`, `Tabs` or `Drawers`.\n\nYou can change the root of the app later by `navio.setRoot('drawers', 'AppDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  // stacks, tabs and drawers are taken from previous examples\n  root: 'tabs.AppTabs', // or 'stacks.MainStack', or 'drawers.AppDrawer'\n});\n```\n\n</details>\n\n### Hooks\n\nList of hooks that will be run on each generated `Stacks`, `Tabs` or `Drawers` navigators. Useful for dark mode or language change.\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  hooks: [useTranslation],\n});\n```\n\n</details>\n\n### Default options\n\nDefault options that will be applied per each `Stacks`'s, `Tabs`'s, `Drawer`'s, or `Modal`'s screens and containers generated within the app.\n\n`Note` All containers and `Tabs`'s and `Drawer`'s screens options have `headerShown: false` by default (in order to hide unnecessary navigation headers). You can always change them which might be useful if you want to have a native `< Back` button when hiding tabs (pushing new `Stack`).\n\n<details>\n<summary>Example</summary>\n\n```tsx\nconst navio = Navio.build({\n  defaultOptions: {\n    stacks: {\n      screen: {\n        headerShadowVisible: false,\n        headerTintColor: Colors.primary,\n      },\n      container: {\n        headerShown: true,\n      },\n    },\n    tabs: {\n      screen: tabDefaultOptions,\n    },\n    drawer: {\n      screen: drawerDefaultOptions,\n    },\n  },\n});\n```\n\n</details>\n\n### App\n\nNavio generates root component for the app after the layout is defined. It can be used to directly pass it to `registerRootComponent()` or to wrap with extra providers or add more logic before the app's start up.\n\n```tsx\nconst navio = Navio.build({...});\n\nexport default () => <navio.App />\n```\n\nYou can change the root of the app by `navio.setRoot('drawers', 'AppDrawer')` or by changing `initialRouteName` of `<navio.App />` component.\n\n## FAQs\n\n### Passing params to a modal\n\nThis is most frequently asked question ([here](https://github.com/kanzitelli/rn-navio/issues/19), [here](https://github.com/kanzitelli/rn-navio/issues/20) and [here](https://github.com/kanzitelli/rn-navio/issues/28)). Below you can find two solutions:\n\n#### Old approach using React Navigation object\n\n```tsx\n// Use .navigate method of React Navigation object and pass params\nnavio.N.navigate('MyModal', {screen: 'ScreenName', params: {userId: 'someid'}});\n\n// Access params on a screen\nconst Screen = () => {\n  const {userId} = navio.useParams();\n};\n```\n\n#### New approach with Navio `v0.1.+`\n\n```tsx\n// Use .modals.show method of Navio and pass params\nnavio.modals.show('MyModal', {userId: 'someid'});\n\n// Access params on a screen\nconst Screen = () => {\n  const {userId} = navio.modals.getParams('MyModal');\n};\n```\n\n### Navio + React Navigation\n\nNavio can be used among with [React Navigation](https://github.com/react-navigation/react-navigation). All hooks, actions, deep linking, and other stuff from [React Navigation](https://github.com/react-navigation/react-navigation) should work fine with Navio.\n\nIf you've found any diffilculties with using Navio and [React Navigation](https://github.com/react-navigation/react-navigation), feel free to open an issue for a discussion.\n\n## Future plans\n\n### Enhancements\n\nThere are still some things I would like to add to the library:\n\n- [x] `.updateOptions()` for specific tab and drawer.\n- [x] Tabs can be placed inside Drawer and vice versa.\n- [x] Pass props to Modals.\n- [ ] Make deeplinking easier by providing `linking` prop to screens. [Issue](https://github.com/kanzitelli/expo-starter/issues/29).\n- [ ] Make Navio universal by adding [RNN](https://github.com/wix/react-native-navigation) and [rnn-screens](https://github.com/kanzitelli/rnn-screens).\n- [ ] Extend Navio funtionality and app layout.\n- [ ] Easy integration of Navio with React Navigation (eg. navio.Stack())\n- [ ] TypeScript issues @ `index.tsx` file.\n\nFeel free to open an issue for any suggestions.\n\n## License\n\nThis project is [MIT licensed](/LICENSE.md)\n","readmeFilename":"README.md"}