How to use CameraControls in react native

[bbb169]

Describe the bug

I'm use CameraControls in '@react-three/drei/native', which based on this libary, but it cause this bug So, it is possible to use CameraControls in react native ?

To Reproduce

Steps to reproduce the behavior:

1. Use expo to build a react-native project
2. Import CameraControls and use it
3. See error

Code

import React, { Suspense, useRef, useState } from 'react';
import { View } from 'react-native';
import { BoxGeometry, Color, Vector3 } from 'three';
import { Button } from '@rneui/themed';
import { Canvas, MeshProps } from '@react-three/fiber/native';
import {
  CameraControls,
  CameraShake,
  PerspectiveCamera,
} from '@react-three/drei/native';
import BoxEdges from '../../component/boxEdges';
import XYZGrid from '../../component/XYZGrid';
import { publicStyles } from '../../styles';
import CameraControler from '../../component/cameraControls';

function Rig() {
  return (
    <CameraShake
      maxYaw={0.01}
      maxPitch={0.01}
      maxRoll={0.01}
      yawFrequency={0.5}
      pitchFrequency={0.5}
      rollFrequency={0.4}
    />
  );
}

const Cube = ({ ...props }: MeshProps) => {
  const boxRef = useRef<BoxGeometry>(null);

  return (
    <mesh {...props}>
      <boxGeometry ref={boxRef} args={[1, 1, 1]} />
      <meshBasicMaterial attach="material" color="yellow" />
      {boxRef.current && <BoxEdges boxRef={boxRef} />}
    </mesh>
  );
};

export default function HomePage(): React.JSX.Element {
  const [renderTimes, setRenderTimes] = useState(1);

  return (
    <>
      <Canvas
        key={renderTimes}
        scene={{ background: new Color('black') }}
        camera={{
          position: [10, 10, 10],
          onUpdate: self => {
            self.lookAt(new Vector3(0, 0, 0));
          },
        }}>
        <Suspense fallback={null}>
          <Cube position={[1, 1, 1]} />
          <XYZGrid isX={true} />
          <XYZGrid isY={true} />
          <XYZGrid isZ={true} />
          {/* <Rig /> */}
          <directionalLight />
        </Suspense>
        {/* <PerspectiveCamera makeDefault /> */}
        <CameraControls />
      </Canvas>
      <View>
        <Button
          style={{
            ...publicStyles.displayCenter,
            backgroundColor: 'rgb(38,139,210)',
          }}
          onPress={() => {
            setRenderTimes(pre => pre + 1);
          }}
          title={renderTimes.toString()}
        />
      </View>
    </>
  );
}

Live example

No response

Expected behavior

CameraControls can be used normally in react native

Screenshots or Video

No response

Device

Mobile

OS

Android

Browser

Chrome

[yomotsu]

Sorry, but I don't know much about React Native...

[MainzerKaiser]

What is the status here, i am using this package so far but it is missing touch release events: https://github.com/TiagoCavalcante/r3f-native-orbitcontrols