Skip to content

[iOS][Fabric] MaskedView crashes when rendered inline, inside <Text> subtree #248

@XChikuX

Description

@XChikuX

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 <Text> subtree on iOS with Fabric / New Architecture enabled, the app crashes with a native assertion instead of failing gracefully.

The assertion I see is:

*** 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 <Text> subtree.

This is the pattern that triggers it:

<Text>
  Prefix <GradientText>highlighted text</GradientText>
</Text>

Reproducible Demo

// 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 (
    <MaskedView
      maskElement={
        <Text style={styles.gradientText}>
          {children}
        </Text>
      }
    >
      <LinearGradient
        colors={['#dd3562', '#8354ff']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        style={styles.gradient}
      >
        <Text style={[styles.gradientText, styles.hidden]}>
          {children}
        </Text>
      </LinearGradient>
    </MaskedView>
  );
}

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions