Implementation of Flatlist/SectionList of Custom Card view's - ios

Question

I am trying to implement a list of custom card view's(Like the CollectionView in ios with custom collectionview cell). How can I achieve this any idea's or tutorials plz. I do not want to use third party. Could someone help me out.

Answer 1

You can have a Collection View like a solution with React Native FlatList. To make a grid view you have to use numColumns prop. The following code segment will support you.
class MyListItem extends React.PureComponent {
render() {
return (
<View style={styles.item}>
<Text>
{this.props.title}
</Text>
</View>
);
}
}
export default class App extends React.Component {
data = [
{
"id":1,
"label":"Label 01"
},
{
"id":2,
"label":"Label 02"
},
{
"id":3,
"label":"Label 03"
},
{
"id":4,
"label":"Label 04"
},
{
"id":5,
"label":"Label 05"
},
{
"id":6,
"label":"Label 06"
},
{
"id":7,
"label":"Label 07"
},
{
"id":8,
"label":"Label 08"
},
{
"id":9,
"label":"Label 09"
}
]
_keyExtractor = (item, index) => item.id;
renderItem = ({item}) => (
<MyListItem
id={item.id}
title={item.label}
/>
);
render() {
return (
<View style={styles.container}>
<FlatList
data={this.data}
renderItem={this.renderItem}
keyExtractor={this._keyExtractor}
numColumns={3}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
item: {
backgroundColor: '#add8e6',
alignItems: 'center',
justifyContent: 'center',
flex:1,
margin: 5,
height: 100
}
});

Answer 2

Depends on what you are trying to do. In minimum, a FlatList expects the following props;
data: An array of data. (Each data point is one row in your list)
renderItem: How to transform a data point into a row. (Think of your render function, but for just a row.)
keyExtractor: How to create keys(think of them as ids) for these rows to keep track of them.
In the end you would need to do the following (keep in mind data structure, keyExtractor and what is being rendered is completely arbitrary);
<FlatList
data={[{ id: 1, text: 'Hello' }, { id: 2, text: 'StackOverflow!' }]}
keyExtractor={item => `texts#${item.id}`}
renderItem={({ item }) => (<Text>{item.text}</Text>)}
/>
More extensive data about this can be found at official React Native documentation.