Assignment 3.1

Final submission

src/Components/Followers.js

+import * as React from 'react';
+import { Pressable, View, Text, Image, StyleSheet } from 'react-native';
+import Users from './Users'
+
+const styles = StyleSheet.create({
+  viewStyleVertical : { alignItems: 'center', justifyContent: 'center', margin: '10%' },
+  viewStyleHorizon : { flex: 1, flexDirection: 'row', justifyContent: 'space-between'},
+  pressableStyle : {flex: 1, flexDirection: 'row', justifyContent: 'space-between', backgroundColor:'lavender', paddingHorizontal:20, 
+  paddingVertical:10, borderColor:'thistle', borderWidth:2, borderRadius:5, marginHorizontal: 10, marginTop: 10},
+  image: { flex: 1, resizeMode: "cover", justifyContent: "center"},
+  container : {flex: 1},
+  textBox : {flex: 1, marginTop: 20, backgroundColor:'white', borderColor:'black', borderWidth:2, borderRadius:5, 
+  marginHorizontal: 10, paddingVertical:10, paddingHorizontal: 50, alignItems: 'flex-start'}
+});
+
+function Followers (user, navigation) {
+    const nodes = user['followers']['nodes']
+    const login = user['login']
+    let cards = []
+    if (nodes.length === 0) {
+        cards.push(
+        <Pressable style={styles.textBox} key={'Nobody'}>
+            <Text style={{ fontSize: 30 }}> 
+                Oops! Nobody is in this list!
+            </Text> 
+        </Pressable>
+        )
+    } else {
+        for (let i = 0; i < nodes.length; i++) {
+        var name = 'Name: \n' + nodes[i]['name'] + '\n'
+        var userName = 'Github Username: \n' + nodes[i]['login'] + '\n'
+        var key = 'user#' + i
+        var avatarUrl = nodes[i]['avatarUrl']
+        cards.push(
+        <Pressable style={styles.textBox} key={key} onPress={()=>navigation.push('LoadingProfile', {login: nodes[i]['login']})}>
+            <View style={styles.viewStyleVertical}>
+                <Image style={{width:90, height:90}} source={{uri: avatarUrl}}/>
+            </View>
+            <View style={styles.viewStyleVertical}>
+                <Text> {name} </Text>
+                <Text> {userName} </Text>
+            </View>
+        </Pressable>
+        )
+        }
+    }
+    const dataFile = {}
+    dataFile['cards'] = cards
+    dataFile['navi'] = navigation
+    dataFile['login'] = login
+    return (
+        <Users data={dataFile}/>
+    );
+}
+
+export default Followers
\ No newline at end of file