<SafeAreaView style={styles.container}>
  <FlatList
    data={postList}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => (
      <Card
        title={item.title}
        difficulty={item.difficulty}
        image={item.image}
      />
    )}
    ItemSeparatorComponent={<View style={{ height: 16 }} />}
    ListEmptyComponent={<Text>No items found</Text>}
    contentContainerStyle={styles.contentContainerStyle}
  />
</SafeAreaView>


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f5f5f5",
    marginTop: StatusBar.currentHeight,
  },
  card: {
    backgroundColor: "#fff",
    borderRadius: 8,
    overflow: "hidden",
    borderWidth: 1,
    marginBottom: 15,
    shadowColor: "#333",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 8,
    elevation: 3,
  },
  cardImage: {
    width: "100%",
  },
  cardContent: {
    padding: 15,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 5,
  },
  cardDifficulty: {
    fontSize: 14,
    color: "#777",
  }
});

Hello, i just started React Native last weekend, and trying to build my own app for the first time!

So i fetched cocktails data from Rapid Api and rendered them, they are all displayed on screen (about 100 of different objects) but the problem is i am able to scroll down the screen on Iphone 7 but I cannot do that on Iphone 11.. What is the problem here? I could not find any solution related to mine