{"id":13726322,"url":"https://github.com/callstackincubator/bs-react-navigation","last_synced_at":"2025-05-07T21:32:03.070Z","repository":{"id":57190546,"uuid":"159833859","full_name":"callstackincubator/bs-react-navigation","owner":"callstackincubator","description":"A fast, declarative navigation for React Native, based on React Navigation","archived":true,"fork":false,"pushed_at":"2019-04-07T09:54:03.000Z","size":271,"stargazers_count":55,"open_issues_count":8,"forks_count":5,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-10T07:28:33.765Z","etag":null,"topics":["bs-react-native","bs-react-navigation","react-native","react-navigation"],"latest_commit_sha":null,"homepage":null,"language":"OCaml","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/callstackincubator.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null}},"created_at":"2018-11-30T14:20:06.000Z","updated_at":"2024-02-23T19:43:18.000Z","dependencies_parsed_at":"2022-09-13T02:51:10.081Z","dependency_job_id":null,"html_url":"https://github.com/callstackincubator/bs-react-navigation","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstackincubator%2Fbs-react-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstackincubator%2Fbs-react-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstackincubator%2Fbs-react-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/callstackincubator%2Fbs-react-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/callstackincubator","download_url":"https://codeload.github.com/callstackincubator/bs-react-navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224654220,"owners_count":17347697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bs-react-native","bs-react-navigation","react-native","react-navigation"],"created_at":"2024-08-03T01:02:59.216Z","updated_at":"2024-11-14T16:33:40.569Z","avatar_url":"https://github.com/callstackincubator.png","language":"OCaml","readme":"# bs-react-navigation\n\n[![Build Status][build-badge]][build]\n[![Version][version-badge]][package]\n[![MIT License][license-badge]][license]\n[![PRs Welcome][prs-welcome-badge]][prs-welcome]\n\n\u003e A fast, declarative navigation for React Native, based on React Navigation\n\n## Status\n\n\u003e Currently we are not supporting the nested navigators.\n\nSupported navigators:\n\n- [Stack Navigator](#StackNavigator)\n- [Switch Navigator](#SwitchNavigator)\n- [Tab Navigator](#TabNavigator)\n- [Drawer Navigator](#DrawerNavigator)\n\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```she\nyarn add bs-react-navigation\n```\n\nAfter installation, you will need to install `react-navigation` and its peer dependencies. Please follow official installation instructions [here](https://reactnavigation.org/docs/en/getting-started.html#installation).\n\n## Examples\n\n- example built-in library - check [/example](/example)\n\n## API\n\nFor all navigator you need follow some steps:\n\n### Config\n\nFirst of all, create a config file like `Config.re` and there define your all routes. It sould be a simple Variant Type with your routes/tabs/items\n\n```ReasonML\ntype route =\n  | Home\n  | UserDetails;\n```\n\n\u003e It is important to create a separate file in order to avoid circular dependencies when you try to import navigation dependencies.\n\n### Navigation prop for compoenents\n\nFor our components we need to create navigationProp type, which is created from a list of our routes defined in [Config.re](#Config).\n\n```ReasonML\ntype navigationProp = StackNavigator.navigation(route);\n```\n\n\u003e Each Navigator provides their own navitationProp type.\n\nExample:\n\n```ReasonML\nlet make = (~navigation: Config.navigationProp, _children) =\u003e {\n  ...component,\n  render: _self =\u003e\n    \u003cView\u003e\n      \u003cButton\n        title=\"Go to home screen\"\n        onPress={() =\u003e navigation.push(Home)}\n      /\u003e\n      \u003cButton\n        title=\"Go back\"\n        onPress={() =\u003e navigation.goBack()}\n      /\u003e\n    \u003c/View\u003e,\n};\n```\n\n### StackNavigator\n\n#### Configuration\n\nUse a functor `Create` from `StackNavigator` module and pass a configuration module which needs to include a few pieces:\n\n- `route` - list of your routes, use variant from your `Config.re`\n- `initialRoute` - the first screen of your navigation state\n- `getScreen` - it's a function which as a parameters get the `currentRoute` and `navigation` props. As a return, you should create a tuple where the first element is a screen component and the second is screen configuration.\n\n#### Route Params\n\nIf your route has a parameter you should pass them to you component inside `getScreen` function.\n\nexmaple:\n\n```ReasonML\n\nlet getScreen = (currentRoute, navigation) =\u003e\n  switch (currentRoute) {\n  | Home =\u003e (\u003cScreen navigation /\u003e, screenOptions(~title=\"Home\", ()))\n  | UserDetails(userId) =\u003e (\n      \u003cScreen navigation text={\"Browsing profile of: \" ++ userId} /\u003e,\n      screenOptions(~title=\"Hello \" ++ userId, ()),\n    )\n  };\n```\n\n### SwitchNavigator\n\nThe API for creating navigator is almost the same as in Stack Navigator:\n\n```ReasonML\nmodule Switch =\n  SwitchNavigator.Create({\n    open SwitchNavigator;\n\n    type route = Config.route;\n\n    let initialRoute = Login;\n\n    let getScreen = (currentRoute, navigation) =\u003e\n      switch (currentRoute) {\n      | Login =\u003e (\u003cLogin navigation /\u003e, screenOptions())\n      | LoggedIn =\u003e (\u003cLoggedIn navigation /\u003e, screenOptions())\n      };\n  });\n```\n\n### TabNavigator\n\nTab needs one additional setting compared to the Switch or Stack Navigator.\n\n```ReasonML\nlet order: list(tabs);\n```\n\nFull example:\n\n```ReasonML\nmodule Tabs =\n  TabNavigator.Create({\n    open TabNavigator;\n\n    type tabs = Config.tabs;\n\n    let options = options(~activeTintColor=\"#847\", ());\n\n    let order = [Info, Profile, Settings];\n\n    let getTab = tab =\u003e {\n      switch (tab) {\n      | Info =\u003e (\u003cTabs.Info navigation/\u003e, screenOptions(~title=\"Info\"))\n      | Profile =\u003e (\u003cTabs.Profile navigation/\u003e, screenOptions(~title=\"Profile\"))\n      | Settings =\u003e (\u003cTabs.Settings navigation/\u003e, screenOptions(~title=\"Settings\"))\n      };\n    };\n  });\n```\n\n### DrawerNavigator\n\nDrawer needs one additional setting compared to the Switch or Stack Navigator.\n\n```ReasonML\nlet items: list(item);\n```\n\nFull example:\n\n```ReasonML\nmodule Drawer =\n  DrawerNavigation.Create({\n    open DrawerNavigation;\n    type item = Config.item;\n\n    let items = [Dashbord, Settings];\n\n    let options = options(~width=150, ());\n\n    let order = [Dashbord, Settings];\n\n    let getItem = currentItem =\u003e\n      switch (currentItem) {\n      | Dashbord =\u003e (\u003cItems.Dashboard /\u003e, screenOptions(~title=\"Info\")\n      | Settings =\u003e (\u003cItems.Settings /\u003e, screenOptions(~title=\"Settings\")\n      };\n  });\n```\n\n## Prior art\n\nThis library is a continuation of our efforts to provide a first-class navigation for `bs-react-native` applications.\n\nIf you are coming from `rebolt-navigation` or `reroute-native` (our previous attempts at solving this problem),\nplease open an issue and let us know. We will help you find the best migration path to adopt this library.\n\n## Developing example app\n\nInside the root folder, run BS build script:\n\n```sh\nyarn start\n```\n\nnext, go to the example app and start the watch script for building the ReasonML code:\n\n```sh\nyarn watch\n```\n\nThe last step is to start the [Expo](https://expo.io/learn) packager inside your example app\n\n```sh\nyarn start\n```\n\n## License\n\nSee Reason license in [LICENSE.txt](LICENSE.txt).\n\n\u003c!-- badges --\u003e\n\n[build-badge]: https://img.shields.io/circleci/project/github/callstackincubator/rebolt-navigation/master.svg?style=flat-square\n[build]: https://circleci.com/gh/callstackincubator/rebolt-navigation\n[version-badge]: https://img.shields.io/npm/v/rebolt-navigation.svg?style=flat-square\n[package]: https://www.npmjs.com/package/rebolt-navigation\n[license-badge]: https://img.shields.io/npm/l/rebolt-navigation.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs-welcome]: http://makeapullrequest.com\n","funding_links":[],"categories":["OCaml"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstackincubator%2Fbs-react-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcallstackincubator%2Fbs-react-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcallstackincubator%2Fbs-react-navigation/lists"}