How to display data coming from an API horizontally in react native

Question

Pls, help me out. I want to display my data coming from API horizontally by scrollview but I don't know what I am doing wrong. The data is showing horizontally for every card.

<FlatList
  data={latestuploads}
  renderItem={({ item }) => {
    return (
      <ScrollView horizontal={true}>
        <View style={{ flexGrow: 1, flexDirection: "row" }}>
          <Card>
            <CardItem>
              <ImageBackground
                source={{ uri: item.image_url }}
                style={styles.image}
              >
                <Image
                  source={require("../assets/play-icon.png")}
                  style={styles.icon}
                />
              </ImageBackground>
            </CardItem>
            <CardItem cardBody>
              <Text style={styles.title}> {item.title} </Text>
            </CardItem>
            <CardItem cardBody>
              <Text style={styles.speaker}> {item.speaker} </Text>
            </CardItem>
          </Card>
        </View>
      </ScrollView>
    );
  }}
  keyExtractor={item => item.id}
/>

Thanks

SDushan · Accepted Answer · 2020-03-11T17:12:22.840

Don't have to use ScrollView inside FlatList.

Set horizontal as true in FlatList, then it will render items next to each other horizontally instead of vertically.

<FlatList
  data={latestuploads}
  renderItem={({ item }) => {
    return (
      <Card>
        <CardItem>
          <ImageBackground
            source={{ uri: item.image_url }}
            style={styles.image}
          >
            <Image
              source={require("../assets/play-icon.png")}
              style={styles.icon}
            />
          </ImageBackground>
        </CardItem>
        <CardItem cardBody>
          <Text style={styles.title}> {item.title} </Text>
        </CardItem>
        <CardItem cardBody>
          <Text style={styles.speaker}> {item.speaker} </Text>
        </CardItem>
      </Card>
    );
  }}
  keyExtractor={item => item.id}
  // this will do the trick
  horizontal={true}
/>

If you looking for more information check below sample

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

const DATA = [
    {
        id: 1,
        title: 'First Item',
    },
    {
        id: 2,
        title: 'Second Item',
    },
    {
        id: 3,
        title: 'Third Item',
    },
    {
        id: 4,
        title: 'Forth Item',
    },
    {
        id: 5,
        title: 'Fifth Item',
    },
    {
        id: 6,
        title: 'Sixth Item',
    },
];

export default class App extends Component {

    renderItems = ({ item }) => (
        <View style={styles.item}>
            <Text>{item.title}</Text>
        </View>
    )

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 20,
    },
    item: {
        height: 100,
        backgroundColor: 'green',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
    },
});

Hope this helps you. Feel free for doubts.

How to display data coming from an API horizontally in react native

1 Answers1