React Native Expo react-native-svg: Drawing canvas app | ShillehTek

Video Tutorial (Optional)

Watch first if you want to follow along and build the drawing canvas in real time.

Project Overview

React Native Expo + react-native-svg: In this tutorial, you build a touch-based drawing canvas in a React Native Expo app using the react-native-svg library and the <Path> component so users can draw (signatures, sketches, collaborative input) directly on screen.

SVG stands for Scalable Vector Graphics. It is an XML-based vector format that scales cleanly without losing quality, unlike pixel-based images such as PNG or JPEG.

React Native SVG bridges React Native components and SVG elements, making it possible to render and manipulate vector graphics in your app UI.

• Time: 15 to 30 minutes
• Skill level: Beginner
• What you will build: A simple finger-drawing canvas with a Clear button using react-native-svg Path rendering

Subscribe: Youtube
Support: https://www.buymeacoffee.com/mmshilleh

Parts List

From ShillehTek

• None required for this software-only tutorial.

External

• Expo (Expo CLI) - used to create and run the React Native application
• Node.js + npm - used to install dependencies
• react-native-svg - provides <Svg> and <Path> for drawing
• React Native - provides UI components and touch handling

Note: This walkthrough assumes you are building in an Expo-managed React Native app and can run typical Expo commands in your terminal.

Step-by-Step Guide

Step 1 - Create an Expo application

Goal: Start a new React Native Expo project where you will add the SVG drawing canvas.

What to do: Make sure you have Expo available, then create a project using Expo initialization.

Expected result: You have a working Expo app that can run on a simulator or device.

Step 2 - Install react-native-svg

Goal: Add the only required library for rendering SVG paths.

What to do: Install the dependency in your project.

Code:

npm i react-native-svg

Expected result: Your project has react-native-svg installed and available for import.

Step 3 - Add the drawing component code

Goal: Render an SVG canvas and capture touch movement to build a path users can draw with.

What to do: Add the following component code to your project (for example, as a screen or as your main component), then run the app.

Code:

import React, { useState } from 'react';
import { View, StyleSheet, Dimensions, TouchableOpacity, Text } from 'react-native';
import { Svg, Path } from 'react-native-svg';

const { height, width } = Dimensions.get('window');

export default () => {
  const [paths, setPaths] = useState([]);
  const [currentPath, setCurrentPath] = useState([]);
  const [isClearButtonClicked, setClearButtonClicked] = useState(false);

  const onTouchEnd = () => {
    paths.push(currentPath);
    setCurrentPath([]);
    setClearButtonClicked(false);
  };

  const onTouchMove = (event) => {
    const newPath = [...currentPath];
    const locationX = event.nativeEvent.locationX;
    const locationY = event.nativeEvent.locationY;
    const newPoint = `${newPath.length === 0 ? 'M' : ''}${locationX.toFixed(0)},${locationY.toFixed(0)} `;
    newPath.push(newPoint);
    setCurrentPath(newPath);
  };

  const handleClearButtonClick = () => {
    setPaths([]);
    setCurrentPath([]);
    setClearButtonClicked(true);
  };

  return (
    <View style={styles.container}>
      <View style={styles.svgContainer} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd}>
        <Svg height={height * 0.7} width={width}>
          <Path
            d={paths.join('')}
            stroke={isClearButtonClicked ? 'transparent' : 'red'}
            fill={'transparent'}
            strokeWidth={3}
            strokeLinejoin={'round'}
            strokeLinecap={'round'}
          />
          {paths.length > 0 &&
            paths.map((item, index) => (
              <Path
                key={`path-${index}`}
                d={currentPath.join('')}
                stroke={isClearButtonClicked ? 'transparent' : 'red'}
                fill={'transparent'}
                strokeWidth={2}
                strokeLinejoin={'round'}
                strokeLinecap={'round'}
              />
            ))}
        </Svg>
      </View>
      <TouchableOpacity style={styles.clearButton} onPress={handleClearButtonClick}>
        <Text style={styles.clearButtonText}>Clear</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  svgContainer: {
    height: height * 0.7,
    width,
    borderColor: 'black',
    backgroundColor: 'white',
    borderWidth: 1,
  },
  clearButton: {
    marginTop: 10,
    backgroundColor: 'black',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  clearButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Expected result: You can draw on the canvas with your finger, and tapping Clear resets the drawing.

Step 4 - Understand how the path is built

Goal: Know what each part of the code is doing so you can modify it for your application.

What to do: Review these core ideas from the code:

• Imports: React state for storing drawing data, React Native components for layout and touch, and react-native-svg for <Svg> and <Path>.
• Dimensions: Used to size the drawing canvas based on the window height and width.
• State:
  • paths stores completed drawing paths.
  • currentPath stores the in-progress path while the user is drawing.
  • isClearButtonClicked tracks whether Clear was clicked to hide strokes.
• Touch handling:
  • onTouchMove reads locationX and locationY and appends SVG path commands (starting with M and then points).
  • onTouchEnd commits the current path into the stored paths list and resets currentPath.
• Clear button: handleClearButtonClick resets both arrays and toggles the clear flag.
• Styling: The canvas and button are styled with StyleSheet.create and can be adjusted as needed.

Expected result: You understand how SVG <Path> strings are constructed from touch input, and how to extend the example.

Conclusion

You built a basic drawing canvas in a React Native Expo app using the react-native-svg library and SVG Path rendering. This pattern is useful for signatures, sketch input, and interactive drawing experiences.

Want parts and tools for your next build? Browse ShillehTek.com. If you want help customizing an app or connected product experience, check out our IoT consulting services.