Image doesnt display with more than 5 item in flatlist and native-base

#1

import React, { Component } from ‘react’;
import { View, Alert, ScrollView, FlatList, Platform, ActivityIndicator, Image } from ‘react-native’;
import { homecontainer } from “…/styles”
import { Asset, AppLoading } from ‘expo’;
import { Container, Content, Text, List, ListItem, Body, Left, Right, Thumbnail, Icon } from ‘native-base’
import { OptimizedFlatList } from ‘react-native-optimized-flatlist’
import { NavigationActions } from ‘react-navigation’;

class Home extends Component {

constructor(props) {
    super(props)
    this.state = {
        data: [],
        page: 1,
        loading: false,
        loadData: false,
        error: null,
        refreshing: false
    }
}

render() {

    if (!this.state.loadData) {
        return (
            <View style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center'
            }}>
                <ActivityIndicator size='large' />
            </View>
        )
    }

    return (
        <View style={{
            flex: 1,
            backgroundColor: 'white'
        }}>
            <List>
                <FlatList
                    data={this.state.data}
                    keyExtractor={(k, i) => i}
                    onEndReached={() => this.handleEnd()}
                    onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.1}
                    ListFooterComponent={() => this.renderFooterComponent() }
                    refreshing={this.state.refreshing}
                    onRefresh={() => this.handleRefresh() }
                    initialNumToRender={21}
                    renderItem={({ item }) =>
                        <ListItem avatar onPress={() => {
                            this.props.navigation.navigate('profile', { item })
                        }}>
                           
                            <Left>
                                <Thumbnail key={item.id} source={{ uri: 'http://localhost/meeting/assets/' + item.phone + '.png' }} />
                            </Left>
                            
                            <Body >
                                <Text>{item.name} {item.fname}</Text>
                                <Text note>{item.address}</Text>
                            </Body>

                            <Right>
                                <Text note>{item.mdate}</Text>
                                <Icon name="arrow-forward" />
                            </Right>

                        </ListItem>
                    }
                />
            </List>
        </View>
    );
}

handleEnd() {
    this.setState(state => ({ page: state.page + 1 }), () => this.fetchMembers())
}

async fetchMembers() {
    this.setState({ loading: true })
        
    const fOpt = {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                'operation': 'paging',
                'page': this.state.page
            }),
        }

    try {

        const res = await fetch('http://localhost/meeting/controller/MemberController.php', fOpt)
        const membersData = await res.json()

        if(membersData != "empty"){
            this.setState(state => ({ data: [...state.data, ...membersData], loading: false }), () => {
                if (this.state.page === 1) {
                    this.setState({ loadData: true })
                }
            })
        }
        
    } catch (error) {
        // this.setState({ error, loading: false, refreshing: false })
        console.log("home: "+error)
    }
}

renderFooterComponent() {
    return this.state.loading ? <ActivityIndicator size="large" /> : null
}

handleRefresh() {
    this.setState(
        {
            page: 1,
            refreshing: true
        },
        () => {
            this.fetchMembers()
        }
    )
}

componentDidMount() {

    this.fetchMembers()

    let cnt = 0

    if (!this.state.loadData) {
        const interval = setInterval(() => {
            cnt++
            if (this.state.loadData) {
                clearInterval(interval)
                cnt = 0
            }
            if (cnt >= 1) {
                this.fetchMembers()
            }

        }, 10000)

    }
}

}

export default Home;

#2

as it looks in the image i shared it displays as black and when I scroll it stops the app
there just 5 item its image displays as well

#3

I found this problem,
Just problem is borderRaduis which defined in native base thumbnail I just remove that and Used instead border less image and it worked fine

closed #4

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.