https://github.com/martinmoec/Fable.ReactNative.FontAwesome

Fable bindings for react-native-fontawesome
https://github.com/martinmoec/Fable.ReactNative.FontAwesome

List: Fable.ReactNative.FontAwesome

fable fable-bindings fable-react-native font-awesome react-native-fontawesome

Last synced: 3 months ago
JSON representation

Fable bindings for react-native-fontawesome

• Host: GitHub
• URL: https://github.com/martinmoec/Fable.ReactNative.FontAwesome
• Owner: martinmoec
• Created: 2020-02-27T20:33:18.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-02-27T22:23:23.000Z (over 4 years ago)
• Last Synced: 2024-03-28T22:02:37.479Z (3 months ago)
• Topics: fable, fable-bindings, fable-react-native, font-awesome, react-native-fontawesome
• Language: F#
• Homepage: https://www.nuget.org/packages/Fable.ReactNative.FontAwesome
• Size: 9.77 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-fable-react-native - martinmoec/Fable.ReactNative.FontAwesome - bindings for react-native-fontawesome (Libraries)

README

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

Provides simple Fable bindings for the [react-native-fontawesome](https://github.com/entria/react-native-fontawesome) module for Fable.ReactNative projects.

## Setup

Add the [nuget](https://www.nuget.org/packages/Fable.ReactNative.FontAwesome) 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.](https://github.com/entria/react-native-fontawesome/tree/master/sample/assets/fonts) 

How to add the `.ttf` files:

- [iOS](https://medium.com/react-native-training/adding-custom-fonts-to-react-native-b266b41bff7f)

- [Android](https://medium.com/@gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7)

For further info on the npm module see the [react-native-fontawesome](https://github.com/entria/react-native-fontawesome) project.

## Samples

The `fa` function takes a Font Awesome class string and a list of Fable.ReactNative style properties. See [FontAwesome](https://fontawesome.com/) for class names.

Minimum sample:

```FSharp

open Fable.ReactNative.FontAwesome

fa "fas fa-arrow-right" [] 

```

Sample use with Fable.ReactNative:

```FSharp

...

// 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 ) )

        ]

    ]

```