1

I wrote this code for get the signature of a person:

import * as ExpoPixi from 'expo-pixi';
import React, { Component } from 'react';
import { 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 = {
    signature: null,
    appState: AppState.currentState,
  };

  handleAppStateChangeAsync = nextAppState => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      if (isAndroid && this.sketch) {
        this.setState({ appState: nextAppState, id: uuidv4(), lines: this.sketch.lines });
        return;
      }
    }
    this.setState({ appState: nextAppState });
  };

  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChangeAsync);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChangeAsync);
  }

  onChange = async () => {
    const { uri } = await this.sketch.takeSnapshotAsync();

    this.setState({
      signature: { uri },
    }, () => console.log(this.state.signature));
  }

  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white'}}>

        <View style={{flex: 1, left: '5%'}}>
          <ExpoPixi.Signature
            ref={signature => (this.sketch = signature)}
            style={styles.pad}
            strokeColor={'black'}
            strokeAlpha={0.5}
            onChange={this.onChange}
          />
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  pad: {
    flex: 1,
    width: '90%',
    borderWidth: 0.6,
    borderColor: '#b3b3b5',
    borderRadius: 10,
    backgroundColor: 'white'
  },
});

Running this simple code that is inspired on this library example, I notice that the borderRadius is ignored (the corner of the View are missing) and when I try to write the signature the app crash.

A side note: is it possible to get a base64-encoded version of the pad content instead of the uri?

th3g3ntl3man
  • 1,926
  • 5
  • 29
  • 50

0 Answers0