bolan9999 / react-native-largelist

The best large list component for React Native.
https://bolan9999.github.io/react-native-largelist/
MIT License
2.32k stars 261 forks source link

Item not rendering on the latest version #450

Closed zoobibackups closed 3 years ago

zoobibackups commented 3 years ago

I have updated to the latest version and now the list is not working. I have tried each and every method but still have no result. Here is the code that I have tried.

import React, { useEffect, useState } from 'react'
import { FlatList,StatusBar,SafeAreaView,View, StyleSheet, TouchableOpacity, Text } from 'react-native'
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
import {useSelector} from 'react-redux';
import Item from '../components/FlatListItem'
import { COLORS,SCREENS, height, width, FONTS, FONTS_SIZE } from '../constants';
import LottieView from 'lottie-react-native';
import { LargeList, WaterfallList } from "react-native-largelist-v3";
import { GenerateSectionData } from '../services/sectiondata';
const ConvertFileScreen = ({navigation, route}) => {
    let type = route.params.type
    const {allFiles} = useSelector(state => state.DocumentsReducer);
    const [selectedfiles, setSelectFiles] = useState([])
    //const [filterfiles , setFilteredFiles] = useState([{header:"a", items:[]}])
    const [filterfiles , setFilteredFiles] = useState([])
    const [loading, setLoading] = useState(true)
    //const [sectionsData, setSectionData] = useState([])
    useEffect(() => {
        GenerateSectionData(allFiles).then((data) =>{
            setFilteredFiles(data)
            setLoading(false)
        })
    },[loading])

    console.log(filterfiles[0].items.length, "filterfiles[0].items.length")

    console.log(filterfiles[1].items.length, "filterfiles[1].items.length")
    console.log(filterfiles[2].items.length, "filterfiles[2].items.length")

    const _renderItem = () => {
        //const item = filterfiles[section].items[row];
       alert("asfaf")
        return (
            <View style={{height:100,flex:1, marginVertical:10,width:width, backgroundColor:"gray"}}></View>
        )
    }

    const renderEmptyList = () => {
        return(
            <View style={{flex:1, marginTop:width/3, justifyContent:"center", alignItems:"center"}}>
                <LottieView source={require('../assets/lottie/EmptyFolder.json')} autoPlay loop width={width/2} height={width/2} style={{width:width/2, height:width/2}} /> 
                <Text allowFontScaling={true}>Files Not Found</Text>
            </View>
        )
    }

    const _renderSection = () => {
        return(
            <View style={{height:40, marginVertical:5, width:width,  backgroundColor:"red"}}>
                <Text>Section</Text>
            </View>
        )
    }
    if(loading){
        return(
            <View style={{flex:1,backgroundColor:"#fff", justifyContent:"center", alignItems:"center"}}>
                <LottieView source={require('../assets/lottie/FileLoading.json')} autoPlay loop width={width/2} height={width/2} style={{width:width/2, height:width/2}} /> 
            </View>
        )
    }

    return(
        <View style={{height:height, width:width, backgroundColor:"yellow" }}> 
            <LargeList 
                data={filterfiles}
                style={{flex:1}}
                contentStyle={{height:1000}}
                heightForSection={() => 50}
                renderSection={_renderSection}
                renderIndexPath={_renderItem}
                heightForIndexPath={() => 120}
                renderEmpty={renderEmptyList}

            />
        </View>

    )
}

export default ConvertFileScreen;

const styles = StyleSheet.create({
    scrollView: {
        backgroundColor:"#ffffff",
    },
   FabStyle:{
       alignSelf:"flex-end",
       position:"absolute",
       bottom:20,
       right:20,
       width:50,
       height:50,
       borderRadius:50,
       borderColor:COLORS.activeIconColor,  
       borderWidth:0,
       justifyContent:"center",
       alignItems:"center",
       backgroundColor:COLORS.activeIconColor
   },
   selectFileCountText:{
       color:COLORS.white,
       fontFamily:FONTS.medium,
       fontSize:FONTS_SIZE.small,
   }
})

Here is my package.json file

{
  "name": "dconverter",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/drawer": "^5.12.5",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "lottie-ios": "^3.1.8",
    "lottie-react-native": "^4.0.2",
    "react": "17.0.1",
    "react-native": "0.64.2",
    "react-native-easy-grid": "^0.2.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-largelist-v3": "^3.1.0-rc.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-modal": "^12.0.3",
    "react-native-permissions": "^3.0.5",
    "react-native-popup-menu": "^0.15.11",
    "react-native-progress": "^5.0.0",
    "react-native-reanimated": "^2.2.0",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-share": "^6.4.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-spring-scrollview": "^2.0.3",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^8.1.0",
    "react-native-view-pdf": "^0.11.0",
    "react-redux": "^7.2.4",
    "realm": "^10.6.1",
    "redux": "^4.1.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "rn-fetch-blob": "^0.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

the object has an item it is not empty. the render function is not calling. I have tried to console there but still have no result. here is my console.

image Screenshot_1627727596

zoobibackups commented 3 years ago

solved by installing latest version of "react-native-spring-scrollview": "^3.0.1-rc.5", I have install "react-native-spring-scrollview": "^2.0.3",

bolan9999 commented 3 years ago

update springscrollview to 3.0.1-rc.5

AftabUfaq commented 3 years ago

update springscrollview to 3.0.1-rc.5

done this and works fine but wasted my whole day :(