phosphor-react-native icon indicating copy to clipboard operation
phosphor-react-native copied to clipboard

[Expo 54 / React Native 0.81.5] Error: Unsupported top level event type "topSvgLayout" dispatched when using phosphor-react-native

Open raphplt opened this issue 2 months ago • 1 comments

Hi đź‘‹

I’m currently developing an Expo 54 app using React Native 0.81.5, React 19.1.0, and phosphor-react-native. Whenever I render icons from Phosphor, I get this runtime error in development:

ERROR  [Error: Unsupported top level event type "topSvgLayout" dispatched]

Call Stack
  ReactNativeBridgeEventPlugin.extractEvents (node_modules\react-native\Libraries\Renderer\implementations\ReactFabric-dev.js)
  batchedUpdates$1$argument_0 (node_modules\react-native\Libraries\Renderer\implementations\ReactFabric-dev.js)
  batchedUpdatesImpl (node_modules\react-native\Libraries\Renderer\implementations\ReactFabric-dev.js)
  batchedUpdates$1 (node_modules\react-native\Libraries\Renderer\implementations\ReactFabric-dev.js)
  dispatchEvent (node_modules\react-native\Libraries\Renderer\implementations\ReactFabric-dev.js)

The app doesn’t crash, but this warning pops up every time I use <HorseIcon />, <CubeIcon />, etc.

Minimal reproduction

import { Trans } from "@lingui/macro";
import { CubeIcon, HeartIcon, HorseIcon } from "phosphor-react-native";
import { Text, View } from "react-native";

export default function HomeScreen() {
  return (
    <View className="flex-1 items-center justify-center">
      <Text className="text-3xl font-bold text-blue-500">
        <Trans id="home-screen.title">Welcome!</Trans>
      </Text>
      <HorseIcon size={24} color="blue" />
      <HeartIcon size={24} color="blue" />
      <CubeIcon size={24} color="blue" />
    </View>
  );
}

Environment :

  • Expo SDK: 54.0.13
  • React Native: 0.81.5
  • React: 19.1.0
  • react-native-svg: 15.12.1
  • phosphor-react-nativ*: 3.0.1
  • Platform: Android (Dev client)

Expected behavior : Icons should render without emitting an “Unsupported top level event” warning.

Actual behavior : Icons render correctly, but React Native logs the following error in development: Error: Unsupported top level event type "topSvgLayout" dispatched

This seems related to the Fabric event contract mismatch between React Native and react-native-svg. It might occur when the native build uses a different react-native-svg version than the JS bundle.

Rebuilding the dev client didn’t solve the issue. It could be a version mismatch between Expo SDK 54 and the latest react-native-svg or Phosphor release.

Image

raphplt avatar Oct 25 '25 09:10 raphplt