diskusi.tech (beta) Community

loading...
Cover image for React Native Signature

React Native Signature

ideapedyudi profile image Muhammad Wahyudi ・1 min read
npm install react-native-signature-capture --save
Enter fullscreen mode Exit fullscreen mode

link npm package

import React, { createRef } from 'react';
import {
    SafeAreaView,
    StyleSheet,
    View,
    Text,
    TouchableHighlight,
} from 'react-native';
import SignatureCapture from 'react-native-signature-capture';

export default function Signature() {

    const sign = createRef();

    const saveSign = () => {
        sign.current.saveImage();
    };

    const resetSign = () => {
        sign.current.resetImage();
    };

    const _onDragEvent = () => {
        console.log('dragged');
    };

    const _onSaveEvent = async (result) => {
        console.log(result)
    }

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
                <SignatureCapture
                    style={styles.signature}
                    ref={sign}
                    onSaveEvent={_onSaveEvent}
                    onDragEvent={_onDragEvent}
                    showNativeButtons={false}
                    showTitleLabel={false}
                    minStrokeWidth={10}
                    maxStrokeWidth={10}
                    backgroundColor='transparent'
                    viewMode={'portrait'}
                />
                <View style={{ flexDirection: 'row' }}>
                    <TouchableHighlight
                        style={styles.buttonStyle}
                        onPress={() => {
                            saveSign();
                        }}>
                        <Text>Save</Text>
                    </TouchableHighlight>
                    <TouchableHighlight
                        style={styles.buttonStyle}
                        onPress={() => {
                            resetSign();
                        }}>
                        <Text>Reset</Text>
                    </TouchableHighlight>
                </View>
            </View>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    titleStyle: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    signature: {
        flex: 1,
        borderColor: '#000033',
        borderWidth: 20,
        borderColor: 'green'
    },
    buttonStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        color: 'white',
        height: 50,
        backgroundColor: '#c72028',
        margin: 10,
    },
});
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide