foontofoonto

Component

Shared Transition

Morph an element smoothly from one screen to the next.

Native only. Shared element transitions need a native stack navigator, a Reanimated feature flag, and a real native build. They do not work in Expo Go or on web.

Preview

How to useAI prompt

Enable the feature flag

Turn on the Reanimated static feature flag in package.json, then rebuild the native app.

package.json
// package.json — enable the Reanimated static feature flag.
{
  "reanimated": {
    "staticFeatureFlags": {
      "ENABLE_SHARED_ELEMENT_TRANSITIONS": true
    }
  }
}

How to use

Wrap matching elements with the same id and transition on both screens.

screens.tsx
import { SharedElement, sharedTransitions } from "react-native-foonto";
import { Image, Pressable } from "react-native";

// Screen A — the list
function ListItem({ item, onPress }) {
  return (
    <Pressable onPress={onPress}>
      <SharedElement id={`photo-${item.id}`} transition={sharedTransitions.gentle}>
        <Image source={{ uri: item.url }} style={{ width: 96, height: 96, borderRadius: 16 }} />
      </SharedElement>
    </Pressable>
  );
}

// Screen B — the detail. SAME id, SAME transition.
function Detail({ item }) {
  return (
    <SharedElement id={`photo-${item.id}`} transition={sharedTransitions.gentle}>
      <Image source={{ uri: item.url }} style={{ width: "100%", height: 320 }} />
    </SharedElement>
  );
}

Props

SharedElement

PropTypeDefaultDescription
idreqstring—Stable id matched across screens. Must be identical on both screens.
transitionSharedTransition—Optional custom transition (e.g. a sharedTransitions preset). Set the same one on both screens.
childrenReactNode—The element to morph.
styleFoontoStyle—Style for the wrapper.

sharedTransitions presets

  • sharedTransitions.gentle — Smooth ease-in-out, medium length (450ms).
  • sharedTransitions.snappy — Quick and snappy (220ms).
  • sharedTransitions.lazy — Slow, cinematic ease-out (750ms).
  • sharedTransitions.bouncy — Springy, with a little overshoot.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt
Add a shared element transition between two screens in my React Native app using the `react-native-foonto` library.

1. Make sure `react-native-foonto` and `react-native-reanimated` (v4+) are installed.
2. In package.json, set the Reanimated static feature flag `ENABLE_SHARED_ELEMENT_TRANSITIONS` to true, then rebuild the native app (this does NOT work in Expo Go or on web).
3. Make sure navigation uses a NATIVE stack navigator (e.g. `@react-navigation/native-stack`).
4. Import `SharedElement` and `sharedTransitions` from `react-native-foonto`.
5. On the source screen, wrap the element (e.g. an Image) in `<SharedElement id="photo-{id}" transition={sharedTransitions.gentle}>`.
6. On the destination screen, wrap the matching element with the EXACT same `id` and the EXACT same `transition` preset.
7. Navigate between the two screens — the element should morph between positions/sizes automatically.
8. Verify on a real native build (iOS/Android), not Expo Go or web.