Add React Native signature pad

Open

#26 opened on May 8, 2017 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 3/5
Estimated time: 1-2 days
Newbie friendliness: 35/100

Issue type: Feature
Clarity: Mostly clear
Activity status: Stale
Tech stack: fsharp, react, react-native
Domain: mobile

Research direction

Review the existing React Native bindings and the provided react-native-signature-pad example first. Confirm how the SignaturePad component and its onError and onChange callbacks should be exposed, then verify that the binding returns the base64 data URL shown in the issue and fits the current 1.0-era API.

Written by the indexing model from the issue text.

Description

@alfonsogarciacaro promised to add this to react native bindings once things moved to 1.0 :P

open Fable.Core.JsInterop
module R = Fable.Helpers.React

type RCom = Fable.Import.React.ComponentClass<obj>

let SignaturePad: RCom = importDefault "react-native-signature-pad"

/// Opens a signature pad with callbacks for onError and onChange
let signaturePad (props:Fable.Helpers.ReactNative.Props.IStyle list) (onError:exn -> unit) (onChange:string -> unit) : React.ReactElement =
    let onChange (o:obj) = onChange(o?base64DataUrl |> unbox)
    let pad =
        createObj
            [ "style" ==> props
            "onError" ==> onError
            "onChange" ==> onChange ]
        |> unbox

    R.from SignaturePad pad []

Dominant language: F#
Stars: 277
Forks: 65
PR merge metrics: No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Similar issues

[Super Editor][Chat] - Floating editor scaffold does not reset panel height after closing panel Open

Difficulty 2/5 1-3 hours Newbie friendliness 75/100

Flutter-Bounty-Hunters/super_editor#3111 · Opened Sep 24, 2026
Remove custom segment colors Open

enhancement

Difficulty 2/5 1-3 hours Newbie friendliness 65/100

libre-tube/LibreTube#8803 · Opened Sep 23, 2026
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Open

Difficulty 2/5 1-3 hours Newbie friendliness 75/100

Margaret-Petersen/grocery-delivery-app-for-ios#1334 · Opened Sep 23, 2026
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Open

Difficulty 2/5 1-3 hours Newbie friendliness 75/100

Margaret-Petersen/food-delivery-app-clone-react-native#1981 · Opened Sep 23, 2026
Remote logging updates Open

Difficulty 2/5 1-3 hours Newbie friendliness 70/100

bcgov/bc-wallet-mobile#4751 · Opened Sep 23, 2026

More Mobile Dev issues