React Native - Relocating ActivityIndicator to Login Button

Question

I try to add ActivityIndicator into location of Login Button. I thought if user press login button it should turn into activity indicator. I stuck at making condition for button and activityindicator components.

if indicatorVisible state is false show LoginButton but if it is true show ActivityIndicator.

 state = {indicatorVisible: false}
 
 render() {  
....
<TextButton onPress={() => this.pressHandler()} color='#15DCA2' title='Login' />
  <ActivityIndicator size="small" color="#0000ff" />
...
 }

All I want is how to hide and relocate 2 components in best efficient way.

Answer 1

this.state = {
activityIndicator: false,
}

render() {
  const {activityIndicator} = this.state;
  return (
    <View>
      {activityIndicator === false ? (
        <TextButton color="color" title="Login" />
      ) : (
        <ActivityIndicator />
      )}
    </View>
  )
}

You can use the ternary operator to show different views based on conditions.