How to do Signature Capture in Expo?

keomalima · November 9, 2020, 1:23am

I’m trying to understand how I can do a signature capture in Expo. Something similar to this.`.

I have been able to find some directions on this post but it seem to be outdated with versions.

So anyone has any idea on how I can implement this? I guess pixi.js would be the right solution but still no idea where to start. Thanks in advance!

wodin · November 21, 2020, 9:21pm

Maybe start with one of these examples?

github.com

expo/expo-pixi/blob/master/examples/sketch/App.js

import Expo from 'expo';
import * as ExpoPixi from 'expo-pixi';
import React, { Component } from 'react';
import { Image, Button, Platform, AppState, StyleSheet, Text, View } from 'react-native';

const isAndroid = Platform.OS === 'android';
function uuidv4() {
  //https://stackoverflow.com/a/2117523/4047926
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

export default class App extends Component {
  state = {
    image: null,
    strokeColor: Math.random() * 0xffffff,
    strokeWidth: Math.random() * 30 + 10,

This file has been truncated. show original

github.com

expo/expo-pixi/blob/master/examples/signature/App.js

import Expo from 'expo';
import * as ExpoPixi from 'expo-pixi';
import React, { Component } from 'react';
import { Image, Button, Platform, AppState, StyleSheet, Text, View } from 'react-native';

const isAndroid = Platform.OS === 'android';
function uuidv4() {
  //https://stackoverflow.com/a/2117523/4047926
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

export default class App extends Component {
  state = {
    image: null,
    strokeColor: 0,
    appState: AppState.currentState,

This file has been truncated. show original

brandonjgs · November 26, 2021, 6:02pm

I recomend you GitHub - YanYuanFE/react-native-signature-canvas: React Native Signature Component based WebView Canvas for Android && IOS && expo its easy to use and have some examples

Topic		Replies	Views
Digital signature app How to / Third Party Tooling	1	365	July 1, 2021
Capturing a signature ? How Expo SDK	2	555	March 12, 2020
React Native Expo Drawing And Signature How to / Third Party Tooling	2	1055	June 9, 2019
Best way to do OCR with Expo How to / Third Party Tooling	14	6790	September 18, 2021
animation in expo How to / Third Party Tooling	1	202	August 7, 2021

How to do Signature Capture in Expo?

Related Topics