I am trying to make a Netflix clone with react native and I put the home screen in a scrollview but when I add more content under the banner image and try to scroll down, it just snaps back up and won't stay there. I tried adding padding on the bottom but it still won't work.

import React from "react";
import {
  StyleSheet,
  View,
  ScrollView,
  ImageBackground,
} from "react-native";
import ContinueWatching from "../components/ContinueWatching";
import Header from "../components/Header";
import NavBar from "../components/NavBar";
import PlayBar from "../components/PlayBar";

const Home = () => {
  return (
    <View style={styles.container}>
      <ScrollView>
        <Header />
        <NavBar />
        <ImageBackground
          style={styles.bannerImage}
          source={{
            uri: "https://i2.wp.com/technosports.co.in/wp- 
            content/uploads/2021/10/squid-scaled.jpg?fit=1920%2C2560&ssl=1",
          }}
         />
        <View style={styles.blendBottom}></View>
        <View style={[styles.blendBottom, { top: 480, opacity: 0.65 }]}></View>
        <PlayBar />
        <ContinueWatching />
      </ScrollView>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    backgroundColor: "black",
    flex: 1,
  },
  bannerImage: {
    flex: 1,
    height: 500,
    width: 410,
    resizeMode: "contain",
    right: 10,
  },
  blendBottom: {
    height: 60,
    width: "100%",
    backgroundColor: "black",
    position: "absolute",
    top: 460,
    opacity: 0.25,
  },
});