Getting error "Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"

[kodosexe]

Hey,

I'm working on a project right now, and for testing purposes, I tried running the default app found in the README. Here it is:

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}/>
    )
  }
}
export default App

This returns the error

[Error] Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Canvas`.
    in WebView (at Canvas.js:166)
    in div (created by View)
    in View (at Canvas.js:165)
    in Canvas (at App.js:14)
    in App (at withExpoRoot.web.js:10)
    in ExpoRootComponent (at registerRootComponent.web.js:6)
    in RootComponent
    in div (created by View)
    in View (created by AppContainer)
    in div (created by View)
    in View (created by AppContainer)
    in AppContainer
	warningWithoutStack (bundle.js:7555)
	warning (bundle.js:9863)
	validateFunctionComponentInDev (bundle.js:24434)
	mountIndeterminateComponent (bundle.js:24410)
	beginWork$$1 (bundle.js:30203)
	performUnitOfWork (bundle.js:29221)
	workLoopSync (bundle.js:29195)
	renderRoot (bundle.js:28888)
	scheduleUpdateOnFiber (bundle.js:28429)
	scheduleRootUpdate (bundle.js:31329)
	(anonymous function) (bundle.js:31973)
	unbatchedUpdates (bundle.js:28697)
	legacyRenderSubtreeIntoContainer (bundle.js:31972)
	renderApplication (bundle.js:34304)
	runApplication (bundle.js:34236)
	registerRootComponent (bundle.js:2761:100)
	../../../../../../../../../home/kodos/react/canvastest/node_modules/expo/AppEntry.js (bundle.js:2717:89)
	__webpack_require__ (bundle.js:726)
	fn (bundle.js:101)
	(anonymous function) (bundle.js:80512)
	__webpack_require__ (bundle.js:726)
	(anonymous function) (bundle.js:793)
	Global Code (bundle.js:794)

Any way to fix this manually before an official commit?

Thanks, Kodos

[qurben]

react-native-webview, and so this project too, do not support react-native-web. A webview is not something you'd need when targeting react-native-web.

The public api of react-native-canvas is almost the same as the one from the <canvas> element. The main differences between both apis are described in README.md. So the following should work:

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

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

---

It might be nice to automatically catch this case in this project, so that any projects using this project don't have to check which platform they are targeting.

[thomasbeauvais]

I see no mention of iOS in the original ticket.

I am running this in Chrome on my Mac and have the error mentioned. I don't see how PR 298 would resolve this. https://github.com/iddan/react-native-canvas/pull/298