React Native drawing component based on SVG with editable annotations
- Draw arrow, rectangle, ellipse ... on picture or blank view
- Compatible with
Expo
- Built with
react-native-reanimated
v2 - Save result with
react-native-view-shot
- Fully customisable
npm install @archireport/react-native-svg-draw react-native-reanimated react-native-gesture-handler react-native-svg react-native-view-shot react-native-linear-gradient
expo install @archireport/react-native-svg-draw react-native-reanimated react-native-gesture-handler react-native-svg react-native-view-shot expo-linear-gradient
React Native Gesture Handler needs extra steps to finalize its installation, please follow their installation instructions.
React Native Reanimated needs extra steps to finalize its installation, please follow their installation instructions.
import { DrawWithOptions } from 'react-native-svg-draw';
import LinearGradient from 'react-native-linear-gradient';
// ...
<DrawWithOptions linearGradient={LinearGradient} />
import { DrawWithOptions } from 'react-native-svg-draw';
import { LinearGradient } from 'expo-linear-gradient';
// ...
<DrawWithOptions linearGradient={LinearGradient} />
You have 2 options
Fast and easy way to use the lib. Example :
<DrawWithOptions
linearGradient={LinearGradient}
image={require('./pexels-sebastian-palomino-2847766.jpg')}
close={() => true}
takeSnapshot={(snap) => {
snap.then((uri) => console.log('snapShot uri:', uri));
}}
/>
You can create your own "DrawWithOptions" component and customize the ui.
You will need to use DrawCore
component wrapped in DrawProvider
context.
<DrawProvider>
<DrawCore image={require('./pexels-sebastian-palomino-2847766.jpg')}/>
</DrawProvider>
Then you can use the hook "useDrawHook" inside your components to interact with the context. This hook expose a lot of functions and objects that can be used to interact with the DrawCore
.
const {
drawState,
dispatchDrawStates,
itemIsSelected,
cancelLastAction,
deleteSelectedItem,
...
} = useDrawHook();
Name | Type | Description |
---|---|---|
strokeWidth |
shared value(number) | Object from react-native-reanimated, get and set value => strokeWidth.value |
color |
shared value(hslColor) | Object from react-native-reanimated, get and set value => color.value |
onColorStrokeChange |
function | Function use when changing color or strokeWidth is done to memorize action for undo |
drawState |
object | Get the selected drawingMode : 'singleHead','doubleHead','rectangle','ellipse','text','pen', cancelEnabled is true when last action can be canceled, doneItems contains all previous draw items and screenStates helps to go back in time (cancel pops last state) |
dispatchDrawStates |
function | Can be used to update drawingMode
|
itemIsSelected |
shared value(boolean) | Object from react-native-reanimated Indicate if an item is selected, to get value => itemIsSelected.value |
cancelLastAction |
function | Call this function when user press your undo button |
takeSnapshot |
function | This async function will return the uri of your drawing |
deleteSelectedItem |
function | Call this function when you want to delete the selected item |
Copy the drawWithOptions component, sliders component and adjust styles to match your theme
Component with header and footer, based on DrawCore
Name | Type | Description |
---|---|---|
close |
function | (optional) called when cross is pressed |
takeSnapshot |
function | (optional) called when send button (at the top right) is pressed |
linearGradient |
React Component | implementation used for linear gradient (differs between expo and bare react native app) |
image |
image | (optional) background picture |
backgroundColor |
string | (optional) background color of the draw zone |
Component where the user can draw
Name | Type | Description |
---|---|---|
image |
image | (optional) background picture |
backgroundColor |
string | (optional) background color of the draw zone |
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT