CODEWITHSUNDEEP
react-native
Carl Bruiners
Carl Bruiners

Reputation: 546

React-Native horizontal FlatList

I have flat list that is returning a JSON feed with nested objects / arrays. All is working except horizontal listing, it still lists each item vertically. Does anyone know how I can list the returned images horizontally instead of vertically?

{isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={[data]}
        horizontal={true}
        keyExtractor={({ id }, index) => id}
        renderItem= {({ item, index }) => (
          <View>
          {item.items.map((v, i) => (
            <TouchableOpacity onPress={() => props.navigation.navigate('Pdp', {articleid: item.id})}>
                <View style={styles.container}>
                <Image style={styles.imgyoutubeprev} source={{ uri: chkValue(v.snippet.thumbnails.high.url) }} />
                <Image style={styles.imgyoutubebtnoverlay} source={require('../assets/youtubebtn.png')} />
              </View>
            </TouchableOpacity>
          ))}
          </View>
        )}
      />
    )}

Upvotes: 0

Views: 411

Answers (2)

Carl Bruiners
Carl Bruiners

Reputation: 546

Thanks all. The big difference was removing the view surrounding the item.items.map. I haven't had to force flex: 1 against the view, though I have forced flex 1 across the whole screen, so possibly thats helped as well. Thanks again all.

The code I used (taking on your code reduction, and is working as expected is;

return (
    <View>
    {isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={[data]}
        horizontal={true}
        horizontal
        keyExtractor={({ id }, index) => id}
        renderItem= {({ item, index }) => (
          item.items.map((v, i) => (
            <TouchableOpacity onPress={() => props.navigation.navigate('Pdp', {articleid: item.id})}>
                <Image style={styles.imgyoutubeprev} source={{ uri: chkValue(v.snippet.thumbnails.high.url) }} />
                <Image style={styles.imgyoutubebtnoverlay} source={require('../assets/youtubebtn.png')} />
            </TouchableOpacity>
          ))
        )}
      />
    )}
  </View>
  );
};

Upvotes: 1

Yvo
Yvo

Reputation: 19263

We would need to have a bit more information about the styles that you are using. If the items are rendered vertically instead of horizontal then this is likely caused by the element that surrounds the FlatList.

Make sure that the View or other component that contains the FlatList has the flex: 1 style or at least takes up the full width. Otherwise the horizontal elements would still wrap and be rendered vertically.

Bonus tip: You might be able to remove the View child from the TouchableOpacity by moving the styles.container to the TouchableOpacity and then replacing the inner View with a Fragment.

Upvotes: 1

Related Questions