React Native doesn't render all item?

[huy1999dnbk]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I tried many way but the flatlist never load full item on my api.Im my api i have 16 item to load but app only load 10 item.

React Native version:

react-native 0.63.3

Snack, code example, screenshot, or link to a repository:

import React, {useState, useEffect} from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  Image,
  TouchableOpacity,
  Pressable,
  ActivityIndicator,
  VirtualizedList,
} from 'react-native';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import {faPrescriptionBottle} from '@fortawesome/free-solid-svg-icons';
import {faMapMarkerAlt} from '@fortawesome/free-solid-svg-icons';
import {faIndustry} from '@fortawesome/free-solid-svg-icons';
import AsyncStorage from '@react-native-community/async-storage';

const Mainscreen = ({navigation}) => {
  const [warehouse, setWarehouse] = useState([]);

  const [pageCurrent, setPageCurrent] = useState(1);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    let isMounted = true;
    setIsLoading(true);
    fetchData();
    return () => {
      isMounted = false;
    };
  }, [pageCurrent]);

  const fetchData = async () => {
    const token = await AsyncStorage.getItem('idtoken');
    const apiURL =
      'https://cnpmwarehouse.herokuapp.com/warehouses/user?limit=2&page=' +
      pageCurrent;
    await fetch(apiURL, {
      method: 'GET',
      headers: {
        accept: 'application/json',
        Authorization: `Bearer ${token}`,
      },
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setWarehouse(warehouse.concat(responseJson.data.warehouses));
        setIsLoading(false);
      });
  };

  renderItem = ({item}) => {
    return (
      <Pressable
        onPress={() => {
          navigation.navigate('Detail', {
            idwarehouse: item.id,
          });
        }}>
        <View style={styles.card}>
          <Image
            style={styles.tinyLogo}
            source={require('../assets/images/blakcstonemain.jpg')}
          />
          <View style={{marginTop: 15}}>
            <View style={styles.info}>
              <FontAwesomeIcon
                style={styles.icon}
                icon={faIndustry}
                size={25}
              />
              <Text numberOfLines={3} style={styles.text}>
                {item.name}
              </Text>
            </View>
            <View style={styles.info}>
              <FontAwesomeIcon
                style={styles.icon}
                icon={faMapMarkerAlt}
                size={25}
              />
              <Text numberOfLines={3} style={styles.text}>
                {item.address}
              </Text>
            </View>
            <View style={styles.info}>
              <FontAwesomeIcon
                style={styles.icon}
                icon={faPrescriptionBottle}
                size={25}
              />
              <Text numberOfLines={3} style={styles.text}>
                {item.description}
              </Text>
            </View>
          </View>
        </View>
      </Pressable>
    );
  };

  handleFooter = () => {
    return isLoading ? (
      <View style={styles.loader}>
        <ActivityIndicator size="small" color="red" />
      </View>
    ) : null;
  };

  handleLoadMore = () => {
    setPageCurrent(pageCurrent + 1);
    setIsLoading(true);
  };


  return (
    <>
      <View style={styles.container}>
        <FlatList
          data={warehouse}
          numColumns={1}
          keyExtractor={(item) => item.id.toString()}
          initialNumToRender={16}
          //debug={true}
          renderItem={renderItem}
          updateCellsBatchingPeriod={100}
          ListFooterComponent={handleFooter}
          onEndReached={handleLoadMore}
          onEndReachedThreshold={10}
        />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    //flex: 1,
    paddingTop: 15,
    paddingHorizontal: 15,
    backgroundColor: 'white',
  },
  card: {
    height: 300,
    backgroundColor: '#fff',
    alignItems: 'flex-start',
    marginBottom: 30,
    elevation: 20,
    borderRadius: 15,
    overflow: 'hidden',
  },
  tinyLogo: {
    width: 400,
    height: 150,
  },
  icon: {
    color: '#FC4646',
  },
  text: {
    fontFamily: 'Roboto-BoldItalic',
    fontSize: 20,
    marginLeft: 15,
  },
  info: {
    flexDirection: 'row',
    marginBottom: 10,
    marginHorizontal: 20,
  },
  loader: {
    marginTop: 10,
    alignItems: 'center',
  },
});

export default Mainscreen;

[xiaoyongchen]

i have some problem

[ahmetboz]

Can you try to put warehouse in eval?

<FlatList data={(warehouse)} numColumns={1} keyExtractor={(item) => item.id.toString()} initialNumToRender={16} //debug={true} renderItem={renderItem} updateCellsBatchingPeriod={100} ListFooterComponent={handleFooter} onEndReached={handleLoadMore} onEndReachedThreshold={10} />

[judaihyun]

try use windowSize props https://reactnative.dev/docs/optimizing-flatlist-configuration#windowsize

[ydv0121]

@huy1999dnbk check after removing ListFooterComponent.

[faizkhan7896]

I am facing same issue, please help

[ahmetboz]

Please share your code and let us review.