Rendering Cutouts
Draw around the notch and Dynamic Island
Rendering Cutouts
One of the most powerful features of this library is the ability to get exact SVG paths for display cutouts. This allows you to draw UI elements that perfectly hug the notch or Dynamic Island.
Prerequisites
You'll need react-native-svg to render the paths.
yarn add react-native-svgThe CutoutOverlay Component
Here is a complete example of a component that overlays the cutout on your screen. This is great for debugging or for creating "masked" effects.
import React, { useEffect, useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { Svg, Path } from 'react-native-svg';
import { DeviceGeometry } from 'react-native-device-geometry';
export const CutoutOverlay = () => {
const [cutouts, setCutouts] = useState([]);
useEffect(() => {
DeviceGeometry.getGeometry().then(geo => {
setCutouts(geo.mainDisplay.cutouts.cutouts);
});
}, []);
if (cutouts.length === 0) return null;
return (
<View style={StyleSheet.absoluteFill} pointerEvents="none">
<Svg style={StyleSheet.absoluteFill}>
{cutouts.map((cutout, i) => (
<Path
key={i}
d={cutout.svgPath}
fill="black"
/>
))}
</Svg>
</View>
);
};We use pointerEvents="none" so the overlay doesn't block touches on the rest of your app.
Animating the Path
If you enable supportComplex: true, you get access to raw bezier curves. You can use libraries like react-native-reanimated or react-native-skia to morph these shapes or animate elements along the curve.
const geometry = await DeviceGeometry.getGeometry({ supportComplex: true });
const curves = geometry.mainDisplay.cutouts.cutouts[0].bezierCurves;
// curves is an array of { start, end, control1, control2? }