Activity Indicator Showing on Tab 1 as well as Tab 2 ( I only want it to be displayed on tab 2 - when tab 2 is loading)

Question

In this code below I am creating 2 tabs using state to keep track of which tab is visible.

currentTab === 1 & currentTab === 2

I am using the ternary operator for both. For the second Tab I display an activity indicator if the data is loading, and disappears when the data loads which works perfectly. However the activity monitor is also displayed (continuously) on tab 1 even though I am not using it in the first ternary operator but the second. Any Advice?

<ScrollView style={{flex: 1}}>
                    {this.state.currentTab === 1 ? (
                      <View style={{flex: 1}}>
                          <Avatar
                            marginLeft={20}
                            rounded
                            source={{uri: image}}
                          />
                      </View>
                    ) : null}
                    {this.state.currentTab === 2 &&
                    this.state.metadata != null ? (
                      <View style={{flex: 1, paddingBottom: 20}}>
                        <Text style={styles.sectionHeader}> History</Text>
              
                      </View>
                    ) : (
                      <ActivityIndicator size="large" />
                    )}
                  </ScrollView>

Answer 1

You're not using the AtivityIndicator on first ternary but it will show because Ternary operators works like this: isTruthy ? true : false If isTruthy is truthy execute true, if not execute false

And in your case

• this.state.currentTab === 1 ? (<></>) : null will return your tab if currentTab is 1, and return null if not.

• this.state.currentTab === 2 && this.state.metadata != null ? (<></>) : (<ActivityIndicator />) will return your tab if currentTab is 2 and metadata is not null, and return ActivityIndiciator if not.

Your mistake is in the second ternary operator. You are rendering ActivityIndicator if currentTab is not 2 and metadata is null.

You can create a second nested ternary operator for your ActivityIndicator to solve this.

{this.state.currentTab === 2 ? (
  this.state.metadata != null ? (
    <View style={{flex: 1, paddingBottom: 20}}>
      <Text style={styles.sectionHeader}> History</Text>

    </View>
  ) : (
    <ActivityIndicator size="large" />
  )
) : null}

In this case, it will execute the nested ternary if currentTab is 2, and return null if not. Inside the nested ternary, it will return your tab if metadata is not null, and return ActivityIndicator if not.