Transition Components

Transition-Aware Primitives

The default Transition export wraps common React Native primitives so they can receive slot-driven styles. Scrollable primitives also coordinate navigation gestures and publish scroll metadata.

Transition.View

Use this for non-pressable elements that need transition-aware styling.

1<Transition.View styleId="hero-title">
2  <Text>Title</Text>
3</Transition.View>

Transition.Pressable

Use this when the element is interactive.

1<Transition.Pressable styleId="cta" onPress={open}>
2  <Text>Open</Text>
3</Transition.Pressable>

Transition.ScrollView

This participates in the scroll registry, hands off gestures, and publishes scroll metadata to current.layouts.scroll.

1<Transition.ScrollView showsVerticalScrollIndicator={false}>
2  <Content />
3</Transition.ScrollView>

Transition.FlatList

This gives list content the same gesture-aware scroll behavior.

1<Transition.FlatList
2  data={items}
3  renderItem={renderItem}
4  keyExtractor={(item) => item.id}
5/>

Use transition-aware scrollables inside sheets and other gesture-driven screens whenever possible.

Common Primitive Props

• Each primitive keeps the props of its React Native component.
• styleId identifies the element targeted by a matching key from screenStyleInterpolator.

1screenStyleInterpolator: ({ progress }) => {
2  "worklet";
3
4  return {
5    "hero-title": {
6      style: { opacity: progress },
7    },
8  };
9};

Related reading: Boundary Components, Custom Animations, and Layers.