change pickup name

view/PickupName.js

 import React from 'react';
-import { View, Text, StyleSheet, FlatList, TextInput, Alert } from 'react-native';
+import { View, Text, StyleSheet, FlatList, TextInput, Alert, ActivityIndicator } from 'react-native';
 import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { CheckBox } from 'react-native-elements';
@@ -26,6 +26,7 @@ class PickupName extends React.Component {
             data: [], // data yg sedang aktif
             data_before_search: [],
             spinner: false,
+            indicator: true,
         }
     }
 
@@ -135,14 +136,14 @@ class PickupName extends React.Component {
 
             })
             this.setState({
-                spinner: false,
+                indicator: false,
             })
 
         }).catch(error => {
             let response = error.response.data;
             Alert.alert(response.msg);
             this.setState({
-                spinner: false,
+                indicator: false,
             })
         })
     }
@@ -285,7 +286,7 @@ class PickupName extends React.Component {
                     textStyle={styles.spinnerTextStyle}
                 /> */}
                 <View style={styles.searchbar}>
-                    <View style={{ height: 45, borderRadius: 10, borderColor: '#ccb46c', borderWidth: 1, flexDirection: 'row',backgroundColor:'red' }}>
+                    <View style={{ height: 45, borderRadius: 10, borderColor: '#ccb46c', borderWidth: 1, flexDirection: 'row' }}>
                         <View style={{ flex: 1,top:5 }}>
                             <MaterialCommunityIcons name="map-marker" size={32} color="#ccb46c" />
                         </View>
@@ -301,15 +302,20 @@ class PickupName extends React.Component {
                     </View>
                 </View>
                 <View style={styles.body}>
+                {this.state.indicator == true ? (
+                  <ActivityIndicator size="large" color="#c9af6d" />
+                ) : (
                     <FlatList
-                        data={_.orderBy(this.state.dataOutlets, ['distance'], ['asc'])}
-                        renderItem={this.RenderItem}
-                        keyExtractor={item => item.id}
-                        windowSize={5}
-                        initialNumToRender={18}
-                        maxToRenderPerBatch={2}
-                        onEndReachedThreshold={0.5}
-                    />
+                    data={_.orderBy(this.state.dataOutlets, ['distance'], ['asc'])}
+                    renderItem={this.RenderItem}
+                    keyExtractor={item => item.id}
+                    windowSize={5}
+                    initialNumToRender={18}
+                    maxToRenderPerBatch={2}
+                    onEndReachedThreshold={0.5}
+                />
+                  )}
+                  
                 </View>
             </View>
         )
@@ -337,11 +343,11 @@ const styles = StyleSheet.create({
     },
 
     searchbar: {
-        flex: 1,
+        flex: 0.5,
         justifyContent: 'center',
+        top:10,
         marginRight: 20,
         marginLeft:20,
-        backgroundColor:'green'
     }
 })