xxxxxxxxxx
import { FlatList } from 'react-native'
<FlatList
data={items}
renderItem={
({ item, index, separators }) => <Component item={item} />
}
keyExtractor={item => item.id}
/>
xxxxxxxxxx
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
const renderItem = ({ item }) => (
<Item title={item.title} />
);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
xxxxxxxxxx
<FlatList
data={data ? data : []}
renderItem={({ outerItem }) => (
<View>
<FlatList
data={outerItem["data"] ? outerItem["data"] : []}
renderItem={({ innerItem }) => (
<TouchableOpacity onPress={() => {
navigation.navigate("Home", {
artist_id: innerItem["artistID"]
})
}}>
<View>
<Text>Inner FlatList</Text>
</View>
</TouchableOpacity>
)}
keyExtractor={(innerItem) => innerItem.id}
/>
</View>
)}
/>
xxxxxxxxxx
### Example::: FlatList 2 Column
##### Create: Card Component
```
type Props = {
icon: ReactNode,
title: string,
isTwoLine: boolean
};
const CardMainMenuComponent = ({ icon, title, isTwoLine }: Props) => {
return (
<TouchableHighlight
onPress={() => Alert.alert("Super")}
underlayColor={'lightgrey'}
style={[styles.card, {}]}
>
<View style={{flex: 1, width: '100%'}}>
<View style={[{ flex: 1, width: '100%' }]}>
<View style={[{ flex: 1, justifyContent: 'center', alignItems: 'center' }]}>
{icon}
</View>
</View>
<View style={[{ flex: isTwoLine ? 2 : 1, justifyContent: 'center' }]}>
<Text numberOfLines={isTwoLine ? 2 : 1} adjustsFontSizeToFit style={[styles.text, gbs.title]}>{title}</Text>
</View>
</View>
</TouchableHighlight>
);
}
export default CardMainMenuComponent;
const styles = StyleSheet.create({
card: {
width: '45%',
height: sc.cardMenuHeight,
backgroundColor: colors.white,
padding: sc.padMin,
margin: sc.midSpace,
alignItems: 'center',
borderRadius: sc.spaceTitle,
shadowColor: colors.secondary,
shadowRadius: sc.padMin,
shadowOpacity: 0.1
},
text: {
color: '#4F4F4F',
textAlign: 'center'
}
});
```
### Use FlatList
```
<View style={[{ flex: 1, flexDirection: 'row', alignItems: 'center' }]}>
<FlatList
keyExtractor={(item, index) => index.toString()}
data={saleProductModels}
renderItem={({item}) => (
<CardMainMenuComponent
icon={item.icon}
title={item.title}
isTwoLine={item.isTwoLine}
/>
)}
numColumns={2}
columnWrapperStyle={{justifyContent: 'space-between'}}
contentContainerStyle={{padding: sc.padMin}}
ItemSeparatorComponent={() => <View style={[{height: sc.padMin}]}></View>}
>
</FlatList>
</View>
```