NippleJS & React: Cannot read property 'getBoundingClientRect' of undefined

Question

While trying to use NippleJS in React, I am seeing Cannot read property 'getBoundingClientRect' of undefined.

The joystick is in a modal, so the UI element doesn't exist when initializing NippleJS.

Here's my configuration:

componentDidMount = () => {

    const joystickParams = {
      zone: this.joystick,
      mode: 'static',
      position: {top: '49.995%', left: '20.625%'}
    };

    const manager = require('nipplejs').create(joystickParams);
  };

Answer 1

The problem was that my joystick was being rendered in a modal, which only opened on a click event, so the joystick element didn't exist in the virtual DOM when componentDidMount fired.

The solution was to move the joystick into it's own component file and put the componentDidMount code there, and instantiate the component using <Joystick /> in the parent HTML.

Answer 2

I used ngAfterViewInit() hook in my case. The problem was solved. :)