Demo of SAFE-Stack applied to React Native for cross platform native mobile apps
Clone or download
forki Merge pull request #60 from thitemple/master
Removes inline keyword from styling functions
Latest commit 0e61e45 Jun 25, 2018
Permalink
Failed to load latest commit information.
.paket New paket bootstrapper that works around github TLS disaster Feb 24, 2018
.vscode Fable 1 support (#20) Jun 30, 2017
android Use new RN buttons Feb 14, 2018
demodata Fix status Oct 5, 2016
images Rebrand with SAFE Sep 21, 2017
ios Update all deps and move to netcore 2 (#37) Oct 1, 2017
src Removes inline keyword from styling functions Jun 25, 2018
tests/IntegrationTests Update to ReactNative 0.53 Feb 14, 2018
.buckconfig Upgrade to React Native 0.36 Nov 17, 2016
.gitattributes Update ReactNative to 0.45.1 (#23) Jul 7, 2017
.gitignore Update all deps and move to netcore 2 (#37) Oct 1, 2017
.watchmanconfig Initial commit Jul 25, 2016
LICENSE Create LICENSE Jan 1, 2018
Nuget.config Update Fable Jun 13, 2017
README.md Update to previous readme change. Apr 24, 2018
RELEASE_NOTES.md Add a build script Nov 17, 2016
app.json Update ReactNative to 0.45.1 (#23) Jul 7, 2017
build.cmd Add a build script Nov 17, 2016
build.fsx Merge pull request #49 from ctaggart/path-setup Mar 22, 2018
build.sh Tweak the android ANDROID_HOME export to only apply if not set (#40) Oct 2, 2017
debug.cmd Add a build script Nov 17, 2016
index.android.js Update elmish Dec 1, 2016
index.ios.js Update elmish Dec 1, 2016
index.windows.js Update elmish Dec 1, 2016
jsconfig.json Update Fable Jun 13, 2017
package.json update react-native to latest 0.54.2 Mar 21, 2018
paket.dependencies Update all deps and move to netcore 2 (#37) Oct 1, 2017
paket.lock Update to ReactNative 0.53 Feb 14, 2018
splitter.config.js Update all deps and move to netcore 2 (#37) Oct 1, 2017
yarn.lock update react-native to latest 0.54.2 Mar 21, 2018

README.md

React Native + SAFE demo

This is a demo application for React Native development in F# using Fable and the SAFE stack. SAFE is a technology stack that brings together several technologies into a single, coherent stack for typesafe, flexible end-to-end web-enabled applications that are written entirely in F#.

SAFE-Stack

If you want to try it out then please do the following:

Requirements

On OS X/macOS, make sure you have OpenSSL installed and symlinked correctly, as described here: https://www.microsoft.com/net/core#macos.

dotnet SDK 2.0.0 is required but it will be downloaded automatically by the build script if not installed (see below). Other tools like Paket or FAKE will also be installed by the build script.

Make sure React Native works

Running F# code on React Native

  • Pull latest master
  • Open Android Simulator or connect a device in debug mode via USB
  • Run build.cmd debug from command prompt
  • Go to android device simulator and you should see something like

Device Running

  • Go to the F# source in VS Code make a change and save the file
  • Fable watch should pick up this change automatically and compile it
  • Go to android device simulator - change should be visible

This could look like:

Hot loading

Error handling

Unauthorized device

If you run build.cmd debug and it compiles everything, but nothing happens... go to the packager output and search for hints. One pitfall might be "Skipping device, Device is UNAUTHORIZED". With

adb devices

you can see the list of devices, probably one of them is marked as UNAUTHORIZED. First, try

adb kill-server

and try it again. If it doesn't help, you can push the public key onto the device again:

cd ~/.android && adb push adbkey.pub /data/misc/adb/adb_keys

After rebooting the device, access should be granted again.

Licenses not accepted

If the above does not work, and still nothing happens after it compiles everything, the licenses may need to be accepted on your computer. To accept the licenses run the following commands for your platform

On a Mac run the following

$ANDROID_HOME/tools/bin/sdkmanager --update

On Windows run the following

“%ANDROID_HOME%\tools\bin\sdkmanager” --update

Re-run the build script and everything should work.

The app is not updating on saving code changes

If the app does not update whenever you save an F# code change even after Fable compilation succeeds, you may need to enable hot reloading from the in-app developer menu. It is accessed by opening the app and shacking the device or causing the emulator to simulate a shake or by using the command:

adb shell input keyevent 82

Click on "Enable Hot Reloading". Now when you save a code change and Fable compiles it, you should see the result in the app on your device or emulator automatically.