sample code representing pull to refresh in flatlist modify accordingly

1import React, { Component } from 'react'
2    import { Text, View,StyleSheet,FlatList,Dimensions,Image,TouchableHighlight } from 'react-native'
3
4    export default class Home extends Component {
5
6        constructor(props) 
7        {
8            super(props);
9        this.state = {
10            data : [],
11            gender : "",
12            isFetching: false,
13        }
14        }
15
16    componentWillMount()
17    {
18
19        this.searchRandomUser()
20    }
21
22    onRefresh() {
23        this.setState({ isFetching: true }, function() { this.searchRandomUser() });
24     }
25
26    searchRandomUser = async () =>
27    {
28       const RandomAPI = await fetch('https://randomuser.me/api/?results=20')
29       const APIValue = await RandomAPI.json();
30        const APIResults = APIValue.results
31          console.log(APIResults[0].email);
32          this.setState({
33              data:APIResults,
34              isFetching: false
35          })
36
37    }
38
39      render() {
40        return (
41          <View style = {styles.container}>
42     <TouchableHighlight
43     onPressOut = {this.searchRandomUser}
44         style = {{width:deviceWidth - 32, height:45,backgroundColor: 'green',justifyContent:"center",alignContent:"center"}}>
45              <Text style = {{fontSize:22,color: 'white',fontWeight: 'bold',textAlign:"center"}}>Reload Data</Text>
46         </TouchableHighlight>
47     <FlatList
48            data={this.state.data}
49            onRefresh={() => this.onRefresh()}
50          refreshing={this.state.isFetching}
51            keyExtractor = { (item, index) => index.toString() }
52            renderItem={({item}) =>
53            <View style = {styles.ContainerView}>
54            <View>
55    <Image
56    source={{uri : item.picture.large}}
57    style = {{height:100,width:100,borderRadius: 50,marginLeft: 4}}
58    resizeMode='contain'
59    />
60    </View>
61
62    <View style = {{flexDirection: 'column',marginLeft:16,marginRight: 16,flexWrap:'wrap',alignSelf:"center",width: deviceWidth-160}}>
63    <Text>Email Id : {item.email}</Text>
64
65    <Text>Full Name : {this.state.gender} {item.name.first} {item.name.last}</Text>
66    <Text>Date of birth : {item.dob.age}</Text>
67    <Text>Phone number : {item.phone}</Text>
68
69    </View>
70
71    </View>
72            }
73            />
74          </View>
75        )
76      }
77    }
78    const deviceWidth = Dimensions.get('window').width
79    const deviceHeight = Dimensions.get('window').height
80    const styles = StyleSheet.create({
81        container: {
82          flex: 1,
83          alignItems: 'center',
84          justifyContent: 'center',
85          marginTop:22
86        },
87        ContainerView:
88        {
89            // backgroundColor:'grey',
90            marginBottom:20,
91            paddingVertical:10,
92            backgroundColor: '#F5F5F5',
93
94            borderBottomWidth:0.5,
95            borderBottomColor:'grey',
96            width: deviceWidth-40,
97            marginLeft:20,
98            marginRight:20,
99            marginTop:20,
100            flexDirection:'row'
101        }
102      });
103