Pixi and React

[Petar]

I'm playing around with PIXI and React... I have a basic animation running from within a React component... the function that handles this gets called on componentDidMount()... the parent component passes down a prop called valueIsMatched... does anyone see any way that I can get the animation loop to console.log "value is matched" when the parent state changes to true?
 

Quote

componentDidMount() {
    this.pixiInit();
  }
  pixiInit = () => {
    var VELOCITY = 100;
    const stage = new PIXI.Container();
    const renderer = PIXI.autoDetectRenderer(
      500,
      400,
      {view : this.theCanvas}
    );
    const rectangle = new Rectangle();
    stage.addChild(rectangle);
    let lastTime = new Date().getTime();
    requestAnimationFrame(update);
    function update() {
      const currentTime = new Date().getTime();
      const delta = (currentTime-lastTime)/1000;
      rectangle.position.x -= VELOCITY*delta;
      if (valueIsMatched === true) {
        console.log('value is matched');
      }
      renderer.render(stage);
      requestAnimationFrame(update);
      lastTime = currentTime;
    }
  };

Also, I am aware of React-Pixi, but I was not able to get in running with latest React. 

[Petar]

I was able to solve the issue by doing:

Quote

    const update = () => {
      const currentTime = new Date().getTime();
      const delta = (currentTime-lastTime)/1000;
      rectangle.position.x -= VELOCITY*delta;
      if (valueIsMatched === true) {
        console.log('value is matched');
      }
      renderer.render(stage);
      requestAnimationFrame(update);
      lastTime = currentTime;
    };
    requestAnimationFrame(update);

Using an arrow function gave me access to "this", which gave me access to "this.props", which allowed me to react to changing parent component state from within the animation loop of child component. 

I just had to make sure to only call update() after it was defined, also.

[Sentinel]

There is a NPM package for combining React and Pixi

 

https://npmjs.com/react-pixi

[josescxavier]

Can you share you project?