<LoaderWrapper loading={this.state.loading}> <View style={styles.main}> {this.props.totalQuizCount > 0 && this.state.filter === "ALL" ? ( <View style={styles.filterContainer}> {filters.map((filter) => ( <View style={styles.filter} key={filter.id}> <QuizFilterTab filterName={filter.name} active={filter.id === this.state.filter} // TODO: find a way to get the total number efficiently itemCount={20} onPress={() => this.fetchPracticeQuiz(filter.id)} key={filter.id} /> </View> ))} </View> ) : ( <View style={styles.noContentContainer}> <QuizEmptyScreen /> </View> )} {this.state.filter !== "ALL" && this.props.totalQuizCount === 0 ? ( <ScrollView> <FlatList data={Object.values(this.props.quizSections)} renderItem={this.renderItem} keyExtractor={(item) => item.id} /> </ScrollView> ) : ( <View style={styles.noContentContainer}> <QuizEmptyScreen /> </View> )} </View> </LoaderWrapper>