Gigasz / react-native-sketch-canvas

A React Native component for drawing by touching on both iOS and Android.
MIT License
13 stars 14 forks source link

Warning deprecated lifecycle methods #2

Open gmverdon opened 5 years ago

gmverdon commented 5 years ago

Warnings of the componentWillMount and componentWillReceiveProps lifecycle method, that will be deprecated in the next major release, are still present in this module.

Gigasz commented 5 years ago

@gmverdon Thanks for the report!

Are you using react-native 0.60?

MamyChow commented 4 years ago

@Gigasz Hi i have this warning, i'm using react-native 0.61.1 I think we can delete componentWillMount and componentWillReceiveProps and move code from componentWillReceiveProps to componentDidUpdate and componentWillMount to constructor like this : -ComponentDidUpdate: componentDidUpdate(prevProps, prevState) { if (prevProps.inputText !== this.props.inputText) { this.setState({ text: this._processText(this.props.text? this.props.text.map(t => Object.assign({}, t)): null) }); } }

-Constructor: constructor(props) { super(props) this._pathsToProcess = [] this._paths = [] this._path = null this._handle = null this._screenScale = Platform.OS === 'ios' ? 1 : PixelRatio.get() this._offset = { x: 0, y: 0 } this._size = { width: 0, height: 0 } this._initialized = false this.state.text = this._processText(props.text ? props.text.map(t => Object.assign({}, t)) : null) this.panResponder = PanResponder.create({ // Ask to be the responder: onStartShouldSetPanResponder: (evt, gestureState) => true, onStartShouldSetPanResponderCapture: (evt, gestureState) => true, onMoveShouldSetPanResponder: (evt, gestureState) => true, onMoveShouldSetPanResponderCapture: (evt, gestureState) => true, onPanResponderGrant: (evt, gestureState) => { if (!this.props.touchEnabled) return const e = evt.nativeEvent this._offset = { x: e.pageX - e.locationX, y: e.pageY - e.locationY } this._path = { id: parseInt(Math.random() * 100000000), color: this.props.strokeColor, width: this.props.strokeWidth, data: [] } UIManager.dispatchViewManagerCommand( this._handle, UIManager.getViewManagerConfig('RNSketchCanvas').Commands.newPath, [ this._path.id, processColor(this._path.color), this._path.width * this._screenScale ] ) UIManager.dispatchViewManagerCommand( this._handle, UIManager.getViewManagerConfig('RNSketchCanvas').Commands.addPoint, [ parseFloat((gestureState.x0 - this._offset.x).toFixed(2) * this._screenScale), parseFloat((gestureState.y0 - this._offset.y).toFixed(2) * this._screenScale) ] ) const x = parseFloat((gestureState.x0 - this._offset.x).toFixed(2)), y = parseFloat((gestureState.y0 - this._offset.y).toFixed(2)) this._path.data.push(${x},${y}) this.props.onStrokeStart(x, y) }, onPanResponderMove: (evt, gestureState) => { if (!this.props.touchEnabled) return if (this._path) { UIManager.dispatchViewManagerCommand(this._handle, UIManager.getViewManagerConfig('RNSketchCanvas').Commands.addPoint, [ parseFloat((gestureState.moveX - this._offset.x).toFixed(2) * this._screenScale), parseFloat((gestureState.moveY - this._offset.y).toFixed(2) * this._screenScale) ]) const x = parseFloat((gestureState.moveX - this._offset.x).toFixed(2)), y = parseFloat((gestureState.moveY - this._offset.y).toFixed(2)) this._path.data.push(${x},${y}) this.props.onStrokeChanged(x, y) } }, onPanResponderRelease: (evt, gestureState) => { if (!this.props.touchEnabled) return if (this._path) { this.props.onStrokeEnd({ path: this._path, size: this._size, drawer: this.props.user }) this._paths.push({ path: this._path, size: this._size, drawer: this.props.user }) } UIManager.dispatchViewManagerCommand(this._handle, UIManager.getViewManagerConfig('RNSketchCanvas').Commands.endPath, []) }, onShouldBlockNativeResponder: (evt, gestureState) => { return true; }, }); }