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;