React Native Expo - Unable to scroll downwards for more content

Question

I am trying to create a mock mobile version of Udemy. The following code is the home page which should display all the various courses recommended to the users. While I get the horizontal scroll to work, I am unable to scroll downwards for more content despite knowing that there is content underneath. Currently I am only able to view up till the 2nd FlatList and unable to scroll downwards for more information.

What I have tried:

1. Wrapping ScrollView within View
2. Wrapping View within ScrollView
3. Adding {flex:1} for both ScrollView and View
4. Adding {flexGrow:1} for ScrollView
5. Adding {padding:10} for ScrollView
6. Adding contentContainerStyle={{ flex: 1}} for ScrollView

I am also using bottom navigator from React Navigation V5 if this information is helpful.

HomeScreen.js

import React from 'react';
import { ScrollView, Text, StyleSheet, View, FlatList } from 'react-native';
import { mapping } from '../../mapping';
import Course from '../components/Course';

const HomeScreen = (props) => {
  return (
    <ScrollView>
      <Text style={styles.mainText}>What to learn next</Text>
      <Text style={styles.bodyText}>Recommended for you</Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>Featured</Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>
        Because you viewed 'Introduction to Programming'
      </Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>
        Because you viewed 'Python Programming'
      </Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  background: {
    flex: 1,
  },
  mainText: {
    fontSize: 30,
    fontWeight: 'bold',
    padding: 15,
  },
  bodyText: {
    fontSize: 20,
    fontWeight: 'bold',
    paddingLeft: 15,
  },
  listStyle: {
    marginHorizontal: 15,
    paddingBottom: 30,
  },
});

export default HomeScreen;

dependencies (PS. ignore some dependencies as I just went from React Navigation from V4 to V5)

    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.11.3",
    "@react-navigation/native": "^5.9.0",
    "expo": "~40.0.0",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-gesture-handler": "^1.8.0",
    "react-native-reanimated": "^1.13.2",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "^2.15.0",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.3",
    "react-navigation-bottom-tabs-no-warnings": "^5.11.3",
    "react-navigation-stack": "^2.10.2"

Answer 1

ScrollView is a component which doesn't inherit the use of flex. In case your homeScreen component contains ScrollView only i'd recommend you to wrap your ScrollView with a View and define a height to it. Otherwise i'd set flex:1 for the View and flex:x/y based on your desired ratio.

import React from 'react';
import { ScrollView, Text, StyleSheet, View, FlatList } from 'react-native';
import { mapping } from '../../mapping';
import Course from '../components/Course';

const HomeScreen = (props) => {
  return (
    <View style={styles.containerStyle}>
    <ScrollView>
      <Text style={styles.mainText}>What to learn next</Text>
      <Text style={styles.bodyText}>Recommended for you</Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>Featured</Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>
        Because you viewed 'Introduction to Programming'
      </Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />

      <Text style={styles.bodyText}>
        Because you viewed 'Python Programming'
      </Text>
      <FlatList
        horizontal
        data={mapping}
        style={styles.listStyle}
        renderItem={(item) => {
          return <Course item={item.item} />;
        }}
      />
    </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  containerStyle: {
    height:300,
  },
  mainText: {
    fontSize: 30,
    fontWeight: 'bold',
    padding: 15,
  },
  bodyText: {
    fontSize: 20,
    fontWeight: 'bold',
    paddingLeft: 15,
  },
  listStyle: {
    marginHorizontal: 15,
    paddingBottom: 30,
  },
});

export default HomeScreen;