image must be initialized with a canvas instance

<View
        onStartShouldSetResponder={() => true}
        onResponderStart={this.mouseDownListener}
        onResponderMove={this.mouseMoveListener}
        onResponderRelease={this.mouseUpListener}
        style={{
          // flexGrow: 1,
          height: canvasHeight,
          alignItems: "center",
          marginTop: (3 * h) / 100
        }}
      >
        
        <View>
          <View
            style={{
              height: canvasHeight,
              width: bgWidth
              // backgroundColor: "green"
            }}
          >
            <Image
              source={bgImg}
              style={{
                // flexGrow: 1,
                width: null,
                height: "100%"
              }}
              resizeMode="contain"
            />
          </View>
          <View
            style={{
              height: canvasHeight,
              width: bgWidth,
              position: "absolute",
              alignItems: "center"
            }}
          >
            <Canvas
              ref={this.handleCanvas}
              style={
                {
                  // backgroundColor: "red"
                }
              }
            />
          </View>
        </View>
      </View>

[kaidoj]

Canvas is not initialized when calling new CanvasImage. Something to do with render method of react-native. Seems I solved the problem with little workaround. Checking if canvas is set before CanvasImage does its own check.

handleCanvas = (canvas) => {
    if (!(canvas instanceof Canvas)) {
      return;
    }

    const image = new CanvasImage(canvas);

[neohuiji]

Hi, @iddan, I alse have this problem. I got Error: Image must be initialized with a Canvas instance. Here is my code :

import Canvas, { Image as CanvasImage } from 'react-native-canvas';
import RNFS from 'react-native-fs';


    const _handleCanvas = (canvas) => {
        const image = new CanvasImage(canvas);
        canvas.width = 500;
        canvas.height = 500;
        image.src = `${RNFS.MainBundlePath}/${viewerData[0].path}`;
        console.log('image src: ', image.src);
        // the log here is  `undefined/../../images/3.jpg`
        const context = canvas.getContext('2d');
        image.addEventListener('load', () => {
            context.drawImage(image, 0, 0, 500, 500);
        });
    };

    return ( 
      <View>
            <Canvas ref={_handleCanvas} />
      </View>
)