Random-User-/App.js at master · ashwini9999/Random-User- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text,ActivityIndicator,Image} from 'react-native';
import {Card,CardItem,Header} from 'native-base';


export default class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      isLoading:true,
      dataSource: []
    };
  }

  getUserfromApi=()=>{
    return(
      fetch("https://randomuser.me/api/?results=50")
      .then(response=>response.json())
      .then(responseJson=>{
        this.setState({
          isLoading:false,
          dataSource:this.state.dataSource.concat(responseJson.results)
        })
      })
      .catch(error=>console.log(error))
    )
  }

  _keyExtractor=(datasource,index)=>datasource.email;

  componentDidMount(){
    this.getUserfromApi();
  }

  render(){
    if(this.state.isLoading){
      return(
        <View style={styles.progress}>
          <ActivityIndicator size="large" color='#01CBC6' />
        </View>
      )
    }else{
    return(
      <FlatList
      data={this.state.dataSource}
      keyExtractor={this._keyExtractor}
      renderItem={({item})=>(

       <Card>
         <View>
           <Header>

           </Header>
         </View>
       <CardItem>
         <View style={styles.container}>
           <Image
           style={styles.profilepic}
           source={
             {
               uri:item.picture.medium
             }
           } />
         </View>
         <View style={styles.userinfo}>
        <Text>
          Name:{item.name.title} {item.name.first} {item.name.last}
        </Text>
        <Text>
        Email:{item.email}
        </Text>
        <Text>
        City:{item.location.city}
        </Text>
         </View>
       </CardItem>
       </Card>
      )}
      >
      </FlatList>
       );
  }}
}

const styles=StyleSheet.create({
  container:{
   flex:1,
   backgroundColor:'#fff',
   alignItems:"center",
   justifyContent:'center'
  },
  profilepic:{
    flex:2,
    height:100,
    width:100,
    marginEnd:10
  },
  userinfo:{
    flex:1,
    flexDirection:'column'
  },
  progress:{
    flex:1,
    justifyContent:'center',
    alignItems:'center'
  }
})