loading bar di outlet

view/Outlets.js

@@ -40,13 +40,13 @@ class Outlets extends React.Component {
 
         this._unsubscribe = this.props.navigation.addListener('focus', () => {
             this.setState({
-              indicator: true,
+                indicator: true,
             })
             this._getOutletClosest()
             this.OrderedList()
             this._getPermissions()
-          });
-        
+        });
+
     }
 
     _getPermissions = async () => {
@@ -315,24 +315,25 @@ class Outlets extends React.Component {
                             placeholder={{ label: 'All City' }}
                             onValueChange={(label) => this.filterData(label)}
                             items={this.state.data_outlet}
-                            style={{inputIOSContainer: {paddingVertical: 10, alignItems: 'center'}}}
+                            style={{ inputIOSContainer: { paddingVertical: 10, alignItems: 'center' } }}
                         />
                     </View>
                 </View>
                 <View style={styles.body}>
-                    {this.state.dataOutlets.length > 0 ? (
-                        <FlatList
-                            data={_.orderBy(this.state.dataOutlets, ['distance'], ['asc'])}
-                            renderItem={this.RenderItem}
-                            keyExtractor={item => item.id}
-                            windowSize={5}
-                            initialNumToRender={18}
-                            maxToRenderPerBatch={2}
-                            onEndReachedThreshold={0.5}
-                        />
-                    ) : (
-                        <Text style={{ flexWrap: 'wrap', fontFamily: 'Gotham-Light', color: '#b1b1b2', textAlign:'center' }}> Tidak Ada Outlets di area anda !</Text>
-                        )}
+                    {this.state.indicator ? (<ActivityIndicator style={{ top: 20, justifyContent: "center" }} size="large" color="#c9af6d" />) : (
+                        this.state.dataOutlets.length > 0 ? (
+                            <FlatList
+                                data={_.orderBy(this.state.dataOutlets, ['distance'], ['asc'])}
+                                renderItem={this.RenderItem}
+                                keyExtractor={item => item.id}
+                                windowSize={5}
+                                initialNumToRender={18}
+                                maxToRenderPerBatch={2}
+                                onEndReachedThreshold={0.5}
+                            />
+                        ) : (
+                                <Text style={{ flexWrap: 'wrap', fontFamily: 'Gotham-Light', color: '#b1b1b2', textAlign: 'center' }}> Tidak Ada Outlets di area anda !</Text>
+                            ))}
 
                 </View>
             </View>