software-mansion / software-mansion/react-native-svg

Svg does not render in fabric react-native-macos 0.81

Open
#2,869 0 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Repro provided
Dominant language
TypeScript
Stars
8k
Forks
1.2k
Avg merge
10d 9h
Merged PRs (30d)
2

Description

Description

SVG does not load in react-native-macos 0.81 with the new arch enabled

Old arch:
Image

New arch (same code):
Image

Code (App.tsx):

import { Text, View } from "react-native";
import SvgExample from "./SvgExample";

export default function () {
  return (
    <View>
      <Text>Hello</Text>
      <View style={{backgroundColor: 'red', width: 500, height: 500}} />
      <SvgExample />
    </View>
  )
}

Steps to reproduce
  1. Create a fresh react native project
  2. Add macOS support (https://microsoft.github.io/react-native-macos/docs/getting-started)
  3. Install react-native-svg
  4. Try to render any SVG
  5. Build and run the app with new arch enabled
Snack or a link to a repository

https://github.com/Roshan-24/rnm-81-svg-repro

SVG version

15.15.2

React Native version

0.81.5

Platforms

macOS

JavaScript runtime

None

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device

Device model

No response

Acknowledgements

Yes

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Roshan-24/rnm-81-svg-repro repository and its App.tsx example, then run it on macOS with React Native 0.81.5, Fabric, and react-native-svg 15.15.2. Compare the old-architecture and new-architecture runs; done means an SVG renders correctly in the new-architecture macOS build.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
desktop-dev, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.