I'm trying to build a react native app with a drawing feature and I came across this package: https://www.npmjs.com/package/react-native-draw-on-screen
This package was also mentioned in this post: How to draw on the screen with React Native?
It seems that we have to import a module called 'Controls' based on the example, but I'm not sure if that code is provided in the package.
I also tried looking up if react has anything related to handleColorChange
or handleBrushSizeChange
, but that seems to be specific to the Controls module.
Is there something I could write in place of this module? I'd really appreciate any help on this!
Below is the example code that the package provides:
import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import RNDrawOnScreen from 'react-native-draw-on-screen';
import Controls from './Controls';
export default class App extends React.Component {
state = {
color: 'black',
strokeWidth: 10,
};
changeColor = (color) => {
this.setState({ color });
};
changeBrushSize = (strokeWidth) => {
this.setState({ strokeWidth });
};
undo = () => {
this.RNDraw.undo();
};
clear = () => {
this.RNDraw.clear();
};
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Controls
handleColorChange={this.changeColor}
handleBrushSizeChange={this.changeBrushSize}
selectedColor={this.state.color}
selectedStrokeWidth={this.state.strokeWidth}
handleUndo={this.undo}
handleClear={this.clear}
/>
<View
style={{
flex: 1,
flexGrow: 1,
border: 'solid',
borderWidth: 2,
borderColor: '#ccc',
}}
>
<RNDrawOnScreen
penColor={this.state.color}
strokeWidth={this.state.strokeWidth}
ref={(r) => (this.RNDraw = r)}
/>
</View>
</SafeAreaView>
);
}
}
P.S. this is my first post on stackoverflow, would appreciate any feedback on asking good questions as well!