Why does my FlatList not scroll in React Native?

Question

I have seen a lot of answers for FlatList not scrolling for React Native, but none of the answers seem to work.

The answer usually says to add flex: 1 to the parent, but here is an example that has that and it still doesn't scroll.

You can test here, but make sure you select iOS or Android. It does scroll for web.

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const DATA = [
  {
    id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
    title: "First Item",
  },
  {
    id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
    title: "Second Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d72",
    title: "Third Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d73",
    title: "Fourth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d74",
    title: "Fifth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d75",
    title: "Sixth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d76",
    title: "Seventh Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d77",
    title: "Eighth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d77",
    title: "Ninth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d77",
    title: "Tenth Item",
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App;

Answer 1

Modify the SafeAreaView to be within it's own container and added a View container with flexGrow: 1 instead of flex: 1:

const App = () => {
  return (
    <SafeAreaView style={styles.safe}>
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => (<Item title={item.title} />) }
        keyExtractor={item => item.id}
      />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    marginTop: StatusBar.currentHeight || 0,
  },
  container: {
    flexGrow: 1
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

Above worked in a snack Expo testing for iOS. Entire sample code with a little re-write:

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';

const data = [
  {
    id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",
    title: "First Item",
  },
  {
    id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",
    title: "Second Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d72",
    title: "Third Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d73",
    title: "Fourth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d74",
    title: "Fifth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d75",
    title: "Sixth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d76",
    title: "Seventh Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d77",
    title: "Eighth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d77",
    title: "Ninth Item",
  },
  {
    id: "58694a0f-3da1-471f-bd96-145571e29d77",
    title: "Tenth Item",
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  return (
    <SafeAreaView style={styles.safe}>
    <View style={styles.container}>
      <FlatList
        data={data}
        renderItem={({ item }) => (<Item title={item.title} />) }
        keyExtractor={item => item.id}
      />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    marginTop: StatusBar.currentHeight || 0,
  },
  container: {
    flexGrow: 1
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

export default App