{"id":13670022,"url":"https://github.com/martinmoec/Fable.ReactNative.Navigation","last_synced_at":"2025-04-27T09:31:24.062Z","repository":{"id":98072956,"uuid":"289964898","full_name":"martinmoec/Fable.ReactNative.Navigation","owner":"martinmoec","description":"Fable bindings for the @react-navigation/native, @react-navigation/stack and  @react-navigation/bottom-tabs modules.","archived":false,"fork":false,"pushed_at":"2021-03-29T14:09:02.000Z","size":22,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-08-03T09:07:00.947Z","etag":null,"topics":["fable","fable-react-native","fsharp","react-native","react-navigation"],"latest_commit_sha":null,"homepage":"","language":"F#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/martinmoec.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-08-24T15:23:20.000Z","updated_at":"2022-03-02T05:33:00.000Z","dependencies_parsed_at":"2023-05-23T10:15:17.146Z","dependency_job_id":null,"html_url":"https://github.com/martinmoec/Fable.ReactNative.Navigation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinmoec%2FFable.ReactNative.Navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinmoec%2FFable.ReactNative.Navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinmoec%2FFable.ReactNative.Navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinmoec%2FFable.ReactNative.Navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martinmoec","download_url":"https://codeload.github.com/martinmoec/Fable.ReactNative.Navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224066996,"owners_count":17250096,"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":["fable","fable-react-native","fsharp","react-native","react-navigation"],"created_at":"2024-08-02T09:00:30.015Z","updated_at":"2024-11-11T07:31:04.066Z","avatar_url":"https://github.com/martinmoec.png","language":"F#","readme":"# Fable.ReactNative.Navigation\n\nProvides Fable bindings for the stack and bottom-tabs navigators of [React Navigation](https://reactnavigation.org). \n\nView the requirements and read the docs on getting started with React Navigation [here](https://reactnavigation.org/docs/getting-started). \n\nWhen building Elmish-applications in React Native larger than the infamous \"Counter app\", navigating in the native way of iOS and Android quickly becomes wonky. This package lets you make use of the stack navigator of React Navigation, in order to get a native feel and look when navigating in your Fable React Native apps.\n\n## Install\n\nAssuming a similar setup to the one described in [this](https://github.com/martinmoec/fable-react-native-how-to) how-to.\n- Add the ```Fable.ReactNative.Navigation``` Nuget package to your F# project\n\n- Install the required npm-modules\n    * ```@react-navigation/native```, ```@react-navigation/stack```,```@react-navigation/bottom-tabs```, ```@react-navigation/drawer```, ```react-native-gesture-handler```, ```react-native-reanimated```, ```react-native-safe-area-context```, ```react-native-screens```,  ```@react-native-community/masked-view``` (See the React Navigation docs)\n\n## Register your application\n\nWhen using React Navigation you, simplified, provide the app with a set of screens and a function for rendering these, and React Navigation will handle the rest. The classic Elmish setup does not work too well with this approach. As an alternative to registering your application with Elmish at the core through ```withReactNative```, this package provides a helper function for registering your application. ```Fable.ReactNative.Navigation.Helpers.registerApp``` takes the name of your application (from ```react-native init```) and your base ```navigationContainer``` as an input. For example, if i followed the how-to linked at the top, with ```react-native init demo```:\n\n```fsharp\nopen Fable.ReactNative.Navigation\n\nlet homePage () : Fable.React.ReactElement = \n    ...\n\nlet loginPage () : Fable.React.ReactElement =\n    ...\n\nlet StackNavigator = Stack.CreateStackNavigator()\nlet render = \n    navigationContainer [] [\n        StackNavigator.Navigator.navigator [\n            Stack.NavigatorProps.InitialRouteName \"home\"\n        ] [\n            StackNavigator.Screen.screen \"home\" homePage [] []\n            StackNavigator.Screen.screen \"login\" loginPage [] []\n        ]\n    ]\n\nHelpers.registerApp \"demo\" render\n```\n\nHere an app is registered with two screens, ```home``` and ```login```, which will be handled with the ```homePage``` and ```loginPage``` functions respectively. The navigation handler of React Navigate will call the respected function for each screen added to the stack. From here you can build the functionality for each screen as you wish, for example using an MVU-architecture with ```useReducer``` (see sample). \n\n## Navigating and passing data between screens\n\nThe navigation handler of React Navigate provides every screen-handler function with a navigation-object. You can access this, with its bindings, as follows.\n\n```fsharp\nopen Fable.ReactNative.Navigation\nopen Fable.ReactNative.Navigation.Types\n\n...\n\nlet loginPage ( navigation : INavigation\u003cint\u003e) = \n    ...\n\nlet StackNavigator = Stack.CreateStackNavigator ()\nlet render = \n    navigationContainer [] [\n        StackNavigator.Navigator.navigator [\n            Stack.NavigatorProps.InitialRouteName \"home\"\n        ] [\n            StackNavigator.Screen.screen \"home\" home [] []\n            StackNavigator.Screen.screen \"login\" loginPage [] []\n        ]\n    ]\n\nHelpers.registerApp \"demo\" render\n```\n\nHere the ```loginPage``` expects to receive a navigation object, where the data payload is an integer. The payload can be accessed through ```navigation.route.params```. \n\nThe navigation object provides functions for navigating further. For example, you can navigate to the ```home``` page using \n```fsharp\nnavigation.navigation.navigate \"home\"\n```\nwhere ```\"home\"``` is the name of the screen registered in the ```navigationContainer```. Other examples are ```push(\"home\")```, ```goBack()```, ```pop()``` and ```popToTop()```. See the React Navigation docs for more.\n\nThe package provides you with helper functions for navigating and pushing screens with data, ```navigateWithData``` and ```pushWithData```, which takes the navigation object, the screen name and your data.\n\n```fsharp\nopen Fable.ReactNative.Navigation\nopen Fable.ReactNative.Navigation.Types\n\nlet HomeScreenName = \"home\"\nlet LoginScreenName = \"login\"\n\nlet homePage ( nav : INavigation\u003c_\u003e ) = \n    view [] [\n\n        text [] \"Navigate\"\n        |\u003e touchableHighlightWithChild [\n            OnPress ( fun _ -\u003e navigateWithData nav LoginScreenName \"This text is passed\" ) \n        ]\n    ]\n\nlet loginPage ( nav : INavigation\u003cstring\u003e ) =\n    view [] [\n        text [] ( sprintf \"Received: %s\" nav.route.params )\n    ]\n\nlet StackNavigator = Stack.CreateStackNavigator ()\nlet render = \n    navigationContainer [] [\n        StackNavigator.Navigator.navigator [\n            Stack.NavigatorProps.InitialRouteName HomeScreenName\n        ] [\n            StackNavigator.Screen.screen HomeScreenName homePage [] []\n            StackNavigator.Screen.screen LoginScreenName loginPage [] []\n        ]\n    ]\n\nHelpers.registerApp \"demo\" render\n```\n\n## Notice\n\nAs you might have noticed, the type-safety of F# is not preserved between the data passed with the navigation function and the screen-function receiving the data, as it essentially is the navigation handler of React Navigation which will call your screen functions. \n","funding_links":[],"categories":["Libraries"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinmoec%2FFable.ReactNative.Navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinmoec%2FFable.ReactNative.Navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinmoec%2FFable.ReactNative.Navigation/lists"}