Provice a native UI component to draw onto.

Usage no npm install needed!

<script type="module">
  import reactNativeDrawView from '';



A React Native component for free-hand drawing on both iOS and Android.


  • 👆 Draw with your finger and export an image from it.
  • 💾 Save your sketch to image.
  • 🖍 Change the stroke color and thickness of the pen easily.
  • 👻 Full-customize UI.


Install the module from npm:

npm i --save react-native-draw-view

Link the module to your project:

react-native link react-native-draw-view

Note: For iOS, if you're using CocoaPod, remember to cd ios && pod install after link. Or you can manual link follow this instruction.

Important for iOS: Because the source code is written in Swift, so if your project doesn't include any .swift file, please open your project in XCode, create a file anyname.swift, accept to create the bridging header, then just leave it empty is ok.


import React from 'react';
import { View } from 'react-native';
import DrawView from 'react-native-draw-view';

export default class MyScreen extends React.Component {

  save = () => {

  reset = () => {

  render() {
    return (
      <View style={{ flex: 1 }}>
          style={{ flex: 1, backgroundColor: '#eee' }}
          onRef={el => this.drawer = el}
          onSaved={res => console.log('Save', res.nativeEvent)}
          onError={error => console.log('Error', error.nativeEvent)} />
        <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
          <Button title="Reset" onPress={this.reset} />
          <Button title="Save" onPress={} />


Here are the props of the the component:

Name Type Default value Comment
color String '#000000' The stroke color you want to draw with.
strokeWidth Number 1 The stroke thickness, in pixels.
style Style object null Some View styles if you need.
onRef Function null Bind draw view's ref to your variable.
onSaved Function null Event called after the draw's saved successfully. The return value is an object res which res.nativeEvent include file's information: uri, mimetype, size, name.
onError Function null Event called if there is error. The return value is an object err which err.nativeEvent include message of that error.

The component also has some instance methods:

Name Return type Comment
reset() Promise Reset the drawing. You could simply type: this.sketch.clear();
save() Promise Save the drawing to an image. The result's returned by onSaved event.`


Feel free to contribute by sending a pull request or creating an issue.