Disable user interaction during activityindicator. React-Native - react-native

Question

I want to disable user interaction when the activity indicator is running. The user should not be able to type again in the TextInput and disable touchableopacity button.
render() {
return (
<View style={styles.container}>
<View style={styles.backgroundContainer}>
<Image
source={require("./background-image.jpg")}
resizeMode="cover"
style={styles.backdrop}
/>
</View>
<View style={styles.contentContainer}>
<View style={styles.subContainer}>
<Image style={styles.image} source={require("./logo.png")} />
<TextInput
// editable={!this.props.isLoginLoading}
style={styles.input}
ref={"input1"}
placeholder="Enter your mobile number"
maxLength={10}
onChangeText={value => this.setState({ mobilenumber: value })}
/>
<TouchableOpacity
// activeOpacity={this.getOpacity()} //newly added
onPress={this.onPress}
>
<View style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</View>
</TouchableOpacity>
</View>
{this.props.isLoginLoading && (
<View style={styles.indicator}>
<ActivityIndicator color={"blue"} />
</View>
)}
</View>
</View>
);
}
}
Below shows the design for the above code, styles.js
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: "#FFFFFF"
},
backgroundContainer: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
right: 0
},
contentContainer: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
subContainer: {
alignItems: "center"
},
backdrop: {
flex: 1
},
image: {
marginBottom: Metrics.screenHeight * 0.075,
resizeMode: "contain",
width: Metrics.screenWidth * 0.35,
height: Metrics.screenHeight * 0.25
},
input: {
borderWidth: 1,
marginBottom: Metrics.screenWidth * 0.03,
width: Metrics.screenWidth * 0.626,
backgroundColor: "lightgrey"
},
button: {
width: Metrics.screenWidth * 0.626,
height: Metrics.screenHeight * 0.06,
alignItems: "center",
backgroundColor: "#8c0d04",
fontWeight: "bold"
},
buttonText: {
padding: Metrics.screenHeight * 0.0165,
color: "#FFFFFF",
fontWeight: "bold",
alignItems: "center",
justifyContent: "center"
},
indicator: {
position: "absolute",
left: 0,
right: 0,
top: 0,
bottom: 0,
// width: "100%",
// height: "100%",
justifyContent: "center",
alignItems: "center"
// borderWidth: 5,
// borderColor: "yellow"
}
});
export default styles;
I used dimensions to get the screen height and screen width according to the device size and added style to the activity indicator to by writing position to 'absolute' but still I'm able to access the text input as well the button click. I want to achieve the following thing when the user clicks the login button, I need to show the activity indicator below the Login button and I have to disable user interaction during the activity indicator.

Answer 1

There is two way you can achieve this.
If you want ActivityIndicator below of button then just remove view which contains {{flex:1}} style. and only give marginTop style to the parent view of ActivityIndicator. For that, you have to disable TextInput and button manually. Please see below code.
export default class Example extends Component {
onPress() {
if (!this.props.isLoginLoading) {
// skip if isLoginLoading is true
}
}
getOpacity() {
if (this.props.isLoginLoading) {
return 1;
}
return 0
}
render() {
return (
<View style={styles.container}>
<View style={styles.backgroundContainer}>
<Image source={require('./background-image.jpg')} resizeMode='cover' style={styles.backdrop} />
</View>
<View>
<View>
<Image
style={styles.image}
source={require('./logo.png')}
/>
</View>
<View style={styles.textinputview}>
<TextInput
editable={!this.props.isLoginLoading} //do editable false when loading is true
style={styles.input}
ref={'input1'}
placeholder='Enter your mobile number'
maxLength={10}
onChangeText={value => this.setState({ mobilenumber: value })}
/>
</View>
<View style={styles.touchableview}>
<TouchableOpacity
activeOpacity={this.getOpacity()} //set activopacity to 1 to indicate button is disable, when loading is true
onPress={this.onPress.bind(this)}>
<View style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</View>
</TouchableOpacity>
</View>
</View>
{this.props.isLoginLoading &&
<View
style={{
marginTop:10
}} >
<ActivityIndicator color={'blue'} />
</View>
}
</View>
);
}
}
just remove view which contains flex:{1} style. which will include ActivityIndicator in the center of the screen
return (
<View style={styles.backgroundContainer}>
<Image source={require('./background-image.jpg')} resizeMode='cover' style={styles.backdrop} />
</View>
<View>
<View>
<Image
style={styles.image}
source={require('./logo.png')}
/>
</View>
<View style={styles.textinputview}>
<TextInput
style={styles.input}
ref={'input1'}
placeholder='Enter your mobile number'
maxLength={10}
onChangeText={value => this.setState({ mobilenumber: value })}
/>
</View>
<View style={styles.touchableview}>
<TouchableOpacity onPress={this.onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Login</Text>
</View>
</TouchableOpacity>
</View>
</View>
{this.props.isLoginLoading &&
<View
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
width:'100%',
height:'100%',
justifyContent: 'center',
alignItems: 'center'
}}>
<ActivityIndicator color={'blue'} />
</View>
}
</View>
)