Im trying to create a horizontal flatlist. The code below does work in this online editor but not on my emulator. I couldn't figure out if the problem is due to my code or the emulator. I tried remove horizontal property but still it doesn't work vertically. I replaced SafeAreaView with ScrollView but I took same result. Control the styles and removed all styles and tested without styles but again I couldn't scroll it.

export const Stories = () => {
  const stories = [
    {
      id: 1,
      name: "Name1",
      image: "https://xsgames.co/randomusers/avatar.php?g=male",
    },
    {
      id: 2,
      name: "Name2",
      image: "https://xsgames.co/randomusers/avatar.php?g=female",
    },
    {
      id: 3,
      name: "Name3",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 4,
      name: "Name4",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 5,
      name: "Name5",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 6,
      name: "Name6",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 7,
      name: "Name7",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 8,
      name: "Name8",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
    {
      id: 9,
      name: "Name9",
      image: "https://xsgames.co/randomusers/avatar.php?g=pixel ",
    },
  ];

  const singleStory = ({ item }) => {
    return (
      <View style={styles.story}>
        <View style={styles.avatarContainer}>
          <Image source={{ uri: item.image }} style={styles.avatar} />
        </View>
        <Text>{item.name}</Text>
      </View>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        horizontal
        data={stories}
        renderItem={singleStory}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    borderColor: "grey",
    borderBottomWidth: 0.9,
    borderTopWidth: 0.9,
  },
  story: {
    padding: 10,
    alignItems: "center",
  },
  avatarContainer: {
    height: 60,
    width: 63,
    justifyContent: "center",
    alignItems: "center",
  },
  avatar: {
    borderRadius: 50,
    height: 50,
    width: 50,
  },
});

CodePudding user response：

Add flex:1 in container, as you need to fix dimension of the view

container: {
    borderColor: "grey",
    borderBottomWidth: 0.9,
    borderTopWidth: 0.9,
   flex:1
  },

CodePudding user response：

I created a new emulator and It works.