expo-drawpad


A smooth, animated drawing pad component for React Native and Expo applications. Perfect for signatures, sketches, and interactive drawing experiences.

Features

- ✨ Smooth Drawing: Responsive touch gestures with customizable stroke width and color
- 🎬 Path Animation: Replay drawings with smooth animations
- 🎨 Multiple Brush Types: Solid, dotted, dashed, and highlighter brush styles
- 🌈 Gradient Support: Apply beautiful gradients to your strokes
- ↩️ Undo/Redo: Built-in undo functionality for better user experience
- 🧹 Clear Canvas: Easy erase functionality to start fresh
- 📱 Cross-Platform: Works on iOS, Android, and Web
- 🎯 TypeScript: Full TypeScript support with type definitions
- 🪶 Lightweight: Minimal dependencies and optimized performance
- 📁 Path Management: Get, set, and add paths programmatically
- 📄 SVG Export: Export drawings as SVG strings
- 🎛️ Customizable Animation: Control animation duration and easing
- 🎪 Event Callbacks: Handle draw start and end events

Installation

``bash
npm install expo-drawpad
`

$3

Make sure you have these peer dependencies installed:

`bash
npm install react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
`

For Expo projects, you can install them with:

`bash
npx expo install react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
`

Quick Start

$3

`tsx
import React, { useRef } from "react";
import { View, Button } from "react-native";
import DrawPad, { DrawPadHandle } from "expo-drawpad";

export default function App() {
const drawPadRef = useRef(null);

return (






drawPadRef.current?.erase()} />
drawPadRef.current?.undo()} />


);
}
`

$3

`tsx
import React, { useRef } from "react";
import { View, Button } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import DrawPad, { DrawPadHandle } from "expo-drawpad";

export default function App() {
const drawPadRef = useRef(null);
const pathLength = useSharedValue(0);
const playing = useSharedValue(false);
const signed = useSharedValue(false);

return (


ref={drawPadRef}
stroke="#000000"
strokeWidth={3}
pathLength={pathLength}
playing={playing}
signed={signed}
/>





drawPadRef.current?.erase()} />
drawPadRef.current?.undo()} />
drawPadRef.current?.play()} />
drawPadRef.current?.stop()} />


);
}
`

API Reference

$3

| Prop | Type | Required | Default | Description |
| ------------------- | ---------------------- | -------- | ------------------------------- | --------------------------------------------------- |
| stroke | string | No | "grey" | Color of the drawing stroke (hex, rgb, etc.) |
| pathLength | SharedValue | No | - | Reanimated shared value for total path length |
| playing | SharedValue | No | - | Reanimated shared value for animation state |
| strokeWidth | number | No | 3.5 | Width of the drawing stroke |
| signed | SharedValue | No | - | Optional shared value to track if anything is drawn |
| pathProps | PathProps | No | - | Additional SVG path properties |
| gradient | gradientProps | No | - | Gradient configuration for stroke |
| brushType | BrushType | No | "solid" | Brush style: solid, dotted, dashed, or highlighter |
| onDrawStart | () => void | No | - | Callback when drawing starts |
| onDrawEnd | () => void | No | - | Callback when drawing ends |
| animationDuration | number | No | pathLength.value * 2 | Custom animation duration in milliseconds |
| easingFunction | EasingFunction | No | Easing.bezier(0.4, 0, 0.5, 1) | Custom easing function for animations |

$3

`tsx
export interface gradientProps {
colors: string[];
locations?: number[];
start?: { x: number; y: number };
end?: { x: number; y: number };
}

export type BrushType = "solid" | "dotted" | "dashed" | "highlighter";
`

$3

| Method | Description |
| --------------------------- | -------------------------------------- |
| erase() | Clears the entire drawing canvas |
| undo() | Removes the last drawn path |
| play() | Starts the drawing animation playback |
| stop() | Stops the current animation playback |
| getPaths() | Returns array of all drawn paths |
| setPaths(paths: string[]) | Sets the paths programmatically |
| addPath(path: string) | Adds a single path to the canvas |
| getSVG() | Returns Promise of SVG content |

Usage Examples

$3

`tsx
import React, { useRef, useState } from "react";
import { View, Button, StyleSheet } from "react-native";
import DrawPad, { DrawPadHandle, BrushType } from "expo-drawpad";

export function BrushTypesExample() {
const drawPadRef = useRef(null);
const [brushType, setBrushType] = useState("solid");

return (


ref={drawPadRef}
brushType={brushType}
stroke="#2563eb"
strokeWidth={4}
/>





setBrushType("solid")} />
setBrushType("dotted")} />
setBrushType("dashed")} />
title="Highlighter"
onPress={() => setBrushType("highlighter")}
/>


);
}
`

$3

`tsx
import React, { useRef } from "react";
import { View, Button } from "react-native";
import DrawPad, { DrawPadHandle } from "expo-drawpad";

export function GradientExample() {
const drawPadRef = useRef(null);

const gradient = {
colors: ["#ff6b35", "#f7931e", "#ffd23f"],
locations: [0, 0.5, 1],
start: { x: 0, y: 0 },
end: { x: 1, y: 1 },
};

return (



drawPadRef.current?.erase()} />

);
}
`

$3

`tsx
import React, { useRef, useState } from "react";
import { View, Text, Button } from "react-native";
import DrawPad, { DrawPadHandle } from "expo-drawpad";

export function CallbackExample() {
const drawPadRef = useRef(null);
const [isDrawing, setIsDrawing] = useState(false);
const [pathCount, setPathCount] = useState(0);

const handleDrawStart = () => {
setIsDrawing(true);
};

const handleDrawEnd = () => {
setIsDrawing(false);
setPathCount((prev) => prev + 1);
};

return (

Drawing: {isDrawing ? "Yes" : "No"}
Paths drawn: {pathCount}


ref={drawPadRef}
onDrawStart={handleDrawStart}
onDrawEnd={handleDrawEnd}
stroke="#10b981"
/>


title="Clear"
onPress={() => {
drawPadRef.current?.erase();
setPathCount(0);
}}
/>

);
}
`

$3

`tsx
import React, { useRef } from "react";
import { View, Button, Alert } from "react-native";
import DrawPad, { DrawPadHandle } from "expo-drawpad";

export function SVGExportExample() {
const drawPadRef = useRef(null);

const handleExportSVG = async () => {
try {
const svgString = await drawPadRef.current?.getSVG();
if (svgString) {
// You can save this SVG string to a file or send it to a server
Alert.alert("SVG Exported", "Check console for SVG string");
console.log(svgString);
}
} catch (error) {
Alert.alert("Error", "Failed to export SVG");
}
};

return (







drawPadRef.current?.erase()} />


);
}
`

$3

`tsx
import React, { useRef } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import DrawPad, { DrawPadHandle } from "expo-drawpad";

export function SignaturePad() {
const drawPadRef = useRef(null);
const pathLength = useSharedValue(0);
const playing = useSharedValue(false);
const signed = useSharedValue(false);

return (

Please sign below


ref={drawPadRef}
stroke="#2563eb"
strokeWidth={2}
pathLength={pathLength}
playing={playing}
signed={signed}
/>



style={styles.button}
onPress={() => drawPadRef.current?.erase()}
>
Clear Signature



);
}

const styles = StyleSheet.create({
container: { flex: 1, padding: 20 },
title: { fontSize: 18, marginBottom: 20, textAlign: "center" },
canvas: {
flex: 1,
backgroundColor: "white",
borderRadius: 10,
borderWidth: 1,
borderColor: "#ddd",
},
buttons: { marginTop: 20 },
button: {
padding: 15,
backgroundColor: "#f0f0f0",
borderRadius: 5,
alignItems: "center",
},
});
`

$3

`tsx
import React, { useRef } from "react";
import { View, Button } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import DrawPad, { DrawPadHandle } from "expo-drawpad";

export function AnimatedDrawing() {
const drawPadRef = useRef(null);
const pathLength = useSharedValue(0);
const playing = useSharedValue(false);

const handleReplay = () => {
drawPadRef.current?.play();
};

return (

ref={drawPadRef}
stroke="#ff6b35"
strokeWidth={4}
pathLength={pathLength}
playing={playing}
/>



);
}
`

Requirements

- React Native 0.81.4+
- React Native Reanimated 4.1.1+
- React Native Gesture Handler 2.28.0+
- React Native SVG 15.12.1+
- React Native Worklets 0.5.1+
- Expo SDK 51+
- iOS 13.0+
- Android API Level 23+

Troubleshooting

$3

#### Gestures not working

Make sure you have properly configured react-native-gesture-handler in your project. For React Native CLI projects, you may need to complete the platform-specific installation steps.

#### Animation not smooth

Ensure react-native-reanimated is properly installed and configured. For React Native CLI projects, you may need to rebuild your app after installation.

#### SVG not rendering

Verify that react-native-svg is correctly installed and linked. For React Native CLI projects, you may need to run cd ios && pod install.

$3

- Use strokeWidth between 1-10 for optimal performance
- Limit drawing area size for better performance on older devices
- Consider using signed shared value to track drawing state efficiently

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Changelog

$3

- ✨ NEW: Added multiple brush types (solid, dotted, dashed, highlighter)
- ✨ NEW: Added gradient support for strokes
- ✨ NEW: Added SVG export functionality (getSVG() method)
- ✨ NEW: Added path management methods (getPaths(), setPaths(), addPath())
- ✨ NEW: Added draw event callbacks (onDrawStart, onDrawEnd`)
- ✨ NEW: Added customizable animation duration and easing
- ✨ NEW: Added additional path properties support
- 🔧 IMPROVED: Smoother drawing with quadratic curves instead of linear paths
- 🔧 IMPROVED: Better worklets integration for performance
- 🔧 IMPROVED: Updated peer dependencies to latest versions
- 🔧 IMPROVED: Enhanced TypeScript definitions

License

ISC

Author

Solarin Johnson

---

Made with ❤️ for the React Native community