refactor: optimize ScrollView layout in Player component

thoulee21 · Sep 30, 2024 · ed03260 · ed03260
1 parent 3f851f4
commit ed03260
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/src/pages/player.tsx b/src/pages/player.tsx
@@ -13,7 +13,6 @@ import {
   BottomBar,
   PlayControls,
   Progress,
-  Spacer,
   TrackInfo,
   TrackListSheet,
 } from '../components';
@@ -104,13 +103,13 @@ export function Player() {
         }
       />
 
-      <ScrollView style={styles.screenContainer}>
-        <Spacer />
+      <ScrollView
+        style={styles.screen}
+        contentContainerStyle={styles.screenContainer}
+      >
         <TrackInfo />
         <Progress />
-        <Spacer />
         <PlayControls />
-        <Spacer mode="expand" />
       </ScrollView>
 
       <BottomBar bottomSheetRef={bottomSheetRef} />
@@ -123,10 +122,14 @@ export function Player() {
 }
 
 const styles = StyleSheet.create({
-  screenContainer: {
+  screen: {
     display: 'flex',
     flex: 1,
   },
+  screenContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
   searchbar: {
     margin: 10,
     backgroundColor: 'transparent',