This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 57).

A MaskedView component with an API compatible with @react-native-masked-view/masked-view. The opaque pixels of maskElement reveal the masked content behind it; transparent pixels hide it.

Under the hood this component bridges arbitrary React Native children into the platform-specific @expo/ui masking primitives:

• Android: Jetpack Compose graphics layer compositing with BlendMode.DstIn.
• iOS: SwiftUI .mask modifier.

Installation

If you are installing this in an existing React Native app, make sure to install expo in your project.

Migrating from @react-native-masked-view/masked-view

• Update the import from import MaskedView from '@react-native-masked-view/masked-view' to import { MaskedView } from '@expo/ui/community/masked-view'.
• The androidRenderingMode prop is not supported. The Compose-based implementation always uses an offscreen graphics layer, so the prop has no equivalent and is omitted from the public types.
• Web is not implemented. On web, children render unmasked and a one-time console warning is logged. For web targets, prefer the CSS primitive that fits your specific case:
  • Gradient text — background-clip: text with color: 'transparent' and a CSS gradient/image as the background.
  • Alpha fade — mask-image: linear-gradient(...) (or WebkitMaskImage) directly on the content view.
  • Shape mask (circle, rounded rectangle, and so on) — clip-path: circle(...) / inset(...) / path(...), or border-radius + overflow: 'hidden'.

Basic usage

import { MaskedView } from '@expo/ui/community/masked-view';
import { StyleSheet, Text, View } from 'react-native';

export default function MaskedViewExample() {
  return (
    <MaskedView
      style={{ width: 300, height: 80 }}
      maskElement={
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text style={{ fontSize: 64, fontWeight: 'bold' }}>EXPO</Text>
        </View>
      }>
      <View
        style={[
          StyleSheet.absoluteFill,
          {
            experimental_backgroundImage:
              'linear-gradient(135deg, #FF3B30, #FF9500, #FFCC00, #34C759, #007AFF, #AF52DE)',
          },
        ]}
      />
    </MaskedView>
  );
}

Alpha-fade mask

Only the alpha channel of the maskElement matters: opaque pixels reveal content, transparent pixels hide it. Use a LinearGradient (from expo-linear-gradient) that goes from opaque to transparent — 'black' (for example) to 'transparent' below — to fade content out along an axis.

import { MaskedView } from '@expo/ui/community/masked-view';
import { LinearGradient } from 'expo-linear-gradient';
import { StyleSheet, View } from 'react-native';

export default function AlphaFadeExample() {
  return (
    <MaskedView
      style={{ width: 300, height: 80, flexDirection: 'row' }}
      maskElement={
        <LinearGradient
          colors={['black', 'transparent']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          style={StyleSheet.absoluteFill}
        />
      }>
      <View style={{ flex: 1, backgroundColor: '#3D5A80' }} />
      <View style={{ flex: 1, backgroundColor: '#DAA520' }} />
      <View style={{ flex: 1, backgroundColor: '#E07A5F' }} />
    </MaskedView>
  );
}

API

import { MaskedView } from '@expo/ui/community/masked-view';

Component