2

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!

eycho
  • 21
  • 1
  • the package you use is not maintained. Maybe you can try https://github.com/phoviApp/react-native-sketch-canvas#readme – Someone Special May 11 '21 at 06:59
  • I did look into this, it seems like the package is not expo compatible per: https://github.com/terrylinla/react-native-sketch-canvas/pull/107 I really appreciate the comment though! – eycho May 11 '21 at 07:36

0 Answers0