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>
CodePudding user response:
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.