React Native show Loading before the map appears

wafa.A 0
Viewed 14

I am developing a React app where I have to load map data from the server on the home page. It takes a small amount of time when loading data from the server. I want to display a spinner when the data called. I 'm using a spinner component from react native, but I don't know how to display that spinner when the fetch api is triggered.

state = {
    loading: true,
  };

 renderModal = () => {
    return (
      <>
        {!(this.state.loading )? (
          <Modal isVisible={this.state.map} 
          hasBackdrop={true} 
          backdropColor={'#393939'}>
          <MapView
          ...
          >
          </MapView>
      </Modal>
          ):(
          <Spinner color="#515751" visible={this.state.loading} animation="fade"  /> )}
      </>

on my case here loading show forever and map not appear

react-native javascript
1 Answers

Here is your solution:

  if(this.state.loading){
    return <Spinner/>
  }
  return <Modal>....</Modal>
Alija Fajić0
Related