Skip to content

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

@raphplt

Description

@raphplt

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions