React Native Sketch Canvas Android or IOS Example

This tutorial explains how to design sketch and canvas in react native application. This is very helpful for drawing, designing layout and capturing the user signature in android or iOS application with help of react native application. This React Native component for drawing by touching support on both iOS and Android.

Lets see the below features of react-native-sketch-canvas.

1. Support iOS and Android
2. Stroke thickness and color are changable while drawing.
3. Can undo strokes one by one.
4. Can serialize path data to JSON. So it can sync other devices or someone else and continue to edit.
5. Save drawing to a non-transparent image (png or jpg) or a transparent image (png only)
6. Use vector concept. So sketches won't be cropped in different sizes of canvas.
7. Support translucent colors and eraser.
8. Support drawing on an image (Thanks to diego-caceres-galvan)
9. High performance 
10. Can draw multiple canvases in the same screen.
11. Can draw multiple multiline text on canvas.

Custom Drawing with Canvas : 

Lets see the below example that helps to build more understanding to create a simple drawing canvas in react native application.

Step-1 : Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step-2 : Install the react-native-sketch-canvas package in your React Native project.

npm install @terrylinla/react-native-sketch-canvas --save

Screenshots after successful installation.

Step-3 : Link all native dependencies:

react-native link @terrylinla/react-native-sketch-canvas

NOTE : No additional steps are required for iOS.

Step-4: Open App.js  in your favourite code editor and erase all code and follow this tutorial.

Step-5: Lets place the below lines of code in your App component. Make sure all the mandatory dependencies should present in the App component.

import React, { Component } from 'react';
import {
  Platform, 
  StyleSheet,
  Text,
  View,
  Alert,
} from 'react-native';

import RNSketchCanvas from '@terrylinla/react-native-sketch-canvas';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 1, flexDirection: 'row' }}>
          <RNSketchCanvas
            containerStyle={{ backgroundColor: 'transparent', flex: 1 }}
            canvasStyle={{ backgroundColor: 'transparent', flex: 1 }}
            defaultStrokeIndex={0}
            defaultStrokeWidth={5}
            closeComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Close</Text></View>}
            undoComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Undo</Text></View>}
            clearComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Clear</Text></View>}
            eraseComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Eraser</Text></View>}
            strokeComponent={color => (
              <View style={[{ backgroundColor: color }, styles.strokeColorButton]} />
            )}
            strokeSelectedComponent={(color, index, changed) => {
              return (
                <View style={[{ backgroundColor: color, borderWidth: 2 }, styles.strokeColorButton]} />
              )
            }}
            strokeWidthComponent={(w) => {
              return (<View style={styles.strokeWidthButton}>
                <View  style={{
                  backgroundColor: 'white', marginHorizontal: 2.5,
                  width: Math.sqrt(w / 3) * 10, height: Math.sqrt(w / 3) * 10, borderRadius: Math.sqrt(w / 3) * 10 / 2
                }} />
              </View>
            )}}
            saveComponent={<View style={styles.functionButton}><Text style={{color: 'white'}}>Save</Text></View>}
            savePreference={() => {
              return {
                folder: 'RNSketchCanvas',
                filename: String(Math.ceil(Math.random() * 100000000)),
                transparent: false,
                imageType: 'png'
              }
            }}
            //onSketchSaved={(success, filePath) => { alert('filePath: ' + filePath); }}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',

  },
  headerText: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    fontWeight: "bold"
  },
  strokeColorButton: {
    marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
  },
  strokeWidthButton: {
    marginHorizontal: 2.5, marginVertical: 8, width: 30, height: 30, borderRadius: 15,
    justifyContent: 'center', alignItems: 'center', backgroundColor: '#39579A'
  },
  functionButton: {
    marginHorizontal: 2.5, marginVertical: 8, height: 30, width: 60,
    backgroundColor: '#39579A', justifyContent: 'center', alignItems: 'center', borderRadius: 5,
  }
});

Step-5: if you like to store or save the canvas in android device, then click on save button. We are using android emulator for this demo and in order to see the file location we need to open device file explorer in android studio.Once you click on save button, it will store the canvas in below location in your android device :
Storage location :  /storage/emulated/0/Pictures/RNSketchCanvas

Screenshots : 

Download Link :
https://github.com/skptricks/React-Native/tree/master/React%20Native%20Sketch%20Canvas%20Android%20Or%20IOS%20Example

This is all about React Native Sketch Canvas Android or IOS Example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.