Always Scroll

The default screen in a React Native application should consist of the header element and a scrollable element. Usually a FlatList (or more realistically LegendList) or a ScrollView. This ensures that no matter how long the content, it will not overflow. Don’t worry about if the content is too short: it will work fine and it’s not weird if the text is scrollable even if it fits all on one page.

The background color also doesn’t belong on the ScrollView or FlatList, it belongs on the Stack and is set with contentStyle.

Example:

export function HomeScreen() {
  return (
    <>
      <Stack.Screen
        options={{
          headerTitle: "Home",
          contentStyle: { backgroundColor: "white" },
        }}
      />
      <FlatList data={DATA} renderItem={renderItem} />
    </>
  );
}