{"id":13491982,"url":"https://github.com/martinmoec/fable-react-native-how-to","last_synced_at":"2026-01-16T09:29:29.100Z","repository":{"id":98072889,"uuid":"241969911","full_name":"martinmoec/fable-react-native-how-to","owner":"martinmoec","description":"A short step-by-step guide to get started developing mobile apps with F# and Fable in React Native","archived":false,"fork":false,"pushed_at":"2021-07-21T19:14:45.000Z","size":27,"stargazers_count":40,"open_issues_count":0,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-08-01T19:39:59.836Z","etag":null,"topics":["fable","fable-elmish","fable-react-native","fsharp","fsharp-app-development","fsharp-react-native","react-native"],"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}},"created_at":"2020-02-20T19:21:06.000Z","updated_at":"2024-07-31T19:01:05.000Z","dependencies_parsed_at":"2023-05-23T10:15:34.808Z","dependency_job_id":null,"html_url":"https://github.com/martinmoec/fable-react-native-how-to","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-react-native-how-to","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinmoec%2Ffable-react-native-how-to/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinmoec%2Ffable-react-native-how-to/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martinmoec%2Ffable-react-native-how-to/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martinmoec","download_url":"https://codeload.github.com/martinmoec/fable-react-native-how-to/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222364165,"owners_count":16972423,"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-elmish","fable-react-native","fsharp","fsharp-app-development","fsharp-react-native","react-native"],"created_at":"2024-07-31T19:01:02.110Z","updated_at":"2026-01-16T09:29:29.078Z","avatar_url":"https://github.com/martinmoec.png","language":"F#","readme":"# How-to: Set up React Native with F# and Fable\n\nThis is a step-by-step guide which aims to help you set up a React Native project with F# and Fable. The [Fable compiler](https://github.com/fable-compiler/Fable) generates JavaScript from your F# source code, and enables you to write React Native apps targeting iOS and Android almost completely through F#! Since the Fable compiler is just generating pure JavaScript from our F# source code we should be able to target any platform through React Native (Windows, MacOS, Web), though i have not tested this myself. Feel free to share your own experience with any of these platforms.\n\nSample files for getting started can be found within this repository. \n\n## Requirements\n- React Native\n- Watchman\n- Node.js\n- .NET Core \u003e= 3.0\n- npm\n\n# Setup a new React Native project\n\nThis how-to will not go into detail on how to install React Native and how React Native works. When you have React Native installed you can create a new project by running `react-native init \u003cproject name\u003e`\n\nYou should test that your basic React Native project compiles/runs before moving further.\n\n`npx react-native run-ios` or `npx react-native run-android`\n\n# Setup the F# project\nCreate a folder to hold your F# project and add a `.fsproj` file with a simple `.fs` file. In this example i will create a `src` folder in the project root directory which contains the files `App.fsproj` and `App.fs`.\n\n## `App.fsproj`\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cProject Sdk=\"Microsoft.NET.Sdk\"\u003e\n  \u003cPropertyGroup\u003e\n    \u003cTargetFramework\u003enetstandard2.1\u003c/TargetFramework\u003e\n  \u003c/PropertyGroup\u003e\n  \u003cItemGroup\u003e\n    \u003cCompile Include=\"App.fs\" /\u003e\n  \u003c/ItemGroup\u003e\n  \u003cItemGroup\u003e\n    \u003cPackageReference Include=\"Fable.Core\" Version=\"3.1.5\" /\u003e\n    \u003cPackageReference Include=\"Fable.Elmish\" Version=\"3.1.0\" /\u003e\n    \u003cPackageReference Include=\"Fable.Elmish.React\" Version=\"3.0.1\" /\u003e\n    \u003cPackageReference Include=\"Fable.React\" Version=\"7.0.1\" /\u003e\n    \u003cPackageReference Include=\"Fable.React.Native\" Version=\"2.6.1\" /\u003e\n  \u003c/ItemGroup\u003e\n\u003c/Project\u003e\n```\n\n## `App.fs`\n```fsharp\nmodule App\n\nopen Elmish\nopen Elmish.React\nopen Elmish.ReactNative\nopen Fable.ReactNative\n\n// A very simple app which increments a number when you press a button\n\ntype Model = {\n    Counter : int\n}\n\ntype Message =\n    | Increment \n\nlet init () = {Counter = 0}, Cmd.none\n\nlet update msg model =\n    match msg  with\n    | Increment -\u003e\n        {model with Counter = model.Counter + 1}, Cmd.none \n\nmodule R = Fable.ReactNative.Helpers\nmodule P = Fable.ReactNative.Props\nopen Fable.ReactNative.Props\n\nlet view model dispatch =\n    R.view [\n        P.ViewProperties.Style [ \n            P.FlexStyle.Flex 1.0 \n            P.FlexStyle.JustifyContent JustifyContent.Center\n            P.BackgroundColor \"#131313\" ]\n    ] [\n        \n        \n        R.text [\n            P.TextProperties.Style [ P.Color \"#ffffff\" ]\n        ] \"Press me\"\n        |\u003e R.touchableHighlightWithChild [\n            P.TouchableHighlightProperties.Style [\n                P.FlexStyle.Padding (R.dip 10.)\n            ]\n            P.TouchableHighlightProperties.UnderlayColor \"#f6f6f6\"\n            OnPress (fun _ -\u003e dispatch Increment) \n        ]\n\n        R.text [\n            P.TextProperties.Style [\n                P.Color \"#ffffff\"\n                P.FontSize 30.\n                P.TextAlign P.TextAlignment.Center\n            ]\n        ] (string model.Counter)\n    ]\n\nProgram.mkProgram init update view\n|\u003e Program.withConsoleTrace\n|\u003e Program.withReactNative \"Your project name\" // CHANGE ME\n|\u003e Program.run\n```\n\nIMPORTANT: Feed the name of your project in `Program.withReactNative` (the same you used for `react-native init` )\n\n# Install Fable tool\n\n`dotnet new tool-manifest \u0026\u0026 dotnet tool install fable`\n\n# Install npm-packages\n\nInstall the [@babel/preset-env](https://www.npmjs.com/package/@babel/preset-env) npm-module as a dev-dependency. See the documentation of these for further info.\n\n`npm install --save-dev @babel/preset-env` \n\nYou will also need to install the [buffer](https://www.npmjs.com/package/buffer) npm-module, along with the [@react-native-community/netinfo](https://www.npmjs.com/package/@react-native-community/netinfo) module which is required by Fable.React.Native.\n\n`npm install buffer @react-native-community/netinfo`\n\nYou can now compile your F# project to Javascript by simply running `dotnet fable ./src -o ./out`\n(Note the `-o` parameter specifying the output folder to dump the .js files) \n\nIf you get a compilation error it is likely to be caused by your `babel.config.js` file, and i've experienced that the easiest way to get rid of this i simply by deleting the `babel.config.js` file altogether. You can also provide a configuration file as shown below. However, someone with a better Babel understanding than me could probably provide a better configuration/setup (suggestions welcomed).\n\n#### Tips:\n```json\n\"build\": \"dotnet fable ./src -o ./out\",\n\"watch\": \"dotnet fable watch ./src -o ./out\"\n```\nAdd the above JSON to the `scripts` section of the `packages.json` file and simply call `npm run build` to compile. Run `npm run watch` in order to watch for changes and enable hot-reloading as you change your F# code.\n\n# Importing the generated JavaScript\nNow you can compile your F# code to JavaScript and dump it to a folder (`./out` used in this example).\n\n1. Delete your default `App.js` file in the root directory.\n2. Update your `index.js` file:\n    ```js\n    /**\n    * @format\n    */\n\n    import { AppRegistry } from 'react-native';\n    import * as App from './out/App';\n    import { name as appName } from './app.json';\n    ```\nNotice that we import App from our generated files in the `out` folder. The app registration call is also removed, as this is now handled in our F# code.\n\n# You're good to go! \n1. Compile F# to JavaScript and watch for changes\n    - `dotnet fable watch ./src -o ./out`\n    - or `npm run watch` if you altered the `scripts` section of `packages.json`\n2. Run app\n    - `npx react-native run-ios|android`\n3. Watch as the app updates along with your F# code. Enjoy!\n\n# More\n- For larger apps you might want to opt out of Elmish and include navigation. Take a look at the following [how-to](navigation)","funding_links":[],"categories":["F#","Learn"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinmoec%2Ffable-react-native-how-to","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartinmoec%2Ffable-react-native-how-to","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartinmoec%2Ffable-react-native-how-to/lists"}