Wrap any view in
id Give two <SharedHero> views the same id on your list screen and detail screen. When you navigate forward or pop back, the native coordinator measures both views in window coordinates and flies the element between them.
import { Image, Pressable } from 'react-native';
import { SharedHero } from 'react-native-shared-hero';
// 1. Source screen (for example, a feed or grid cell)
export function FeedCard({ item, onPress }) {
return (
<Pressable onPress={onPress}>
<SharedHero
id={`photo-${item.id}`}
mode="morph"
style={{ borderRadius: 12, overflow: 'hidden' }}
>
<Image source={{ uri: item.thumbUrl }} style={{ width: 140, height: 180 }} />
</SharedHero>
</Pressable>
);
}
// 2. Destination screen (stack push, modal, sheet, or tab detail)
export function PhotoDetailScreen({ item }) {
return (
<SharedHero
id={`photo-${item.id}`}
mode="morph"
motionPath="arc"
spring={{ damping: 22, stiffness: 260, mass: 1 }}
style={{ borderRadius: 24, overflow: 'hidden' }}
>
<Image source={{ uri: item.fullUrl }} style={{ width: '100%', height: 420 }} />
</SharedHero>
);
}Try changing the transition mode, motion path, spring physics, and corner radii below to preview how react-native-shared-hero interpolates your view and generates the corresponding JSX props:
Interactive simulation of the native window-overlay flight. Tap "Fly to Detail" or drag the progress slider to inspect how bounds, corner radius, fade curve, and trajectory behave.
// Source screen
<SharedHero
id="poster-42"
mode="morph"
style={{ borderRadius: 10 }}
>
<Image source={{ uri }} style={styles.thumb} />
</SharedHero>
// Destination screen
<SharedHero
id="poster-42"
mode="morph"
motionPath="arc"
spring={{ damping: 22, stiffness: 260, mass: 1 }}
style={{ borderRadius: 24 }}
>
<Image source={{ uri }} style={styles.heroHeader} />
</SharedHero>