From 67886967a2b08d05e50e81c81b51110475780a94 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jsitter@mit.edu>
Date: Tue, 2 Dec 2025 18:21:46 -0500
Subject: [PATCH] feat: improve native sheet scroll header interaction

---
 src/app/Schedule/ArchivedShowView.tsx | 20 ++++----------------
 src/app/Schedule/SchedulePage.tsx     | 26 ++++----------------------
 src/app/Schedule/ShowDetailsPage.tsx  | 20 ++++----------------
 src/app/Schedule/index.tsx            |  8 ++++++++
 4 files changed, 20 insertions(+), 54 deletions(-)

diff --git a/src/app/Schedule/ArchivedShowView.tsx b/src/app/Schedule/ArchivedShowView.tsx
index 62312d7..bbb8842 100644
--- a/src/app/Schedule/ArchivedShowView.tsx
+++ b/src/app/Schedule/ArchivedShowView.tsx
@@ -5,7 +5,6 @@ import {
   TouchableOpacity,
   StyleSheet,
   ScrollView,
-  SafeAreaView,
   StatusBar,
   ActivityIndicator,
   Alert,
@@ -228,8 +227,8 @@ export default function ArchivedShowView() {
         locations={[0, 0.3, 1]}
         style={styles.gradient}
       >
-        <SafeAreaView style={[styles.safeArea, { paddingTop: headerHeight }]}>
-          <ScrollView style={styles.scrollView}>
+        <ScrollView>
+          <View style={[{ paddingTop: headerHeight }]}>
             <ShowImage showName={show.name} archiveDate={archive.date} />
 
             {/* Playback Controls */}
@@ -369,10 +368,8 @@ export default function ArchivedShowView() {
                 </View>
               )}
             </View>
-
-            <View style={styles.bottomPadding} />
-          </ScrollView>
-        </SafeAreaView>
+          </View>
+        </ScrollView>
       </LinearGradient>
     </>
   );
@@ -382,12 +379,6 @@ const styles = StyleSheet.create({
   gradient: {
     flex: 1,
   },
-  safeArea: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-  },
   playSection: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -497,9 +488,6 @@ const styles = StyleSheet.create({
     color: COLORS.TEXT.TERTIARY,
     fontSize: 16,
   },
-  bottomPadding: {
-    height: 100,
-  },
   progressSection: {
     paddingHorizontal: 20,
     paddingVertical: 16,
diff --git a/src/app/Schedule/SchedulePage.tsx b/src/app/Schedule/SchedulePage.tsx
index 1e76969..a09ce73 100644
--- a/src/app/Schedule/SchedulePage.tsx
+++ b/src/app/Schedule/SchedulePage.tsx
@@ -5,7 +5,6 @@ import {
   TouchableOpacity,
   StyleSheet,
   ScrollView,
-  SafeAreaView,
   StatusBar,
   ActivityIndicator,
   TextInputChangeEvent,
@@ -325,14 +324,8 @@ export default function SchedulePage() {
         locations={[0, 0.5, 1]}
         style={styles.gradient}
       >
-        <SafeAreaView style={[styles.safeArea, { paddingTop: headerHeight }]}>
-          <ScrollView
-            ref={scrollViewRef}
-            style={styles.scrollView}
-            refreshControl={
-              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-            }
-          >
+        <ScrollView>
+          <View style={[{ paddingTop: headerHeight }]}>
             {loading ? (
               <View style={styles.loadingContainer}>
                 <ActivityIndicator size="large" color="#FFFFFF" />
@@ -358,10 +351,8 @@ export default function SchedulePage() {
                 {renderShowsByDay()}
               </View>
             )}
-
-            <View style={styles.bottomPadding} />
-          </ScrollView>
-        </SafeAreaView>
+          </View>
+        </ScrollView>
       </LinearGradient>
     </>
   );
@@ -371,12 +362,6 @@ const styles = StyleSheet.create({
   gradient: {
     flex: 1,
   },
-  safeArea: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-  },
   loadingContainer: {
     alignItems: 'center',
     paddingVertical: 40,
@@ -494,9 +479,6 @@ const styles = StyleSheet.create({
   currentShowDescription: {
     color: COLORS.TEXT.SECONDARY,
   },
-  bottomPadding: {
-    height: 100,
-  },
   debugText: {
     color: COLORS.TEXT.PRIMARY,
     fontSize: 14,
diff --git a/src/app/Schedule/ShowDetailsPage.tsx b/src/app/Schedule/ShowDetailsPage.tsx
index 7676bc7..586d409 100644
--- a/src/app/Schedule/ShowDetailsPage.tsx
+++ b/src/app/Schedule/ShowDetailsPage.tsx
@@ -19,7 +19,6 @@ import {
   StyleSheet,
   Dimensions,
   ScrollView,
-  SafeAreaView,
   StatusBar,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
@@ -296,8 +295,8 @@ export default function ShowDetailsPage() {
         locations={[0, 0.3, 1]}
         style={styles.gradient}
       >
-        <SafeAreaView style={[styles.safeArea, { paddingTop: headerHeight }]}>
-          <ScrollView style={styles.scrollView}>
+        <ScrollView>
+          <View style={[{ paddingTop: headerHeight }]}>
             <ShowImage showName={show.name} />
 
             {/* Show Info */}
@@ -448,10 +447,8 @@ export default function ShowDetailsPage() {
                 </View>
               )}
             </View>
-
-            <View style={styles.bottomPadding} />
-          </ScrollView>
-        </SafeAreaView>
+          </View>
+        </ScrollView>
       </LinearGradient>
     </>
   );
@@ -461,12 +458,6 @@ const styles = StyleSheet.create({
   gradient: {
     flex: 1,
   },
-  safeArea: {
-    flex: 1,
-  },
-  scrollView: {
-    flex: 1,
-  },
   infoSection: {
     paddingHorizontal: 20,
     paddingBottom: 30,
@@ -606,7 +597,4 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontStyle: 'italic',
   },
-  bottomPadding: {
-    height: 100,
-  },
 });
diff --git a/src/app/Schedule/index.tsx b/src/app/Schedule/index.tsx
index 1ebf769..39f36e8 100644
--- a/src/app/Schedule/index.tsx
+++ b/src/app/Schedule/index.tsx
@@ -5,6 +5,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import ArchivedShowView from './ArchivedShowView';
 import ShowDetailsPage from './ShowDetailsPage';
 import SchedulePage from './SchedulePage';
+import { Platform } from 'react-native';
 import { COLORS } from '@utils/Colors';
 
 const Stack = createNativeStackNavigator();
@@ -38,6 +39,13 @@ export const ScheduleStack = () => {
         screenOptions={{
           headerShown: true,
           headerTransparent: true,
+          // Android doesn't do header blur effects, so it needs a solid
+          // background color
+          ...(Platform.OS === 'android' && {
+            headerStyle: {
+              backgroundColor: COLORS.BACKGROUND.PRIMARY,
+            },
+          }),
           title: 'Schedule',
           headerTintColor: '#ffffff',
         }}