ask react native

Index

<StyleProvider style={getTheme(material)}>
    <Container>
        <StatusBar translucent={false} backgroundColor={'#d3561a'} barStyle={'light-content'} />

        <HeaderSection navigation={this.props.navigation} />

        <Overview data={dataOverview} loading={isLoading} slider={uniPartners.about} />

        <TabView data={uniPartners} loading={isLoading} navigation={this.props.navigation} dataOverview={dataOverview} />
    </Container>
</StyleProvider>

TabView

<Tabs tabBarUnderlineStyle={{backgroundColor:'#f7f7f7'}} tabContainerStyle={{elevation:0, borderBottomWidth:1, borderBottomColor:'#e7e7e7'}}>
  <Tab
  heading="Uni Partners"Countries
  tabStyle={styles.defaultTab}
  activeTabStyle={styles.activeTab}
  textStyle={styles.defaultText}
  activeTextStyle={styles.activeText}>
     {uniPartners.length == 0 || univLoading == true ? this.loadingComponent(uniPartners, univLoading) : <UniPartnersTab list={uniPartners} loading={univLoading} navigation={navigation} getDetails={getUniPartners} />} 
  </Tab>
</Tabs>

UniPartnersTab

renderItem = ({ item, index }) => {
        const { navigation, getDetails } = this.props;
        const { list } = this.state;

        if (index === list.length - 1) {
            return (
                <View key={index} style={styles.listOuterLast}>
                    <View style={{flex:0.3, paddingRight:10}}>
                        <Image source={{uri: item.logo}} style={{width:'auto', height:30}} resizeMode={'contain'}  />
                    </View>

                    <View style={{flex:0.7, justifyContent:'flex-start'}}>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => getDetails(item.id, {id:item.id, logo:item.logo, name:item.name, address:item.address})}>
                            <Text style={styles.title}>{item.name}</Text>

                            <Text style={styles.address} numberOfLines={2}>{item.address}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )
        } else {
            return (
                <View key={index} style={styles.listOuter}>
                    <View style={{flex:0.3, paddingRight:10}}>
                        <Image source={{uri: item.logo}} style={{width:'auto', height:30}} resizeMode={'contain'}  />
                    </View>

                    <View style={{flex:0.7, justifyContent:'flex-start'}}>
                        <TouchableOpacity activeOpacity={0.8} onPress={() => getDetails(item.id, {id:item.id, logo:item.logo, name:item.name, address:item.address})}>
                            <Text style={styles.title}>{item.name}</Text>

                            <Text style={styles.address} numberOfLines={2}>{item.address}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }
    }

    _keyExtractor = ( item, index) => index.toString();

    onEndReached = (distance) => {
        if (distance >= 0) {
            this.setState({loading: true})
        }
    }

    renderFooter = () => {
        if (this.state.loading) {
            return (
                <View style={{paddingTop:20, paddingBottom:20, justifyContent:'center', alignItems:'center'}}>
                    <ActivityIndicator animating size="small" color="#F26522" />
                </View>
            )
        } else {
            return null
        }
    }

<FlatList
                data={list}
                renderItem={this.renderItem}
                ListFooterComponent={this.renderFooter}
                keyExtractor={this._keyExtractor}
                onEndReached={(info) => this.onEndReached(info)}
                onEndThreshold={0.1}
                
            />