Fable.ReactNative.FontAwesome - Fable bindings for react-native-fontawesome

Provides simple Fable bindings for the react-native-fontawesome module for Fable.ReactNative projects.

Setup

Add the nuget to your F# project:

paket add Fable.ReactNative.FontAwesome

You will need to install the react-native-fontawesome package to your react-native project.

yarn add react-native-fontawesome

You will also need to add the .ttf files to your project. You can get these here.

How to add the .ttf files:

• iOS
• Android

For further info on the npm module see the react-native-fontawesome project.

Samples

The fa function takes a Font Awesome class string and a list of Fable.ReactNative style properties. See FontAwesome for class names.

Minimum sample:

open Fable.ReactNative.FontAwesome

fa "fas fa-arrow-right" [] 

Sample use with Fable.ReactNative:

...
// Fable.ReactNative modules
module R = Fable.ReactNative.Helpers
open Fable.ReactNative.Props

open Fable.ReactNative.FontAwesome

let view model dispatch = 
    R.view [] [

        // plus icon
        fa "far fa-plus" []
        

        // trash icon with styling
        fa "fas fa-trash" [
            TextAlign TextAlignment.Center
            FontSize 20.
            Color "#1bc489"
        ]


        // button with arrow
        fa "fas fa-arrow-right" [
            TextAlign TextAlignment.Center
            FontSize 15.
        ]
        |> R.touchableHighlightWithChild [
            P.TouchableHighlightProperties.Style [
                FlexStyle.Padding ( R.dip 10. )
                JustifyContent JustifyContent.Center
            ]
            OnPress ( fun _ -> dispatch ( SomeMessage ) )
        ]
    ]