"Function components cannot have string refs" error being thrown by React Native renderer

[danieledas]

I'm currently attempting to bundle a Unity project so it can be run in a React Native project, but I'm consistently hitting a runtime error whenever I try running it. I've gotten this error both with my Unity project as well as with a blank one. I've been testing only with a barebones React Native project, based on the one you create as part of the new-user tutorial.

To make it clear, I'm able to get it to build and run on my device, but I get an exception and the debug interface displays on my phone.

Relevant project files:

• App.js
• Unity_App.js, which is in the same folder as App.js
• package.json

Unity Build settings:

• I have also tried it with "Create Symbols.zip" set to Disabled
• Scripting Backend is set to IL2CPP (though I'm not sure that makes a difference)

Console output:

                Welcome to Metro v0.72.3
              Fast - Scalable - Integrated



To reload the app press "r"
To open developer menu press "d"

 BUNDLE  ./index.js

 LOG  Running "AwesomeProject" with {"rootTag":1}
 ERROR  Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref

This error is located at:
    in RCTView (created by View)
    in View (created by Unity)
    in Unity (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in AwesomeProject(RootComponent), js engine: hermes
 ERROR  Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-string-ref

This error is located at:
    in RCTView (created by View)
    in View (created by Unity)
    in Unity (created by App)
    in RCTView (created by View)
    in View (created by App)
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in AwesomeProject(RootComponent), js engine: hermes

Phone screen:

Versions, etc.

Desktop OS: Window 10 Mobile Device: Google Pixel 6 Unity version: 2021.3.5f1 Android NDK version: 21.3.6528147 Android SDK version: 12(S) (Following CLI instructions here) React version: 18.1.0 React native version: 0.70.6

[Erzangel]

just ran into the same issue while trying to do something similar. any news on this?

OS: Windows 10 Mobile Device: Google Pixel 3 Unity version: 2020.3.23f1 Android NDK version: 19.0.5232133 Android SDK version: 12

will try to find a workaround, I've seen this error being related to React's strict mode but I'm not sure if this is the case here

[Erzangel]

realized this was due to leftover TypeScript i put in my .js file from the example .tsx! I had:

const unityRef = useRef<UnityView>(null);

which I changed into:

const unityRef = useRef(null);

and this fixed it.