Boundary Components

Transition.Boundary is the compound API for bounds-driven transitions.

• Transition.Boundary
• Transition.Boundary.Target
• Transition.Boundary.Host

Transition.Boundary

Use this for both pressable and passive boundary registration.

When onPress is present, it renders as a pressable boundary. When onPress is omitted, it renders as a passive view boundary.

1// Passive boundary
2<Transition.Boundary id="hero">
3  <Image source={heroImage} style={styles.hero} />
4</Transition.Boundary>
5
6// Pressable boundary
7<Transition.Boundary
8  id="hero"
9  onPress={() => navigation.navigate("Detail")}
10>
11  <Image source={heroImage} style={styles.hero} />
12</Transition.Boundary>

This is the default recommendation for new code.

Transition.Boundary.Target

Use this when the measured element is nested inside the owner.

1<Transition.Boundary id={item.id} onPress={openItem} style={styles.row}>
2  <Transition.Boundary.Target style={styles.artTarget}>
3    <Image source={item.image} style={styles.artwork} />
4  </Transition.Boundary.Target>
5
6  <View style={styles.copy}>
7    <Text>{item.title}</Text>
8  </View>
9</Transition.Boundary>

It does not take its own id. It inherits the surrounding boundary owner and changes which descendant gets measured.

Transition.Boundary.Host

Use this to make handoff or clipping-escape placement explicit inside a scrollable or otherwise constrained coordinate space.

1<Transition.ScrollView>
2  <Transition.Boundary.Host />
3
4  <Transition.Boundary id="card" escapeClipping onPress={openCard}>
5    <Image source={image} style={styles.card} />
6  </Transition.Boundary>
7</Transition.ScrollView>

Most flows do not need an explicit host. Add one when escapeClipping or handoff content should be placed inside a specific local coordinate space.

Boundary Config Props

Boundary components share the same configuration props:

• id
• group
• anchor
• scaleMode
• target
• method
• enabled
• handoff
• escapeClipping

They keep the wrapped component props as well. The root Transition.Boundary accepts onPress for pressable usage.

Related reading: Bounds Transitions.