Warning: "A React Element from an older version of React was rendered" with @reactvision/react-viro #365
Description
Hi @adelarsq @bilewinters @oitoito @oliedis @schiller-manuel
I am encountering a persistent warning: "Error: A React Element from an older version of React was rendered. This is not supported." when using the @reactvision/react-viro package in my Expo/React Native project. This warning appears consistently during development and might indicate a deeper compatibility issue with modern React versions.
ERROR Warning: Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.
When used this package then got this error, demo code:-
import { ViroARScene, ViroARSceneNavigator, ViroText, ViroTrackingStateConstants, } from "@reactvision/react-viro"; import React, { useState } => "react"; // Corrected import import { StyleSheet } from "react-native"; const HelloWorldSceneAR = () => { const [text, setText] = useState("Initializing AR..."); function onInitialized(state, reason) { if (state === ViroTrackingStateConstants.TRACKING_NORMAL) { setText("Hello World!"); } else if (state === ViroTrackingStateConstants.TRACKING_UNAVAILABLE) { // Handle loss of tracking } } return ( <ViroText text={text} scale={[0.5, 0.5, 0.5]} position={[0, 0, -1]} style={styles.helloWorldTextStyle} /> ); }; export default () => { return ( <ViroARSceneNavigator autofocus={true} initialScene={{ scene: HelloWorldSceneAR, }} style={styles.f1} /> ); }; var styles = StyleSheet.create({ f1: { flex: 1 }, helloWorldTextStyle: { fontFamily: "Arial", fontSize: 30, color: "#ffffff", textAlignVertical: "center", textAlign: "center", }, });
