ScrollView hide screen content

Question

I have an app with a basic home screen component that is full screen and I want to do it that the user can scroll down to the next component that I made that is also full screen (like the scroll on TikTok between videos) but when I add ScrollView the screen goes white how can I add scroll to the app?

code app.js:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, ImageBackground, Image, View, ScrollView,  } from 'react-native';
import Riverdale from './components/riverdale';

export default function App() {
  return (

    <ScrollView>

    <View style={styles.container}>
      
      
      <Riverdale 
      backgroundImage={require('./assets/images/riverdale.jpg')}
      titleText="Riverdale"
      subTitleText="The town with pep"
      content="Riverdale is a small town in the fictional town of Midtown Manhattan. The town is known for its eclectic character, which makes it a perfect place to live."
      
      titleTextStyle={{
        fontSize: 42,
        color: '#fff',
        fontWeight: '600',    
      }}
      subTitleTextStyle={{
        fontSize: 12,
        //transform to upper case
        textTransform: 'uppercase',
        color: '#FDEFF4',    
      }}
      contentTextStyle={{
        fontSize: 18,
        color: '#fff',    
      }}

      //titleTextStyle= {styles.titleText}
      //subTitleTextStyle= {styles.subTitleText}
      //contentTextStyle= {styles.contentText}
      />

      <Riverdale 
            backgroundImage={require('./assets/images/riverdale.jpg')}
            titleText="Riverdale"
            subTitleText="The town with pep"
            content="Riverdale is a small town in the fictional town of Midtown Manhattan. The town is known for its eclectic character, which makes it a perfect place to live."
            
            titleTextStyle={{
              fontSize: 42,
              color: '#fff',
              fontWeight: '600',    
            }}
            subTitleTextStyle={{
              fontSize: 12,
              //transform to upper case
              textTransform: 'uppercase',
              color: '#FDEFF4',    
            }}
            contentTextStyle={{
              fontSize: 18,
              color: '#fff',    
            }}      
      />
      
      <StatusBar style="auto" />
    </View>
    </ScrollView>
    
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

code index.js:

import React from "react";
import { StyleSheet, Text, View, ImageBackground, Image, TouchableOpacity } from "react-native";

const Riverdale = (props) => {
    const {backgroundImage, titleText, subTitleText, content} = props;
    const {titleTextStyle, subTitleTextStyle, contentTextStyle} = props;
    return (
        <ImageBackground source={backgroundImage} style={styles.imgBackground}>
            <View style={styles.title}>
        <Text style={titleTextStyle}>{titleText}</Text>
      <View style={styles.subTitle}>
        <Text style={subTitleTextStyle}>{subTitleText}</Text>
      </View>
      </View>
        <View style={styles.content}>
        <Text style={contentTextStyle}>{content}</Text>
        </View>
        </ImageBackground>
    );
}

const styles = StyleSheet.create({
    title: {
        width: '100%',
        position: 'absolute',
        top: '10%',
        alignItems: 'center',
        justifyContent: 'center',
      },
      subTitle: {
    
      },
    imgBackground: {
        width: '100%',
        height: '100%',
        //set the image to cover the entire screen
        resizeMode: 'cover',
    },
    content: {
        width: '100%',
        position: 'absolute',
        top: '20%',
    },
});

export default Riverdale;