From 58e48fd31bbc57985b7533ebd927855c19c750e6 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 5 Jul 2024 18:01:13 +0100
Subject: [PATCH] Feed interstitial snapping (#4737)

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
---
 src/components/FeedInterstitials.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/FeedInterstitials.tsx b/src/components/FeedInterstitials.tsx
index 043a27c2..501eac57 100644
--- a/src/components/FeedInterstitials.tsx
+++ b/src/components/FeedInterstitials.tsx
@@ -27,6 +27,8 @@ import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
 import {ProgressGuideList} from './ProgressGuide/List'
 
+const MOBILE_CARD_WIDTH = 300
+
 function CardOuter({
   children,
   style,
@@ -43,7 +45,7 @@ function CardOuter({
         t.atoms.bg,
         t.atoms.border_contrast_low,
         !gtMobile && {
-          width: 300,
+          width: MOBILE_CARD_WIDTH,
         },
         style,
       ]}>
@@ -266,7 +268,11 @@ export function SuggestedFollows() {
           </View>
         </View>
       ) : (
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
+          decelerationRate="fast">
           <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
             {content}
 
@@ -392,7 +398,11 @@ export function SuggestedFeeds() {
           </View>
         </View>
       ) : (
-        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
+          decelerationRate="fast">
           <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
             {content}