Skip to main content
The SlideFromTop preset creates a screen that slides in from the top edge and can be dismissed by swiping up.

​
Function Signature

SlideFromTop(
  config?: Partial<ScreenTransitionConfig>
): ScreenTransitionConfig

​
Parameters

​
config
Partial<ScreenTransitionConfig>
default:"{}"
Optional configuration to override preset defaults

​
Returns

​
ScreenTransitionConfig
object
Configuration object with gesture settings and animation interpolator

​
Implementation Details

​
Screen Style Interpolator

The preset uses vertical translation to slide the screen: 
screenStyleInterpolator: ({
  progress,
  layouts: {
    screen: { height },
  },
}) => {
  "worklet";

  const y = interpolate(progress, [0, 1, 2], [-height, 0, height]);

  return {
    contentStyle: {
      transform: [{ translateY: y }],
    },
  };
}
Animation behavior:
  • progress = 0: Screen is off-screen at top (-height)
  • progress = 1: Screen is visible at normal position (0)
  • progress = 2: Screen exits to bottom (height)

​
Transition Spec

transitionSpec: {
  open: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restSpeedThreshold: 0.02,
  },
  close: {
    stiffness: 1000,
    damping: 500,
    mass: 3,
    overshootClamping: true,
    restSpeedThreshold: 0.02,
  },
}

​
Usage Examples

import Transition from "react-native-screen-transitions";

<Stack.Screen
  name="Notification"
  options={{
    ...Transition.Presets.SlideFromTop(),
  }}
/>

​
Common Use Cases

  • Notification banners - Quick, dismissible alerts from the top
  • Dropdown menus - Contextual menus that slide down
  • System alerts - Important messages that appear from top
  • Top sheets - Alternative to bottom sheets for top-anchored content

​
Notes

The gesture direction is vertical-inverted, meaning users swipe up to dismiss the screen (opposite of the entry direction).
For non-dismissible notifications, set gestureEnabled: false to prevent accidental dismissals.