diff --git a/App.js b/App.js index 821290a..b704efd 100644 --- a/App.js +++ b/App.js @@ -6,18 +6,98 @@ */ import React from 'react'; -import {Text} from 'react-native'; +import { + SafeAreaView, + View, + FlatList, + StyleSheet, + Text, + StatusBar, +} from 'react-native'; class App extends React.Component { constructor(props) { super(props); } render() { - return Awesome App; + return ( + item.id} + numColumns={undefined} + pagingEnabled={true} + data={DATA} + renderItem={renderItem} + keyExtractor={item => item.toString()} + /> + ); } } -// const styles = StyleSheet.create({ -// }); +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', + }, + { + id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb8bbb', + title: 'Fourth Item', + }, + { + id: '3ac68afc-c605-48d3-a4f8-fbd91aa97676', + title: 'Fifth Item', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e27234', + title: 'Sixth Item', + }, + { + id: '58694a0f-3da1-471f-bd96-145571e29234', + title: 'Seven Item', + }, + { + id: '58694a0f-3da1-471f-bd96-145571429234', + title: 'Eight Item', + }, + { + id: '58694a0f-3da1-471f-bd96-115571429234', + title: 'Nine Item', + }, + { + id: '58694a0f-3da1-471f-bd96-1155h1429234', + title: 'Ten Item', + }, +]; + +const renderItem = ({item}) => ( + + {item.title} + +); + +const styles = StyleSheet.create({ + container: { + flex: 1, + marginTop: StatusBar.currentHeight || 0, + }, + item: { + height: 200, + width: 400, + backgroundColor: 'red', + padding: 20, + marginVertical: 8, + marginHorizontal: 16, + }, + title: { + fontSize: 16, + }, +}); export default App;