React Native is not supported

[imyuanx]

I checked the issues, It seems that many people have the same problem as me, but no solution.

I tried react-spline with react-three-fiber, there are two problems to be solved.

Problem 1

react-spline load spline file from url, but React Native not support FileReader.readAsArrayBuffer.

Related issues

https://github.com/facebook/react-native/issues/21209

https://github.com/facebook/react-native/pull/30769

We can add the polyfill of FileReader.readAsArrayBuffer at SplineLoader. I tried, it work. see: https://github.com/facebook/react-native/issues/21209#issuecomment-495294672

Problem 2

I use spline generate the code of react-three-fiber, but it and example code of the react-three-fiber docs are different.

spline generate code

<mesh
  name="Rectangle"
  geometry={nodes.Rectangle.geometry}
  material={materials['Rectangle Material']}
  castShadow
  receiveShadow
  position={[3, -13.1, 0]}
  rotation={[-Math.PI / 2, 0, 0]}
  scale={1}
/>

Example code of the react-three-fiber docs

<mesh
  {...props}
  ref={mesh}
  scale={active ? 1.5 : 1}
  onClick={(event) => setActive(!active)}
  onPointerOver={(event) => setHover(true)}
  onPointerOut={(event) => setHover(false)}>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
</mesh>

I'm looking for a way to convert between them. After their conversion, spline can work perfectly in React Native.

[marcofugaro]

I use spline generate the code of react-three-fiber, but it and example code of the react-three-fiber docs are different.

Hi, can you elaborate on what part of the generate code doesn't work on react-native? They both seem valid r3f examples to me.

Could you test if the code generated from gltfjsx works in react-native? We took inspiration from that.

[imyuanx]

I changed a simple model to run successfully, useSpline can't load local file, I must provide a url.

I got warn and error when I use complex model.

Continuously receive error ERROR TypeError: undefined is not an object (evaluating 'this.image.img.width')

[Osmanity]

Will this issue be solve soon, because it still is a problem till this day?