@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
- Includes the
-
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