I am trying to make a flatlist that renders data from different api like instagram does with suggestions and ads. i want to render a horizontal flatList in vertical flatlist after few items in the vertical list have been rendered.
I am trying to make a flatlist that renders data from different api like instagram does with suggestions and ads. i want to render a horizontal flatList in vertical flatlist after few items in the vertical list have been rendered.
It is possible to do this. It is about handling it in the outer FlatList's renderItem function.
A FlatList takes two functions, a renderItem and a keyExtractor. The keyExtractor is only necessary if your items don't have a key, and it is completely re-useable. So you will need a renderItem for every different FlatList that you plan on rendering.
So the outer FlatList uses the renderMainItem function, the inner FlatList uses the renderHorizontalItem
Notice how I have set up my data. Each object has a type that allows me to switch between what should be rendered in the renderMainItem function either returning a row or returning another FlatList.
Here is a snack showing it working https://snack.expo.io/S1sPDPAM4
import React from 'react';
import { Text, View, StyleSheet, FlatList, SafeAreaView } from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ type: 'row', text: 'row 1'},
{ type: 'row', text: 'row 2'},
{ type: 'list', data: ['Apple', 'Banna', 'Pear', 'Orange', 'Grape', 'Pineapple']},
{ type: 'row', text: 'row 3'},
{ type: 'row', text: 'row 4'},
{ type: 'row', text: 'row 5'},
{ type: 'list', data: ['Bike', 'Car', 'Train', 'Plane', 'Boat', 'Rocket']},
{ type: 'row', text: 'row 6'},
{ type: 'row', text: 'row 7'},
{ type: 'row', text: 'row 8'},
]
}
}
renderMainItem = ({item}) => {
if (item.type === 'row') {
return (
<View style={styles.mainItem}>
<Text>{item.text}</Text>
</View>
);
}
if (item.type === 'list') {
return (
<View style={styles.list}>
<FlatList
extraData={this.state}
data={item.data}
keyExtractor={this.keyExtractor}
renderItem={this.renderHorizontalItem}
horizontal={true}
/>
</View>
);
}
}
keyExtractor = (item, index) => {
return index.toString();
}
renderHorizontalItem = ({item}) => {
return (
<View style={styles.horizontalItem}>
<Text>{item}</Text>
</View>
);
}
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
extraData={this.state}
data={this.state.data}
keyExtractor={this.keyExtractor}
renderItem={this.renderMainItem}
/>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white'
},
mainItem: {
height: 80,
justifyContent: 'center',
alignItems: 'center',
margin: 10,
backgroundColor: 'yellow'
},
horizontalItem: {
width: 80,
justifyContent: 'center',
alignItems: 'center',
marginHorizontal:5,
backgroundColor: 'blue'
},
list: {
height: 80,
marginHorizontal: 5
}
});
This is just a simple example that shows one of many ways of creating a FlatList with a horizontal FlatList inside it.