From 6983c48b98244e30abd7c130a178227cc46adb4f Mon Sep 17 00:00:00 2001
From: konchanSS <b1447864@planet.kanazawa-it.ac.jp>
Date: Fri, 9 Feb 2018 15:55:00 +0900
Subject: [PATCH 1/2] Using List View lesson 1

---
 App.js | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/App.js b/App.js
index 224d7db..d662171 100644
--- a/App.js
+++ b/App.js
@@ -1,16 +1,36 @@
 import React, { Component } from 'react';
-import { AppRegistry, Text, View } from 'react-native';
+import { AppRegistry, FlatList, StyleSheet,Text, View } from 'react-native';
 
 export default class App extends Component {
   render() {
     return (
-      <View>
-        <Text>Open up App.js to start working on your app!</Text>
-        <Text>Changes you make will automatically reload.</Text>
-        <Text>Shake your phone to open the developer menu.</Text>
+      <View style={styles.container}>
+        <FlatList
+          data={[
+              {key: 'Devin'},
+              {key: 'Shimba'},
+              {key: 'Oketani'},
+              {key: 'Kawatsu'},
+              {key: 'Adanson'},
+              {key: 'Daichi'},
+          ]}
+          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
+        />
       </View>
     );
   }
 }
 
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      paddingTop:22,
+    },
+    item: {
+      padding: 10,
+      fontSize: 18,
+      height: 44,
+    },
+})
+
 AppRegistry.registerComponent('react-native-tutorial', () => App);

From f4c5c4958d09d1d6476d2dc8209e828e1a8b28fb Mon Sep 17 00:00:00 2001
From: konchanSS <b1447864@planet.kanazawa-it.ac.jp>
Date: Fri, 9 Feb 2018 16:01:35 +0900
Subject: [PATCH 2/2] Using List Views lesson 1

---
 App.js | 39 +++++++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/App.js b/App.js
index d662171..daa1170 100644
--- a/App.js
+++ b/App.js
@@ -1,20 +1,18 @@
 import React, { Component } from 'react';
-import { AppRegistry, FlatList, StyleSheet,Text, View } from 'react-native';
+import { AppRegistry, SectionList, StyleSheet,Text, View } from 'react-native';
 
 export default class App extends Component {
   render() {
     return (
       <View style={styles.container}>
-        <FlatList
-          data={[
-              {key: 'Devin'},
-              {key: 'Shimba'},
-              {key: 'Oketani'},
-              {key: 'Kawatsu'},
-              {key: 'Adanson'},
-              {key: 'Daichi'},
-          ]}
-          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
+        <SectionList
+            sections={[
+                {title: 'A', data: ['Adanson']},
+                {title: 'J', data:['John', 'Joseph', 'Jojo', 'Jimmy', 'Joel']},
+            ]}
+            renderItem={({item}) => <Text style={styles.item}>{item}</Text>}
+            renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
+            keyExtractor={(item, index) => index}
         />
       </View>
     );
@@ -23,13 +21,22 @@ export default class App extends Component {
 
 const styles = StyleSheet.create({
     container: {
-      flex: 1,
-      paddingTop:22,
+        flex: 1,
+        paddingTop: 22
+    },
+    sectionHeader: {
+        paddingTop: 2,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 2,
+        fontSize: 14,
+        fontWeight: 'bold',
+        backgroundColor: 'rgba(247,247,247,1.0)',
     },
     item: {
-      padding: 10,
-      fontSize: 18,
-      height: 44,
+        padding: 10,
+        fontSize: 18,
+        height: 44,
     },
 })