In this lesson, you will learn how to fine-tune the "feel" of your app’s scrolling by controlling how content glides to a stop after the user lifts their finger.
The Physics of Momentum
When you scroll through a FlatList or ScrollView and let go, the content doesn't stop instantly; it glides based on velocity. This is called momentum. Sometimes, the default system physics feel too sluggish or too abrupt for your specific design. React Native provides props to help you tighten or loosen this behavior, making your app feel more premium and responsive.
Controlling the Glide
The primary prop for this is decelerationRate. This determines how quickly the scroll decelerates after the user lifts their finger.
'fast': Matches the native "quick" stop feel (default on iOS is 0.998).'normal': Provides a more gradual, natural slide (default on Android is 0.985).
If you want complete control, you can pass a specific number instead of a string. A lower number (like 0.5) will make the scroll stop almost immediately, while a higher number (like 0.999) will make it slide for a long time before coming to a halt.
<FlatList
data={data}
renderItem={renderItem}
// Make the scroll feel heavy and stop quickly
decelerationRate={0.6}
/>
Snap-to-Alignment
To create a "snappy" feeling—where the list always lands perfectly on an item rather than stopping in the middle of a scroll—you can use snapToInterval. If you know your list items are a fixed height, you can set this to match that height.
<FlatList
data={data}
renderItem={renderItem}
// The list will now snap to increments of 200 pixels
snapToInterval={200}
snapToAlignment="start"
decelerationRate="fast"
/>
By combining decelerationRate with snapping props, you ensure that the user’s gesture leads to a predictable, professional result every time they interact with your content.
Key Takeaway: Use decelerationRate to adjust the friction of your lists, and combine it with snapToInterval to create a polished, magnetic scrolling experience.