React-three-fiber: Not working on an Expo native application

[5ervant]

I built my Next.js and native applications with Expo for web using @expo/next-adapter.
They are sharing some same components.

react-three-fiber is said to support react-native platform. But upon implementing this component https://github.com/zeit/next.js/blob/canary/examples/with-three-js/pages/boxes.js with react-three-fiber, it's working on my Next.js app with a little web console error about a missing unique "key" prop. But on my Expo native development environment, I'm getting this error:

Unable to resolve "expo-gl" from "node_modulesreact-three-fibernative.js"
Failed building JavaScript bundle.

• Here's the Three.js implementation of Expo: https://github.com/expo/expo-three
• Here's my raised issue related about this on expo-cli: https://github.com/expo/expo-cli/issues/1861

Any solution for this?

[drcmda]

i have never used RN myself and this looks like a tooling problem, but you could try this: https://github.com/birkir/react-three-fiber-examples

[5ervant]

Still getting this with that example:

Module not found: Can't resolve 'expo-gl' in 'C:UsersUSERDocumentsPROJECTSPLATFORMAPP_NAMElib'
ModuleNotFoundError: Module not found: Error: Can't resolve 'expo-gl' in 'C:UsersUSERDocumentsPROJECTSPLATFORMAPP_NAMElib'

Seems like react-three-fiber needs to support expo because they have there own implementation of three:

import { THREE } from 'expo-three';

[drcmda]

it shouldn't matter, r3f isn't really dependent on three other than the canvas component which just creates the webgl renderer and sets up cameras and such. i've seen working snacks, too, for instance: https://expo.io/@birkir/react-three-fiber-example (just executed it and it runs). you could ask @birkir or maybe even get involved, i can't help you with RN but would welcome PR's if something's not right.

[drcmda]

ps. here's our native target distro, it takes from expo-gl and expo-three https://github.com/react-spring/react-three-fiber/blob/master/src/targets/native/canvas.tsx

import * as React from 'react'
import { GLView, ExpoWebGLRenderingContext } from 'expo-gl'
import {
  View,
  LayoutChangeEvent,
  PixelRatio,
  ViewStyle,
  PanResponder,
  GestureResponderEvent,
  StyleSheet,
} from 'react-native'
import { Renderer } from 'expo-three'

[drcmda]

did you perhaps forget to install expo-gl? i mean, this is what the error implies at least.

[5ervant]

Upon implementing this BirdsPage component https://github.com/zeit/next.js/blob/canary/examples/with-three-js/pages/boxes.js with import { useFrame, Canvas } from '../lib/react-three-fiber', I'm seeing the animation but they're not clickable with these YellowBox warnings:

(28) window.performance.clearMeasures is not implemented
(28) window.performance.clearMarks is not implemented
(28) window.performance.measure is not implemented
(28) window.performance.mark is not implemented

And the SyntaxError: Cannot use import statement outside a module on my Next.js app is raising because they're sharing the same code.

I guess, I need to create two Three.js programs specifically for my Next.js app and for my Expo native app, and optimized them later.

[drcmda]

that's odd, window.performance is neither part of the r3f library nor threejs, it doesn't exist in the source - if you want you can keep the issue open and if anyone finds anything lets fix it.

as for onClick, it can indeed be broken, i've heard it before. could you try onPointerUp/Down? this should work.

[5ervant]

This Test component is working well on Next.js web app, except that some text of the web page are being selected by clicking a Box' mesh:

import React, { useRef, useState, Suspense } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { Canvas, useFrame } from 'react-three-fiber';

export default function Test() {
  const { t } = useTranslation('test');

  return (
    <View style={styles.container}>
      <Text>{t('title')}</Text>

      <BirdsPage />
    </View>
  );
}

const Box = (props) => {
  const mesh = useRef();

  const [hovered, setHover] = useState(false);
  const [active, setActive] = useState(false);

  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? [6, 6, 6] : [5, 5, 5]}
      onPointerUp={(e) => setActive(!active)}
      onPointerOver={(e) => setHover(true)}
      onPointerOut={(e) => setHover(false)}
    >
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <meshStandardMaterial
        attach="material"
        color={hovered ? '#2b6c76' : '#720b23'}
      />
    </mesh>
  );
};

const BirdsPage = () => {
  return (
    <Canvas
      style={{ width: 200, height: 100 }}
      camera={{ position: [0, 0, 35] }}
    >
      <ambientLight intensity={2} />
      <pointLight position={[40, 40, 40]} />
      <Suspense fallback={null}>
        <Box position={[10, 0, 0]} />
        <Box position={[-10, 0, 0]} />
        <Box position={[0, 10, 0]} />
        <Box position={[0, -10, 0]} />
      </Suspense>
    </Canvas>
  );
};

const styles = StyleSheet.create({
  container: { marginBottom: 50 },
});

The animation is still working on Expo native app, but with the YellowBox warnings that I've mentioned here https://github.com/react-spring/react-three-fiber/issues/338#issuecomment-612432794 and the Boxes are not clickable.

I tried to capture the initial output on the terminal:

Warning: THREE.WebGLRenderer: OES_texture_float extension not supported.
Warning: THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.
Warning: THREE.WebGLRenderer: OES_texture_half_float extension not supported.       
Warning: THREE.WebGLRenderer: OES_texture_half_float_linear extension not supported.
Warning: THREE.WebGLRenderer: OES_standard_derivatives extension not supported.     
Warning: THREE.WebGLRenderer: OES_element_index_uint extension not supported.       
Warning: THREE.WebGLRenderer: ANGLE_instanced_arrays extension not supported.       
Warning: THREE.WebGLRenderer: OES_texture_float_linear extension not supported.     
Warning: THREE.WebGLRenderer: EXT_blend_minmax extension not supported.
Warning: THREE.WebGLRenderer: EXT_frag_depth extension not supported.
Warning: THREE.WebGLRenderer: WEBGL_draw_buffers extension not supported.
Warning: THREE.WebGLRenderer: EXT_shader_texture_lod extension not supported.       

[5ervant]

Partial solution to ignore the warnings on an Expo native app:

import { YellowBox } from 'react-native';

// TODO: Remove when fixed
YellowBox.ignoreWarnings([
  'window.performance.clearMeasures is not implemented',
  'window.performance.clearMarks is not implemented',
  'window.performance.measure is not implemented',
  'window.performance.mark is not implemented',
]);

WILL WORK ON A NEXT.JS AND EXPO-PLATFORM APPLICATION.

---

This will throw a "window not defined" error in Next.js:

window.performance.clearMeasures = ()=>{}
window.performance.clearMarks = ()=>{}
window.performance.measure = ()=>{}
window.performance.mark = ()=>{}

[maxdeepfield]

Partial solution to ignore the warnings on an Expo native app:

import { YellowBox } from 'react-native';

// TODO: Remove when fixed
YellowBox.ignoreWarnings([
  'window.performance.clearMeasures is not implemented',
  'window.performance.clearMarks is not implemented',
  'window.performance.measure is not implemented',
  'window.performance.mark is not implemented',
]);

just ignore warnings causes lags because you still will have lot of errors in console.
this works better:

window.performance.clearMeasures = ()=>{}
window.performance.clearMarks = ()=>{}
window.performance.measure = ()=>{}
window.performance.mark = ()=>{}