//import liraries
// Day 2 - Learning
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
StatusBar,
FlatList,
SafeAreaView,
Pressable,
} 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',
},
{
id: '7',
title: 'Seven Item',
},
];
const ListItemView = ({title}) => (
<Pressable
onPress={() => {
console.log('press - '+title);
}}>
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
</Pressable>
);
// create a component
const SimpleList_1 = () => {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({item}) => <ListItemView title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
};
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.marginTop || 0,
},
item: {
backgroundColor: '#F5F5F5',
marginVertical: 5,
padding: 15,
marginHorizontal: 10,
},
title: {
fontSize: 14,
},
});
//make this component available to the app
export default SimpleList_1;
Screenshot
 |
