callstack / callstack/masked-view
[iOS][Fabric] MaskedView crashes when rendered inline, inside <Text> subtree
- Dominant language
- JavaScript
- Stars
- 1.2k
- Forks
- 131
- PR merge metrics
- No merged PRs in 30d
Description
## Environment
Expo SDK: 54
newArch: True
React-Native: 0.81.6
React: 19.1.4
Platform: iOS `18.x.x` and `26.x.x`
## Description
When `@react-native-masked-view/masked-view` is rendered inside a `` subtree on iOS with Fabric / New Architecture enabled, the app crashes with a native assertion instead of failing gracefully.
The assertion I see is:
```txt
*** Assertion failure in -[RCTComponentViewFactory createComponentViewWithComponentHandle:](), /Users/runner/work/react-native/react-native/packages/react-native/React/Fabric/Mounting/RCTComponentViewFactory.mm:217
```
## Summary
`@react-native-masked-view/masked-view` crashes on iOS with React Native New Architecture / Fabric when `MaskedView` is rendered inside a `` subtree.
This is the pattern that triggers it:
```tsx
Prefix highlighted text
```
## Reproducible Demo
```tsx
// GradientText.tsx
import React from 'react';
import { SafeAreaView, Text, StyleSheet } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';
function GradientText({ children }: { children: string }) {
return (
{children}
}
>
{children}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#140034',
padding: 24,
},
title: {
color: '#fff',
fontSize: 32,
fontWeight: '800',
lineHeight: 40,
textAlign: 'center',
},
gradientText: {
fontSize: 32,
fontWeight: '800',
lineHeight: 40,
},
gradient: {
flexDirection: 'row',
},
hidden: {
opacity: 0,
},
});
```
Works fine on android.
Contributor guide
Research direction
Start by reproducing the provided GradientText and MaskedView example on iOS with Fabric/New Architecture, then trace the @react-native-masked-view/masked-view rendering entry point involved in a subtree. Done means the inline case no longer triggers the RCTComponentViewFactory assertion and has a regression check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100