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

nuremx/react-native-autografo