Autografo

Currently iOS only

React Native component to obtain user signature as a png image, saved to device storage or returned as base64 string. Based on Uber Signature.

Installation

yarn add react-native-autografo

Link module

react-native link react-native-autografo

iOS Notes

Important. Since this module uses Swift and RN projects are based in Obj-C, you will need to add an empty Swift file to your Xcode project to make this library work. See related Stack Overflow Post

Usage

class MyComponent extends Component {
  handleSave = ({ url, base64 }) => {
    // Depending how save is called or fileName property is provided, will return url or base 64
    console.log({ url, base64 })
  }

  handleReset = () => {
    console.log('Signature has been reset')
  }

  render() {
    return (
      <Autografo
        stroke={{ color: '#000000' }}
        onSave={this.handleSave}
        onReset={this.handleReset}
        fileName="signature"
      >
        {(save, reset) => (
          {/* This will be the controls showed at the top of the view */}
          <View
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              flexDirection: 'row',
              height: 'auto',
              width: '100%',
            }}
          >
            <Button title="Save" onPress={() => save()} />
            <Button title="Reset" onPress={() => reset()} />
          </View>
        )}
      </Autografo>
    )
  }
}

Props

Name	Value	Description
stroke	{ color: String } optional	Properties for signature's stroke, TODO support stroke width
onSave	({ url, base64 }) => {} optional	Gets called when save has triggered and image is ready, will return url or base64 depending on save arguments
fileName	String optional	Alternative to save({ fileName: String }) will make to return a url path
children	Function optional	Function receiving save and reset parameters to be called

Methods

Name	Parameters	Description
save	{ asFile: Boolean, fileName: String }	When called, and nor parameter is given the component will return a base64 encoded png image, if asFile is provided as true will return url path for png image at device's storage
reset	None	Will reset the signature's view

Todo

• Set stroke width
• Android version

License

Based on the awesome project Uber Signature

MIT - LICENSE