# andy-react-native-svg-draw > React Native drawing component based on SVG with editable annotations Latest version **0.1.2** (published 2024-03-28) · MIT license · 0 weekly downloads ## Install ```sh npm install andy-react-native-svg-draw pnpm add andy-react-native-svg-draw yarn add andy-react-native-svg-draw bun add andy-react-native-svg-draw ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.2 | | Published | 2024-03-28 | | First published | 2023-12-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 546.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Mickael Lecoq | | Maintainers | andyh103 | | Keywords | react-native, ios, android | ## Links - npm: https://www.npmjs.com/package/andy-react-native-svg-draw - Repository: https://github.com/ArchireportTeam/react-native-svg-draw - Homepage: https://github.com/ArchireportTeam/react-native-svg-draw#readme - Issues: https://github.com/ArchireportTeam/react-native-svg-draw/issues - npm.io page: https://npm.io/package/andy-react-native-svg-draw ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 0.1.2 (latest) — 2024-03-28 - 0.1.1 — 2024-03-28 - 0.1.0 — 2024-03-28 - 0.0.9 — 2024-01-17 - 0.0.8 — 2024-01-04 - 0.0.7 — 2024-01-04 - 0.0.6 — 2024-01-03 - 0.0.5 — 2024-01-03 - 0.0.4 — 2023-12-01 - 0.0.3 — 2023-12-01 - 0.0.2 — 2023-12-01 - 0.0.1 — 2023-12-01 ## README # react-native-svg-draw React Native drawing component based on SVG with editable annotations ![Drawing Example](documentation/example.gif) ## Features - 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 ## Installation ### Bare react native app ```sh 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 ```sh expo install @archireport/react-native-svg-draw react-native-reanimated react-native-gesture-handler react-native-svg react-native-view-shot expo-linear-gradient ``` --- **⚠️ extra steps are required** _React Native Gesture Handler_ needs extra steps to finalize its installation, please follow their [installation instructions](https://docs.swmansion.com/react-native-gesture-handler/docs/#installation). _React Native Reanimated_ needs extra steps to finalize its installation, please follow their [installation instructions](https://docs.swmansion.com/react-native-reanimated/docs/installation/). --- ## Usage ### Bare react native app ```js import { DrawWithOptions } from 'react-native-svg-draw'; import LinearGradient from 'react-native-linear-gradient'; // ... ``` ### Expo ```js import { DrawWithOptions } from 'react-native-svg-draw'; import { LinearGradient } from 'expo-linear-gradient'; // ... ``` --- ## How it works You have 2 options ### Use DrawWithOptions provided by the lib Fast and easy way to use the lib. Example : ```jsx true} takeSnapshot={(snap) => { snap.then((uri) => console.log('snapShot uri:', uri)); }} /> ``` ### Use your own "DrawWithOptions" component You can create your own "DrawWithOptions" component and customize the ui. You will need to use `DrawCore` component wrapped in `DrawProvider` context. ```jsx ``` 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`. ```js const { drawState, dispatchDrawStates, itemIsSelected, cancelLastAction, deleteSelectedItem, ... } = useDrawHook(); ``` #### 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 | ### Recommendation Copy the drawWithOptions component, sliders component and adjust styles to match your theme ## Components ### DrawWithOptions Component with header and footer, based on DrawCore #### Properties | 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 | ### DrawCore Component where the user can draw #### Properties | Name | Type | Description | | ----------------- | ------ | -------------------------------------------- | | `image` | image | (optional) background picture | | `backgroundColor` | string | (optional) background color of the draw zone | ## Contributing See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. ## License MIT --- _Source: https://npm.io/package/andy-react-native-svg-draw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._