Animation about react-native-canvas

[iddan]

Hey there! The common approach in React for this is to save the ref (canvas) as an instance property so:

handleCanvas = (canvas) => {
   this.canvas = canvas
   // initial render
}

componentDidUpdate() {
    console.log(this.canvas); // <= the ref
    // cycle animation
}

Generally you better use componentDidUpdate() or componentWillUpdate() for side affects which are not your actual render.

[philipjc-apacio]

Thank you, so much for your reply, but I am still unable to get my blue ball to move :)

import React, { Component } from 'react';
import { 
  View,
  Text,
  Button,
 } from 'react-native';

 // Components
import Canvas from 'react-native-canvas';

// Styles
import styles from '../styles/snake/snake.styles';

// Class
export default class SnakeCanvas extends Component {

  static navigationOptions = {
    title: 'null',
    header: null
  };

  constructor(props) {
    super(props);

    // this.drawBall = this.drawBall.bind(this);

    this.state = {
      x: 50,
      y: 50,
    }

  }

  componentDidmount() {
    // setInterval(draw, 10);    
  }

  componentDidUpdate() {
    console.log('CANVAS, DID UPDATE: ', this.canvas);


  }

  /**
   * 
   * @param {Object} canvas Canvas Object
   */
  handleCanvas(canvas) {
    
    this.canvas = canvas;

    // const {state} = this.props;
    // const {ball} = state;
    // const {x, y} = ball;
    // const {moveBall} = this.props;

    let x = this.state.x;
    let y = this.state.y;
    
    this.ctx = this.canvas.getContext('2d');
    this.ctx.beginPath();
    this.ctx.arc(x, y, 10, 0, Math.PI*2);
    this.ctx.fillStyle = "#0095DD";
    this.ctx.fill();
    this.ctx.closePath();
    
    // moveBall();
    this.draw();
  }

  draw() {
    // drawing code

    setInterval(() => {
      console.log('tick');
      this.setState({
        x: this.state.x += 2,
        y: this.state.y += -2,
      })
    }, 1000);
    
    console.log('draw');
  }

  render() {

    return (
      <Canvas ref={this.handleCanvas.bind(this)}/>
    );
  }
}

[iddan]

    let x = this.state.x;
    let y = this.state.y;
    
    this.ctx = this.canvas.getContext('2d');
    this.ctx.beginPath();
    this.ctx.arc(x, y, 10, 0, Math.PI*2);
    this.ctx.fillStyle = "#0095DD";
    this.ctx.fill();
    this.ctx.closePath();

should be executed at componentDidUpdate()

[iddan]

General tips:

• you shouldn't bind handleCanvas() at render() as it will pass a new function prop to <Canvas /> in each render(). Instead use arrow function methods like this:

class SnakeComponent extends Component {
    handleCanvas = () => {

    }

    render() {
        return <Canvas ref={this.handleCanvas} />
    }

Because handleCanvas() is an arrow function this is already bounded

• You shouldn't use mutating operators on this.state properties and shouldn't read from it directly when executing setState() so change:

- this.setState({
-   x: this.state.x += 2,
-   y: this.state.y += -2,
- })
+ this.setState(state => ({
+   x: state.x + 2,
+   y: state.y - 2,
+ })