Skip to main content
The SlideFromBottom preset creates a modal-style screen that slides up from the bottom and can be dismissed by swiping down.

​
Function Signature

SlideFromBottom(
  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: ({
  layouts: {
    screen: { height },
  },
  progress,
}) => {
  "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 bottom (height)
  • progress = 1: Screen is visible at normal position (0)
  • progress = 2: Screen exits to top (-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="Detail"
  options={{
    ...Transition.Presets.SlideFromBottom(),
  }}
/>

​
Common Use Cases

  • Bottom sheets - Partial overlays for quick actions or information
  • Modal dialogs - Full-screen or partial confirmation screens
  • Action sheets - Context menus that slide up from bottom
  • Forms - Input screens that feel like overlays
  • Filters - Settings or filter panels

​
Combining with Features

​
With Backdrop

Add a semi-transparent backdrop that dismisses on tap: 
<Stack.Screen
  name="Filter"
  options={{
    ...Transition.Presets.SlideFromBottom(),
    backdropBehavior: "dismiss",
    screenStyleInterpolator: ({ progress, ...props }) => {
      "worklet";
      const preset = Transition.Presets.SlideFromBottom().screenStyleInterpolator({
        progress,
        ...props,
      });
      return {
        ...preset,
        backdropStyle: {
          backgroundColor: interpolateColor(
            progress,
            [0, 1],
            ["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"]
          ),
        },
      };
    },
  }}
/>

​
With ScrollView

Use transition-aware scroll views for proper gesture coordination: 
import Transition from "react-native-screen-transitions";

function BottomSheet() {
  return (
    <Transition.ScrollView>
      {/* content */}
    </Transition.ScrollView>
  );
}

​
Notes

The gesture direction is vertical, meaning users swipe down to dismiss the screen (same as the exit direction).
For bottom sheets, combine this preset with snapPoints to create multi-stop sheets that can be expanded or collapsed.