TypeError: Cannot read property 'style' of undefined

[minhhho2]

I am trying use the library to render a basic canvas with a shape as per example code in the git repo. However, i am getting library errors and cant seem to resolve it.

I've added the example code to a boiler plate expo project with the minimal typescript setup with no additional code (just the boiler plate project).

I am getting the following error ...

The only custom code that is added is the example code which is added to the TabOneScreen.

[GoChartingAdmin]

Any update on this?

[iddan]

Sorry, I could not find time for this yet

[cre-mer]

I'm having the same issue. I create a new project with expo init myProject.

I didn't even add custom code. I only imported Canvas like so import { Canvas } from 'react-native-canvas'; and it immediately threw the error.

Here is my package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-canvas": "^0.1.37",
    "react-native-web": "~0.13.12",
    "react-native-webview": "^11.0.2"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

I only added react-native-webview and canvas.

[iddan]

Sorry, I could not find time for this yet

[cre-mer]

I wanted to contribute and try to fix the problem. But when I git clone and try to install, I get this:

[JosephKastier]

having the same issue :(

[Oderjunkie]

having this issue too!

[qurben]

react-native seems to have removed propTypes from most of their components, in favor of flow/typescript. react-native-web already has removed them (breaking react-native-canvas for web). Maybe it's an idea to also remove propTypes here. At some point react-native might also remove these propTypes.

[qurben]

So after removing the propTypes it still didn't work, but the solution is actually quite simple. With react-native-web there is no reason to use react-native-webview (it isn't even supported), and also no reason to use react-native-canvas.

Just using a plain <canvas> tag for web works exactly the same as this project does on the other platforms.

if (Platform.OS === "web") {
    return <canvas style={{width, height}} ref={handleCanvas} />
}

return (
    <Canvas style={{ width, height }} ref={handleCanvas} />
);

The object passed to ref is (nearly) the same in both cases.

---

It might be a good idea to document that web is not supported by this project, or to add this check in the project itself.

[qurben]

This is related to #184, in this issue web is also used.