@benjeau/react-native-draw-extras

Extra components to complement @benjeau/react-native-draw:

• CanvasControls
  • Clear drawing
  • Undo last path
  • Includes the BrushPreview component
  • Toggle between drawing and erasing
  • Toggle visibility of BrushProperties
• BrushPreview
  • Displays an SVG preview of the stroke (color, thickness, opacity)
• BrushProperties
  • Includes the ColorPicker component
  • Slider to change brush opacity
  • Slider to change brush size
• ColorPicker
  • Grid of color where the user can select a color

Installation

npm install @benjeau/react-native-draw-extras
# or
yarn add @benjeau/react-native-draw-extras

Also, you need to install @react-native-community/slider and react-native-svg, and follow their installation instructions.

Example

Please see the example Expo application showcasing the components

Props

CanvasControls

Contains all the props of BrushProperties and the following:

| name | description | type | default | | ------------------------- | ---------------------------------------------------- | ---------------------- | --------- | | onClear | Callback when the clear button is pressed | () => void | - | | onUndo | Callback when the undo button is pressed | () => void | - | | onToggleEraser | Callback when the eraser button is pressed | () => void | - | | onToggleBrushProperties | Callback when the brush properties button is pressed | () => void | - | | buttonStyle | Override the style of the buttons | StyleProp<ViewStyle> | - | | tool | Initial tool of the canvas | brush or eraser | - | | deleteButtonColor | Delete button color | string | #81090A | | otherButtonsColor | Other buttons color (undo and eraser mode toggle) | string | #DDD |

BrushPreview

| name | description | type | default | | -------------- | ----------------------------------------------------- | --------------------------- | ------------ | | color | Color of the brush strokes | string | - (required) | | thickness | Thickness of the brush strokes | number | - (required) | | opacity | Opacity of the brush strokes | number | - (required) | | brushPreview | Brush preview preset, for different kinds of previews | stroke or dot or none | - (required) |

BrushProperties

Contains all the props of ColorPicker and the following:

| name | description | type | default | | ------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | | thickness | Thickness of the brush strokes | number | 3 | | opacity | Opacity of the brush strokes | number | 1 | | onThicknessChange | Callback when brush size is changed via the slider | (newThickness: number) => void | - | | onOpacityChange | Callback when brush opacity is changed via the slider | (newOpacity: number) => void | - | | opacityStep | Step value of the opacity slider, should be between 0 and 1 | number | 0.1 | | thicknessMin | Minimum value of the thickness slider | number | 5 | | thicknessMax | Maximum value of the thickness slider | number | 35 | | thicknessStep | Step value of the thickness slider, should be between props.thicknessMin and props.thicknessMax | number | 1 | | sliderColor | Slider color | string | #000 | | style | Style of the container | StyleProp<ViewStyle> | - |

ColorPicker

| name | description | type | default | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------- | | color | Brush color, one from the colors provided | string | - (required) | | onColorChange | Callback when a color is selected | (newColor: string) => void | - (required) | | colors | Color picker colors, specifying the color picker sections each containing rows of colors. First array defines the sections, second one defines the rows, and the last one defines the columns. | string[][][] | DEFAULT_COLORS | | style | Style of the container | StyleProp<ViewStyle> | - |

Helper functions

• If you want to know if a color is bright or not, isBright() is available to detect if a HEX color is bright or dark.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT