how to set loader in center of the screen and lock screen till getting response. in react native

Question

I am new to react native. I am trying to show loader till getting response from server. and when loader is showing I want to lock screen means user unable to scroll or unable to do anything. here is loader code

import {ActivityIndicator} from 'react-native

 isLoading: true,

 <ScrollView style={{ flex: 1, height: Dimensions.get('window').height / 1.1,}}>

  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        {this.state.isLoading && <ActivityIndicator  size="large" color={"orange"} />}
      </View>

</ScrollView>

please help thanks. By adding this code. I am not able show that loader on center and when I scroll down then This loader goes up and not showable.

Answer 1

import {ActivityIndicator} from 'react-native

 if(isLoading){
     <View style={{ flex: 1, justifyContent: "center", alignItems: "center" 
      }}>
        <ActivityIndicator  size="large" color={"orange"} />
     </View>
}
else {
    <ScrollView style={{ flex: 1, height: Dimensions.get('window').height / 1.1,}}>

   /* your rest code * /

  </ScrollView>
}