What is react-native-shared-hero?

react-native-shared-hero is a library for React Native apps that animates a shared element as it flies between two different screens. This effect, often called a hero transition, is when you tap an image in a list and that image appears to expand and glide into its position on the detail screen. The library handles the animation entirely in native code, using Swift on iOS and Kotlin on Android, so the movement runs on the device's native thread rather than through JavaScript, keeping it smooth under load. The library works with any navigation setup. Instead of tying itself to a specific router, it matches elements on the source and destination screens by a shared id you assign in your code. When a screen change happens, the library detects matching ids, takes a snapshot of the element, and flies it in a window-level overlay that sits above everything else, including modals and sheets, until it settles in the new position. It supports a range of use cases beyond a simple image expanding into a detail view. You can use it with native modals, form sheets, tab transitions, virtualized lists, and plain state toggles within a single screen. Two animation styles are available: snapshot mode, which clones the element and crossfades between the original and destination views, and morph mode, which also animates corner radius and background color for a smoother container-style transition. On iOS, the library tracks the left-edge swipe-back gesture and the sheet swipe-down dismiss gesture frame by frame, syncing the flying element's position with the ongoing gesture in real time. Animation timing can be configured as a physical spring or a duration-based curve with easing presets, and motion paths can be linear or arc-shaped. The library requires React Native's New Architecture (Fabric) to be enabled. It does not work with the older Paper architecture. Expo users need a development build rather than Expo Go, since the library contains custom native code on both platforms.