Skip to main content

​
Transition.View

A basic animated view that integrates with the screen transition system. 
import Transition from "react-native-screen-transitions";
import { Text } from "react-native";

<Transition.View
  styleId="header"
  style={{ flex: 1, backgroundColor: "#fff" }}
>
  <Text>Content</Text>
</Transition.View>
PropTypeDescription
styleIdstringTarget this element in interpolators
sharedBoundTagstringMark as bounds animation target
styleViewStyleStandard React Native styles
childrenReactNodeChild elements
The styleId prop lets you target this view in screen interpolators: 
screenStyleInterpolator: ({ progress }) => {
  "worklet";
  return {
    "header": {
      opacity: interpolate(progress, [0, 1, 2], [0, 1, 0]),
    },
  };
};

​
Transition.Pressable

A pressable view that measures bounds for shared element animations. 
import Transition from "react-native-screen-transitions";
import { Image } from "react-native";

<Transition.Pressable
  sharedBoundTag="avatar"
  onPress={() => navigation.navigate("Profile")}
  style={{ width: 60, height: 60 }}
>
  <Image
    source={{ uri: "..." }}
    style={{ width: 60, height: 60, borderRadius: 30 }}
  />
</Transition.Pressable>
PropTypeDescription
sharedBoundTagstringUnique ID for bounds measurements
onPressfunctionCallback when pressed
styleViewStyleStandard styles
childrenReactNodeChild elements
Use on the source screen in shared element transitions. Pairs with Transition.View on the destination.

​
Transition.ScrollView

A scroll view that coordinates gestures with the screen transition system. 
import Transition from "react-native-screen-transitions";
import { View, Text } from "react-native";

<Transition.ScrollView
  style={{ flex: 1 }}
  bounces={false}
>
  <View>
    <Text>Scrollable content</Text>
  </View>
</Transition.ScrollView>
PropTypeDescription
styleViewStyleContainer style
bouncesbooleaniOS bounce effect
scrollEventThrottlenumberThrottle scroll events
onScrollfunctionScroll listener
childrenReactNodeScrollable content
Gesture Coordination:
  • vertical — Gesture activates when scroll is at top
  • vertical-inverted — Gesture activates when scroll is at bottom
  • horizontal — Gesture activates at left/right edges
Perfect for bottom sheets and modals with scrollable content.

​
Transition.FlatList

A FlatList that coordinates gestures like ScrollView. 
import Transition from "react-native-screen-transitions";

<Transition.FlatList
  data={items}
  renderItem={({ item }) => <ItemComponent item={item} />}
  keyExtractor={(item) => item.id}
  bounces={false}
/>
PropTypeDescription
dataarrayItems to render
renderItemfunctionItem renderer
keyExtractorfunctionKey for each item
bouncesbooleanBounce effect
scrollEventThrottlenumberScroll throttle
childrenReactNodeOptional header/footer
Same gesture coordination as Transition.ScrollView. Best for lists in bottom sheets.

​
Transition.MaskedView

A view that applies a mask for reveal animations. Required for masked element presets. 
import Transition from "react-native-screen-transitions";
import { Image } from "react-native";

<Transition.MaskedView
  maskElement={
    <View style={{ backgroundColor: "#000" }}>
      <Image source={{ uri: "..." }} style={{ width: 200, height: 200 }} />
    </View>
  }
>
  <View style={{ backgroundColor: "#007AFF", flex: 1 }} />
</Transition.MaskedView>
PropTypeDescription
maskElementReactNodeThe mask shape (non-transparent areas are visible)
childrenReactNodeContent to reveal through mask
styleViewStyleContainer style
Important: Requires native @react-native-masked-view/masked-view module. See Masked View Setup. The maskElement should be a view with opaque shapes — those areas will be visible on the children.

​
createTransitionAwareComponent

Wrap any React Native component to make it transition-aware: 
import Transition from "react-native-screen-transitions";
import { MyCustomComponent } from "./MyCustomComponent";

const TransitionAwareCustom = Transition.createTransitionAwareComponent(
  MyCustomComponent,
  {
    isScrollable: false,  // If the component scrolls
    alreadyAnimated: false,  // If it already uses Reanimated
  }
);

// Use like any other component
<TransitionAwareCustom style={{ flex: 1 }} />
OptionTypeDescription
isScrollablebooleanComponent has scrolling behavior
alreadyAnimatedbooleanComponent uses Reanimated internally
This is useful for:
  • Custom scroll containers
  • Third-party animated components
  • Complex component hierarchies

​
Component Reference Table

ComponentUse CaseGesture SupportBounds Support
Transition.ViewGeneric animated viewNoVia sharedBoundTag
Transition.PressableInteractive sourceNoYes (measures bounds)
Transition.ScrollViewScrollable contentYesNo
Transition.FlatListScrollable listsYesNo
Transition.MaskedViewMasked revealsNoNo

​
Usage Patterns

​
Pattern 1: Animated Modal

<Transition.ScrollView style={{ flex: 1, backgroundColor: "#fff" }}>
  <View style={{ padding: 20 }}>
    <Text>Modal content</Text>
  </View>
</Transition.ScrollView>

​
Pattern 2: Shared Element

// Source
<Transition.Pressable sharedBoundTag="photo" onPress={onPress}>
  <Image ... />
</Transition.Pressable>

// Destination
<Transition.View sharedBoundTag="photo">
  <Image ... />
</Transition.View>

​
Pattern 3: Multi-Element Animation

<View>
  <Transition.View styleId="header" style={headerStyle}>
    <Text>Title</Text>
  </Transition.View>
  <Transition.View styleId="content" style={contentStyle}>
    <Text>Content</Text>
  </Transition.View>
</View>

​
Next Steps