react-native-clip-view

Experimental Fabric component for React Native 0.85+. The API may change between experimental releases.

Purpose and scope

Built for react-native-screen-transitions, this package exposes animatable clipping props on a native view. The goal is to improve Android transition performance by changing the visible clipping region without resizing the content on every frame. Actual performance depends on the workload and device.

Clip View is not a general replacement for MaskedView. It supports rectangular and rounded-rectangle clipping, not arbitrary alpha masks such as text, images, or gradients. It was built to help screen transitions animate zoom and boundary reveals on Android without resizing content or rendering a separate mask.

You can use it independently, but the API is intentionally small. There are no plans to turn it into a general-purpose masking or graphics library. If you have a concrete use case that would benefit from extending the API, open an issue and share it.

Android comparison

Two separate 10-second recordings on the same Pixel 4a Android emulator, with 100 overlapping copies and identical animation settings. MaskedView animates a regular View mask in software rendering mode; Native Clip View clips the content directly without MaskedView.

| MaskedView | Native Clip View | | --- | --- | | | | | Watch MaskedView | Watch Native Clip View |

The inline previews are reduced to 15 FPS; the linked videos are 30 FPS. These are debug-build demonstrations, not a device benchmark. The on-screen meter estimates UI callback timing rather than GPU-presented frames. Neither video contains mode switching.

Installation

npm install react-native-clip-view@experimental

Rebuild your native app after installation. For bare iOS apps, install CocoaPods dependencies before building. Expo apps require a development build.

Usage

A Fabric view that clips a fixed-layout subtree to an animated rounded rectangle. It does not change its Yoga width/height. It can be used independently of navigation libraries.

import { ClipView } from 'react-native-clip-view';
import Animated, { useAnimatedProps } from 'react-native-reanimated';

const AnimatedClipView = Animated.createAnimatedComponent(ClipView);
// In a component:
const props = useAnimatedProps(() => ({
  clipWidth: width.value,
  clipHeight: height.value,
  clipRadius: 24,
}));
// Keep the host and content layout dimensions fixed.
<AnimatedClipView style={{ width: 280, height: 280 }} animatedProps={props}>
  {children}
</AnimatedClipView>;

Validation status

The comparison shown above was recorded on a Pixel 4a Android emulator, not a physical device. The example was also built and exercised on an iPhone 17 Pro simulator. Build, type checking, and React Native Codegen checks have passed.

The initial results look promising, but further testing is needed before recommending this for a smooth experience in react-native-screen-transitions. In particular, real transition integration, gestures, corner behavior, and performance on physical devices still need validation. The synthetic comparison does not establish a general performance improvement or production readiness.

Development

The library scaffold was generated with Create React Native Library. Builder Bob builds its JavaScript and type declarations. See CONTRIBUTING.md for build commands and the Expo example.