Invalid pixed data argument for gl.textImage2D

[HectorQuinonesOrderOS]

Invalid pixed data argument for gl.textImage2D

Calling this.sketch.renderer._update() after this.graphics.clear()

import React, { Component } from 'react';
import { takeSnapshotAsync, GLView } from 'expo';
import {PIXI , Sketch} from 'expo-pixi';
import { Button, Platform, AppState, StyleSheet, View, ImageBackground, PixelRatio } from 'react-native';
import Splash from './../assets/splash.png';
import TouchableView from './TouchableView';

const isAndroid = Platform.OS === 'android';
const strokeColor = 0x0000ff
const strokeWidth = 10
const strokeAlpha = 1
const scale = PixelRatio.get();

function uuidv4() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

function scaled({ x, y }) {
  return { x: x * scale, y: y * scale };
}



export default class App extends Component {
  state = {
    image: null,
    appState: AppState.currentState,
  };

  handleAppStateChangeAsync = nextAppState => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      if (isAndroid && this.sketch) {
        this.setState({ appState: nextAppState, id: uuidv4() });
        return;
      }
    }
    this.setState({ appState: nextAppState });
  };

  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChangeAsync);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this.handleAppStateChangeAsync);
  }

  onTouchesBegan = ({x, y}) =>  {
    this.graphics = new PIXI.Graphics()
    
    this.graphics.lineStyle(10, 0x000000, 10);
    this.x = x;
    this.y = y;
    this.graphics.drawRect(this.x, this.y,  1, 1);
    this.sketch.stage.addChild(this.graphics);
  }
  onTouchesMoved = ({x, y}) =>  {

    let width = x - this.x
    let height = y - this.y
    this.graphics.drawRect(this.x, this.y,  width, height);
  }
  onTouchesEnded = ({x, y}) =>  {

    let width = x - this.x
    let height = y - this.y

    this.graphics.clear()
    this.graphics.drawRect(this.x, this.y,  width, height);
  }
  onTouchesCancelled = ({x, y}) =>  {
  
  }
  

  onChangeAsync = async () => {
    const uri = await takeSnapshotAsync(this.image, {
        format: 'png'
    });
    this.setState({
      image: { uri },
    });
  };
  

  onReady = () => {
    this.sketch.renderer.transparent = true;
    this.sketch.renderer._update();
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.container}>
            <View style={styles.sketchContainer}
            collapsable={false}
            ref={imageBackground => (this.image = imageBackground)}>
                <ImageBackground source={Splash} style={{height: '100%', width: '100%'}}
                imageStyle={{resizeMode: 'contain'}}>
                  <TouchableView
                    id="pixi-view"
                    style={{ flex: 1, backgroundColor: 'transparent' }}
                    onTouchesBegan={({ locationX: x, locationY: y }) => this.onTouchesBegan(scaled({ x , y }))}
                    onTouchesMoved={({ locationX: x, locationY: y }) => this.onTouchesMoved(scaled({ x , y }))}
                    onTouchesEnded={({ locationX: x, locationY: y }) => this.onTouchesEnded(scaled({ x , y }))}
                    onTouchesCancelled={({ locationX: x, locationY: y }) =>
                    scaled({ x, y })
                    }>
                    <Sketch
                      ref={ref => (this.sketch = ref)}
                      style={styles.sketch}
                      strokeColor={strokeColor}
                      strokeWidth={strokeWidth}
                      strokeAlpha={strokeAlpha}
                      onChange={this.onChangeAsync}
                      onReady={this.onReady}
                      />
                  </TouchableView>
                </ImageBackground>
            </View>
        </View>
        <Button
          color={'blue'}
          title="undo"
          style={styles.button}
          onPress={() => {
            this.sketch.undo();
          }}
        />
        <Button
          color={'red'}
          title="update"
          style={styles.button}
          onPress={() => {
            this.sketch.renderer._update();
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  sketch: {
    flex: 1,
    backgroundColor: 'rgba(255, 255, 255, 0)'
  },
  sketchContainer: {
    height: '90%'
  },
  image: {
    flex: 1,
    width: '100%',
    height: '100%'
  },
  label: {
    width: '100%',
    padding: 5,
    alignItems: 'center',
  },
  button: {
    // position: 'absolute',
    // bottom: 8,
    // left: 8,
    zIndex: 1,
    padding: 12,
    minWidth: 56,
    minHeight: 48,
  },
});

[HectorQuinonesOrderOS]

My fault i didn't graphics.lineStyle(10, 0x000000, 10) before drawing a new rectangle