How would I just insert my three.js visualization in to a react native app?

So I found this website that had a real time editor for react native apps 

https://expo.dev/

https://snack.expo.dev/@johnsokol/basic-ar-with-three.js

Except every demo was broken and failed. No amount of debugging would bring any back to life. 

I update the library version and security things break just one problem after the next. 

I am really upset with it really because it's so cool if it actually worked. 

I tried the gyro, magnetometer, light sensor, all just read 0... Zip nada.  

three.js just will not run for anything. 

This one is working after mashing library version numbers for 2 hours: 
https://snack.expo.dev/@johnsokol/react-three-fiber-example  

It react native itself broken? or just expo? and it expo a library or this website?

Response from ChatGPT.  

In order to integrate a Three.js visualization into a React Native app, you will need to wrap your Three.js code in a React Native component. Here are the steps you can follow:

1. Install the react-three-fiber library: React-three-fiber is a React renderer for Three.js that makes it easy to use Three.js in React Native. You can install it using npm by running the following command: npm install react-three-fiber.

2. Create a React Native component: Create a new React Native component that will render your Three.js visualization. You can use the useThree hook provided by react-three-fiber to access the Three.js renderer and scene.

3. Wrap your Three.js code: Wrap your existing Three.js code in the React Native component you created in step 2. You can use the Canvas component provided by react-three-fiber to create a Three.js renderer, and the useRender hook to trigger updates to your Three.js scene.

4. Import the React Native component: Import the React Native component you created in step 2 into your main React Native app, and use it to render your Three.js visualization.

Here is an example of what your React Native component might look like:

javascript
import React from 'react';
import { Canvas, useThree } from 'react-three-fiber';

const ThreeJSVisualization = () => {
  const { gl, scene, camera } = useThree();

  // Your Three.js code here

  return (
    <Canvas gl={gl} camera={camera}>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      {/* Your Three.js scene here */}
    </Canvas>
  );
};

export default ThreeJSVisualization;

This is a basic example of how you can integrate a Three.js visualization into a React Native app using react-three-fiber. You can learn more about react-three-fiber and how to use it to create Three.js scenes in React Native by visiting the official documentation at https://github.com/react-spring/react-three-fiber.

Below is the actual code that worked in Expo https://snack.expo.dev/@johnsokol/react-three-fiber-example

javascript
import React, { useRef, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Canvas, useRender, useFrame } from 'react-three-fiber';

function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef();

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false);
  const [active, setActive] = useState(false);

  // Rotate mesh every frame, this is outside of React without overhead
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={e => setActive(!active)}
      onPointerOver={e => setHover(true)}
      onPointerOut={e => setHover(false)}>
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <meshStandardMaterial
        attach="material"
        color={hovered ? 'hotpink' : 'orange'}
      />
    </mesh>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Canvas>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <Box position={[-1.2, 0, 0]} />
        <Box position={[1.2, 0, 0]} />
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
  },
});

Package.json
{
  "dependencies": {
    "three": "^0.108.0",
    "expo-gl": "8.0.0",
    "scheduler": "0.13.3",
    "expo-three": "5.0.0",
    "react-reconciler": "0.20.4",
    "react-three-fiber": "4.0.17"
  }
}