A digital drawing canvas. Doesn’t it sound interesting? But, how can you craft such an creative interface? Well, if you have the same question in mind, you are not the only one. Many turn to the professional React Native app development company for guidance. Why? The answer lies in the React Native framework. It is one of the user-friendly frontend framework and is perfect for creating a drawing app.
Now that the Skia 2D graphics package is accessible in React Native, we have a plethora of new chances to develop graphics-intensive applications that were before unthinkable. For a time, one of my personal goals was to investigate React Native Gesture Handler, but then Skia came across my radar, and I wanted to gain some experience with it as well. I had the notion to create a proof-of-concept hand sketching app that takes user input via Gesture Handler and paints it to a canvas component using RN Skia. This post will go over the fundamentals of getting that app up and running.
So, in this article, lets discuss the process in length.
Project Prerequisites
For this react native drawing app, ensure that you get the three-step done before starting with the coding part.
The Initial Setup
Imagine wanting to bake a cake but not having any flour. You’d be stuck, right? Similarly, before diving into our project, you need to install the required tools or software.
We’ll be using the Expo CLI, a convenient tool for creating React Native projects. First, download Expo CLI, npm or Node.js, Android Studio, and the VS Code editor. Don’t forget to get the Expo Go app for your Android phone from the Play Store. Need more step-by-step help? There’s a blog on setting up the React Native Development Environment.
A Folder for the Drawing App Project
Think of setting up a project like organizing your workspace. You only need to set up your main software once. But for each new React Native project, you need a dedicated folder to keep things tidy – it’s like giving each project its own drawer.
To start, open a terminal in your chosen folder and type expo init Drawing.
P.S.: I have named this project ‘Drawing’ here, but feel free to give it any name. Just switch out ‘Drawing’ in the command with your chosen name.
Third-Party Software Installation
Note: Refer to the ‘Software’ mentioned in the heading as ‘Library’.
Let’s make the Drawing app build process easier with some third-party React Native library. It’s all about working smart, not just hard. Once you get the hang of which libraries to use, it becomes much easier.
For the current project, you need these helpful libraries:
Expo-status-bar: Helps you tweak the app’s status bar just the way you want it.
React-native-gesture-handler: Makes adding touch interactions smooth.
@shopify/react-native-skia: For 2D graphics. Basically, it’s like adding a powerhouse of graphics to your project.
React-native-reanimated: A library for adding fluid gestures. It’s a friendly version of the regular Animated library.
@expo/vector-icons: No need to design icons from scratch. This library’s got you covered with a bunch of popular ones like FontAwesome and Material Icons.
Just add these to your React native drawing app project, and you’re good to go!
The Main Coding Segment
Ever tried doodling on paper? It’s fun, right? Now imagine building our own digital doodle pad. Let’s see what is the process.
Focus on the main App.tsx file.
Importing Relevant Components
This code syntax prepares and calls components for the drawing app. From the Expo toolbox, it brings in the “StatusBar”.
Using React, the project will get control interactions. Moreover, “useState” is the memory box that tracks and updates the state of the state variable.
It has “View” for the entire display, “Dimensions” to measure the space, and “TouchableOpacity” as interactive buttons.
To track and handle user movements, it uses gesture components. For drawing, it takes “Canvas” and “Circle” from the Skia library. It serves as the digital artboard and brushes. The “Animated” tools give life to your creations, making them move.
Defining Data Inter faces
This code presents the rules for the drawing interface.
Firstly, (IPath) tells how to draw paths. You need to know the parts of the path (segments) and what color to use. Isn’t it? The color is optional, so you can choose not to have one.
Secondly, (ICircle) is about drawing circles. It tells us where to start (x and y) – think of it as the circle’s center.
Thirdly (IStamp) is for placing stamps. It gives directions on where to put the stamp (x and y) and its color.
Lastly, the list of (Tools) has two tools you can pick: a Pencil and a Stamp. Consider it a scene alike: choosing between a pencil to draw or a stamp to decorate your paper.
State Setup and Component Initialization
Here, the code syntax has the following elements.
A color palette with different colors. It uses ‘activePaletteColorIndex’ to remember which color the user is currently using.
The ‘activeTool’ remembers which tool (stamps or pencils) the user has picked up.
A sketchbook is to save drawings. ‘paths’, ‘circles’, and ‘stamps’ are like pages in this book, each keeping track of the painting the users have made.
Lastly, there’s a drawing board (canvas) where the user can see their artwork and some buttons to easily switch between colors and tools.
Gesture Handling
Consider the code snippet as instructions for a touch-based drawing app interface. It is the ‘Pan’ component that allows users to slide fingers across the screen to draw.
When you first touch the screen, the ‘onStart’ action checks if you are using a pencil. If it is true, it begins a new drawing line in the chosen color.
As you move your finger, the ‘onUpdate’ action adds more to the drawing line. However, the drawing tool should remain the pencil.
Once you lift your finger from the screen, the ‘onTouchesUp’ action is like saying, “Okay, the drawing is done for now”.
There is ‘minDistance’ that measures a specified distance. If the user moves their finger within this specified distance, only then they can make their drawing. Moving out of this distance won’t allow them to draw on the screen. It implies that tiny accidental touches aren’t counted as drawings.
Gesture Setting for Stamp Tool
Here, the code snippet uses the ‘Tap’ function. It lets you tap the screen to place a stamp.
When you first tap the screen, the ‘onStart’ action checks if the stamp tool is selected. If it is, you can place a stamp in the current chosen color on the screen.
And if users want to start fresh and remove everything they have placed, the ‘clearCanvas’ function is like an eraser. It wipes away all drawings and stamps in one go.
Palette Animation and Transitions
The code uses two styles of animation. One is the ‘animatedPaletteStyle’ and the other is the ‘animatedSwatchStyle’. These styles track the position and visibility of the drawing animation.
The functions ‘withSpring’ and ‘withTiming’ decide the feel of the animations.
‘useSharedValue’ is a variable both the animation and the main app can see and use. It’s similar to how you might store a value in a regular app. Here, it is meant for animations.
‘useAnimatedStyle’ creates and applies such animated styles to the app.
Drawing Canvas with Elements and Gestures
Here, the code syntax sets up three elements.
- ‘circles’, which are just points marked by their centers using ‘x’ and ‘y’ values.
- ‘paths’, which are drawn lines made up of segments. Each line has a color.
- ‘stamps’, like stickers, each with a specific color.
To show these three elements on the app screen, the code goes through each collection with the ‘map’ function. Hence, the users can draw circles with the Circle tool and paths with the Path tool. These will be made available from a drawing toolkit called react-native-svg.
The code also has ways to detect when you touch or slide your finger on the screen so that you can interact with it.
This is the way you should approach the project. You may not feel confident to start it all on your own. That’s completely fine. In that case, you can reach out to an expert React Native app development company.
If you successfully sailed through this, don’t forget to cross-check and check the program’s functionality.
The Steps of Program Execution
Open up the project folder on your computer. Then, go to the terminal from within this folder. Or you can also open the terminal and type ‘cd DRAWING’ to get to the project.
Before you start, install any needed dependencies by typing ‘npm install’. To start things off, type ‘expo start’. This will start things up for you.
A window will pop up, letting you choose where you want to run the project – either on your Android device or on your computer.