FlatList in React Native isn't scrolling, but it's showing the items

Question

I would like to get a horizontal Flatlist working, this is the code I have:

export default class Avatar extends Component {
  _renderItem = ({ item }) => {
    return (
      <View style={{ alignItems: 'center', paddingRight: 8 }}>
        <Svg width="72" height="72">
          <Defs>
            <LinearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
              <Stop offset="0%" stopColor={colors.gradient.primary} />
              <Stop offset="100%" stopColor={colors.gradient.secondary} />
            </LinearGradient>
          </Defs>
          <Circle
            cx="36"
            cy="36"
            r="34"
            strokeWidth="3"
            fill="none"
            stroke="url(#grad)"
          />
        </Svg>
        <Image
          source={{ uri: item.url }}
          style={{ width: 60, height: 60, borderRadius: 30, marginTop: -66 }}
        />
        <Text style={styles.timeStyle}>{item.time}</Text>
        <Text style={styles.NameStyle}>{item.name}</Text>
      </View>
    );
  };

  _keyExtractor = (item, index) => item.id;

  render() {
    return (
      <View style={{ paddingLeft: 10, flex: 1 }}>
        <Text style={styles.TitleStyle}>Avatar</Text>
        <FlatList
          style={{ flex: 1 }}
          horizontal={true}
          data={items}
          keyExtractor={this._keyExtractor}
          renderItem={itemData => this._renderItem(itemData)}
        />
      </View>
    );
  }
}

this is my array:

items = [
  {
    id: 1,
    name: 'Gandalf',
    time: '1 min ago',
    url: 'https://vignette.wikia.nocookie.net/lotr/images/e/e7/Gandalf_the_Grey.jpg/revision/latest?cb=20121110131754',
  },
]

replacing the flatlist with a scrollView isn't working either, also cutting the svgs and image out makes no difference, can someone help, please ?

Answer 1

You need to use ScrollView with horizontal={true}. Here's some code that would do that for you:

<ScrollView horizontal={true}>
        <FlatList
          style={{ flex: 1 }}
          horizontal={true}
          data={items}
          keyExtractor={this._keyExtractor}
          renderItem={itemData => this._renderItem(itemData)}
        />
        </ScrollView>

it works like that. hope it helps you