Canvas not drawing anything in web view

[axcasella]

Just want to test out the example but cannot get it to run in web.

I verified that I can get a drawing context by logging the result of canvas.getContext('2d');, and the fillStyle is purple, but nothing shows on the screen; ctx.fillRect(0, 0, 100, 100) didn't do anything.

To reproduce:

1. Create an app with expo/create-react-native-app
2. Install dependencies as listed in the README

npm install react-native-webview
react-native link react-native-webview
npm install react-native-canvas

3. Replace app.tsx with the code in the README

import React, { Component } from 'react';
import Canvas from 'react-native-canvas';

class App extends Component {

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'purple';
    ctx.fillRect(0, 0, 100, 100);
  }

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

4. Run npm run web

What am I missing?

[iddan]

Hey, thanks for trying React Native Canvas. Can you please add a null check for the canvas ref?

if (canvas === null) {
    return
}

[axcasella]

Yep added the null check and canvas is not null.

By the way, my versions are:

react-native-cli: 2.0.1
react-native: 0.61.5
react-native-webview: 9.4.0
react-native-canvas: 0.1.37

[iddan]

That is odd. Can you try to copy one of the examples and see if it works?

[axcasella]

I copied the examples, only the images from the src show up. Nothing gets drawn on the canvas itself

[axcasella]

Check out this Snack I made: https://snack.expo.io/KWT4nQlds

It shows the drawing correctly in ios and android but not in web mode. Perhaps it's a bug?