Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React, { Component } from "react";
import { FlatList, Text } from "react-native";
import { Card } from "react-native-elements";
const data = [
{
imageUrl: "http://via.placeholder.com/160x160",
title: "something"
},
{
imageUrl: "http://via.placeholder.com/160x160",
title: "something two"
},
{
imageUrl: "http://via.placeholder.com/160x160",
title: "something three"
},
{
imageUrl: "http://via.placeholder.com/160x160",
title: "something four"
},
{
imageUrl: "http://via.placeholder.com/160x160",
title: "something five"
},
{
imageUrl: "http://via.placeholder.com/160x160",
title: "something six"
}
];
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
data: data
};
}
render() {
return (
<FlatList
horizontal
data={this.state.data}
renderItem={({ item: rowData }) => {
return (
<Card
title={null}
image={{ uri: rowData.imageUrl }}
containerStyle={{ padding: 0, width: 160 }}
>
<Text style={{ marginBottom: 10 }}>
{rowData.title}
</Text>
</Card>
);
}}
keyExtractor={(item, index) => index}
/>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.