Skip to main content
Programmatically snap the currently focused screen to a specific snap point. Use this function to control snap points from anywhere in your app.

​
Function Signature

function snapTo(index: number): void

​
Parameters

​
index
number
required
The index of the snap point to snap to (0-based, sorted ascending)
  • Must be within the range 0 to snapPoints.length - 1
  • Snap points are automatically sorted in ascending order
  • Index 0 always refers to the smallest snap point
  • Index snapPoints.length - 1 refers to the largest snap point

​
Return Value

​
void
void
This function does not return a value. It triggers an animation to snap the screen to the specified snap point.

​
Usage

​
Basic Example

import { snapTo } from 'react-native-screen-transitions';
import { Button, View } from 'react-native';

function BottomSheet() {
  // Expand to full height (index 1)
  const expand = () => snapTo(1);

  // Collapse to half height (index 0)
  const collapse = () => snapTo(0);

  return (
    <View>
      <Button title="Expand" onPress={expand} />
      <Button title="Collapse" onPress={collapse} />
    </View>
  );
}

​
Multi-Stop Sheet

import { snapTo } from 'react-native-screen-transitions';
import { Button, View } from 'react-native';

function MultiStopSheet() {
  // Assume snapPoints: [0.3, 0.6, 1]
  
  const snapToSmall = () => snapTo(0);   // 30% height
  const snapToMedium = () => snapTo(1);  // 60% height
  const snapToFull = () => snapTo(2);    // 100% height

  return (
    <View>
      <Button title="Small" onPress={snapToSmall} />
      <Button title="Medium" onPress={snapToMedium} />
      <Button title="Full" onPress={snapToFull} />
    </View>
  );
}

​
Screen Configuration

For snapTo() to work, the target screen must be configured with snap points: 
<Stack.Screen
  name="Sheet"
  options={{
    gestureEnabled: true,
    gestureDirection: "vertical",
    snapPoints: [0.5, 1],  // Required for snapTo to work
    initialSnapIndex: 0,
  }}
/>
The snapTo() function only works on screens that have snapPoints configured in their options.

​
Behavior

  • Sorting: Snap points are automatically sorted in ascending order internally. You always reference them by their sorted index.
  • Animation: The transition uses the expand or collapse animation spec defined in transitionSpec
  • Current Screen: Only affects the currently focused screen with snap points
  • Invalid Index: Logs a warning if the index is out of bounds
  • No Snap Points: Logs a warning if the target screen has no snap points configured

​
Animation Customization

Customize snap animations using transitionSpec: 
options={{
  snapPoints: [0.5, 1],
  transitionSpec: {
    expand: { stiffness: 300, damping: 30 },    // Used when snapping up
    collapse: { stiffness: 300, damping: 30 },  // Used when snapping down
  },
}}

​
Use Cases

Bottom Sheets

Control sheet expansion from buttons or gestures

Side Panels

Snap drawers to different widths

Top Sheets

Expand notifications or controls from the top

Multi-State Modals

Create modals with multiple expansion states
The function operates on the currently focused screen only. If you need to snap a specific screen that isn’t focused, you’ll need to navigate to it first.