update

src/components/BorderGradient/BorderGradient.js

@@ -2,19 +2,31 @@ import { StyleSheet, View } from "react-native";
 
 import { GradientBorderView } from "../GradientBorderView";
 
-const BorderGradient = ({ children, gradientProps, ...props }) => {
+const BorderGradient = ({
+  children,
+  contentContainerStyle,
+  gradientProps,
+  ...props
+}) => {
   return (
     <GradientBorderView
       gradientProps={{
         start: { x: 0, y: 0 },
         end: { x: 1, y: 0 },
-        ...gradientProps
+        ...gradientProps,
       }}
-      {...props}>
-
-      <View style={styles.innerContainer}>{children}</View>
-    </GradientBorderView>);
-
+      {...props}
+    >
+      <View
+        style={{
+          ...styles.innerContainer,
+          ...contentContainerStyle,
+        }}
+      >
+        {children}
+      </View>
+    </GradientBorderView>
+  );
 };
 
 export default BorderGradient;
@@ -22,5 +34,5 @@ export default BorderGradient;
 const styles = StyleSheet.create({
   innerContainer: {
     flex: 1,
-  }
-});
+  },
+});

src/components/MusicLandHeader.js

@@ -5,7 +5,12 @@ import { Palette, Style } from "../styles";
 import ProgressBar from "./ProgressBar";
 import { FONT_FAMILY } from "../styles/Fonts";
 
-const MusicLandHeader = ({ onPressBack, onPressSkip, showSkip = false }) => {
+const MusicLandHeader = ({
+  onPressBack,
+  onPressSkip,
+  showSkip = false,
+  progress = 1,
+}) => {
   return (
     <View style={{ alignItems: "center", gap: 16 }}>
       <Image source={icons.musicLandLogo} />
@@ -21,7 +26,7 @@ const MusicLandHeader = ({ onPressBack, onPressSkip, showSkip = false }) => {
           />
         </Pressable>
         <View style={{ flex: 1 }}>
-          <ProgressBar progress={10} />
+          <ProgressBar progress={progress} />
         </View>
         {showSkip && (
           <Pressable onPress={onPressSkip}>