Expo GL does not support the new Architechture

[IAlphaOmegaI]

Issue: Black Screen, no environments, no lights and no meshes load at all, no explicit error or warnings, but nothing actually loads.

Run on a real IOS device through a dev build;
Tried on both expo@51 with the following app config:

  plugins: [
    "expo-router",
    [
      "expo-build-properties",
      {
        ios: {
          newArchEnabled: true,
        },
        android: {
          newArchEnabled: true,
        },
      },
    ],
  ],

and on the expo@52 with the

newArchEnabled: true

flag on the root of the config;

package.json on expo@51

{
"dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-navigation/native": "^6.0.2",
    "@react-three/drei": "^9.115.0",
    "@react-three/fiber": "^8.17.10",
    "@react-three/postprocessing": "^2.16.3",
    "expo": "~51.0.28",
    "expo-build-properties": "~0.12.5",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.9",
    "expo-gl": "~14.0.2",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.23",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "nativewind": "^4.1.21",
    "react-dom": "18.3.1",
    "react-native": "0.74.5",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10",
    "react-three-fiber": "^6.0.13"
  },
}

package.json on expo@52 on a fresh project (not an update of the 51 project)

{
 "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-navigation/native": "7.0.0-rc.20",
    "@zenncore/config": "*",
    "@zenncore/hooks": "*",
    "@zennui/icons": "*",
    "@zennui/native": "*",
    "expo": "~52.0.0-preview.5",
    "expo-blur": "~14.0.1",
    "expo-clipboard": "4.8.0",
    "expo-constants": "~17.0.1",
    "expo-font": "~13.0.0",
    "expo-haptics": "~14.0.0",
    "expo-image": "1.13.0",
    "expo-linear-gradient": "^14.0.1",
    "expo-linking": "~7.0.2",
    "expo-localization": "16.0.0",
    "expo-location": "18.0.1",
    "expo-router": "~4.0.0-preview.3",
    "expo-secure-store": "~14.0.0",
    "expo-splash-screen": "~0.28.2",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.0",
    "expo-system-ui": "~4.0.1",
    "expo-task-manager": "12.0.0",
    "expo-web-browser": "~14.0.0",
    "nativewind": "4.1.21",
    "react": "18.3.1",
    "react-native": "0.76.0",
    "react-native-circular-progress": "1.4.1",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.11.0",
    "react-native-screens": "4.0.0-beta.14",
    "react-native-svg": "15.8.0",
    "react-native-web": "~0.19.13"
  },
}

Here is the code:

import { Canvas, useFrame } from "@react-three/fiber";
import { Environment, useGLTF } from "@react-three/drei/native";
import { Suspense } from "react";
import { Bloom, EffectComposer } from "@react-three/postprocessing";

export default () => {
  return (
    <Canvas camera={{ position: [-6, 0, 16], fov: 36 }}>
      <color attach="background" args={[0xe2f4df]} />
      <ambientLight />
      <directionalLight intensity={1.1} position={[0.5, 0, 0.866]} />
      <directionalLight intensity={0.8} position={[-6, 2, 2]} />

      <Suspense>
        <Environment preset="park" />
        <IPhone />
      </Suspense>

      <EffectComposer>
        <Bloom intensity={1.5} luminanceThreshold={0.9} />
      </EffectComposer>
    </Canvas>
  );
};

const IPhone = () => {
  const asset: string = require("../../../assets/models/iphone.glb");
  const { scene } = useGLTF(asset);
  useFrame(() => {
    scene.rotation.y += 0.01;
  });
  return <primitive object={scene} />;
};

This app is part of a turborepo monorepo:

metro.config.js

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");
const path = require("node:path");
const {
  withTurborepoManagedCache,
  withWorkspace,
  withSVGTransformer,
  withNativeWind,
with3DAssets
  composePlugins,
} = require("@zenncore/config/native");

const PROJECT_ROOT = __dirname;
const WORKSPACE_ROOT = path.resolve(PROJECT_ROOT, "../..");

const withZenncore = composePlugins(
  (config) => withSVGTransformer(config, WORKSPACE_ROOT),
  (config) => withNativeWind(config, WORKSPACE_ROOT),
  (config) => withWorkspace(config, WORKSPACE_ROOT, PROJECT_ROOT),
  (config) => withTurborepoManagedCache(config, PROJECT_ROOT),
  (config) => with3DAssets(config)
);

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(PROJECT_ROOT);

module.exports = withZenncore(config);

Otherwise works great on the old architecture!

[gemueselasagne]

Same issues here on the new arch.