https://github.com/nuremx/react-native-autografo
React Native component allowing a user to draw their signature with their finger in a realistic style
https://github.com/nuremx/react-native-autografo
autografo drawing nure react-native signature uber-signature
Last synced: about 1 month ago
JSON representation
React Native component allowing a user to draw their signature with their finger in a realistic style
- Host: GitHub
- URL: https://github.com/nuremx/react-native-autografo
- Owner: nuremx
- License: mit
- Created: 2019-02-01T04:14:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-06T19:14:45.000Z (over 6 years ago)
- Last Synced: 2025-04-01T22:47:15.657Z (2 months ago)
- Topics: autografo, drawing, nure, react-native, signature, uber-signature
- Language: Swift
- Homepage:
- Size: 1.94 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Autografo
[](https://www.npmjs.com/package/react-native-autografo)
[](https://swift.org)
[](https://www.npmjs.com/package/react-native-autografo)
[](https://github.com/nuremx/react-native-autografo/pulls)
> 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**](https://github.com/uber/UberSignature).
## Installation
```bash
yarn add react-native-autografo
```
Link module
```bash
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](https://stackoverflow.com/questions/50096025/it-gives-errors-when-using-swift-static-library-with-objective-c-project)
## Usage
```jsx
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 (
{(save, reset) => (
{/* This will be the controls showed at the top of the view */}
save()} />
reset()} />
)}
)
}
}
```
### 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**](https://github.com/uber/UberSignature)
MIT - LICENSE