Large list and water fall both slow to update items #452

AftabUfaq · 2021-08-12T09:53:59Z

1: Dev Operating System window 10

2: Target OS android 11 inifnix note 10 , redemi note 8 android 10, samsumg A51 android 11, samsung j2 android 8
3: real device

4: package.json

 "react-native": "0.64.2",
 "react-native-spring-scrollview": "^3.0.1-rc.5",
 "react-native-largelist-v3": "^3.1.0-rc.1",

5.

DocumentScreen.js

import React, {useEffect, useState} from 'react'
import {SafeAreaView,View, StyleSheet, Platform} from 'react-native'
import {WaterfallList } from 'react-native-largelist-v3'
import {useSelector, useDispatch} from 'react-redux';
import Item from '../components/DocumentItem'
import { BUTTONRADIUS, COLORS, FONTS } from '../constants';
const DocumentScreen = () => {
    const {allconverteddocuments} = useSelector(state => state.ConvertedDocumentsReducer)
    const [data, setData] = useState([])
    
    useEffect(() => {
        getfiledetails(allconverteddocuments).then((data) => {
            setData(data)
        })
    },[])

   
    const renderItem = (item, index) => (
        <Item item={item} />
    )
    
    return(
    <View style={styles.mainView}>
       
        <SafeAreaView>
            <WaterfallList 
                data={data}
                bounces={false}
                numColumns={1}
                renderItem={renderItem}
                heightForItem={() => 70}
            />
        </SafeAreaView>
    </View>
    )
}

export default DocumentScreen;


const styles = StyleSheet.create({
    mainView: {
        backgroundColor:"#ffffff",
        flexGrow:1
    },
    RowView:{
        backgroundColor:"#eee",
        paddingVertical:5,
        marginHorizontal:5, 
        alignItems:"center", 
        paddingHorizontal:20 , 
        marginVertical:5,
        borderRadius:BUTTONRADIUS.medium,
        elevation: 4,
    },
    nameText:{
        color:COLORS.lightblack,
        fontFamily:FONTS.medium
    },
    typeText:{
        color:COLORS.gray,
        fontSize:12,
        fontFamily:FONTS.regular
    }
})

DocumentItem.js

import React, {useState,memo, useCallback} from 'react'
import {Text, StyleSheet, TouchableOpacity,  } from 'react-native'
import { Col, Row, Grid } from "react-native-easy-grid";
import Share from 'react-native-share';
import WORDICON from '../assets/ppticon.svg'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import {getfilesize, getdate} from '../services'
import { BUTTONRADIUS, COLORS, FONTS, SCREENS, width } from '../constants';
import * as RootNavigation from '../navigations/Rootnavigator'
import Dialog from "react-native-dialog";
import Menu, {
    MenuProvider,
    MenuOptions,
    MenuOption,
    MenuTrigger,
  } from 'react-native-popup-menu';
const Item = ({ item }) => {
    const [state, setState] = useState(false)
    const [isModalVisible, setModalVisible] = useState(false);
    const [deleteModal, setDeleteModal] = useState(false)
    const [rename , setRename] = useState("")
    
    const onOptionSelect = (value) => {
        if(value == "openfile"){
            openFile();
        }else if(value == "sharefile"){
            ShareFile()
        }else if(value == "rename"){
            RenameFile()
        }else if(value == "delete"){
            DeleteFileFunction()
        }
        setState(false);
    }
    
    const openFile = () => {
        RootNavigation.navigate(SCREENS.VIEWPDFSCREEN, {path:item.path})
    }

    const ShareFile = useCallback(function () {
        Share.open({
            url: `file://${item.path}`,
            type: 'application/pdf',
        }).then((result) => {
            console.log(result)
        }).catch((err) =>{
          
            if(err.message == "User did not share"){

            }else{
                alert('Some Error Occured please try again');
            }
        });
    }, []); 
     
    const RenameFile = () => {
        setModalVisible(true)
    }

    const onTriggerPress = () => {
        setState(true);
    }
    
    const  onBackdropPress = () =>  {
        setState(false);
    }
    
    const RenameFileFunction = () => {
        setModalVisible(false)
    }

    const DeleteFileFunction = () => {
        setDeleteModal(!deleteModal)
    }

    return (
        <Grid>
            <Row style={styles.RowView}>
                <Col size={1}>
                    <WORDICON width={40} height={40} />
                </Col>
                <Col size={4.5} style={{paddingVertical:10,}}>
                    <Row style={{justifyContent:"space-between", width:width}}>
                        <Col size={10}>
                            <Text numberOfLines={1} style={styles.nameText} >{item.filename}</Text>
                        </Col>
                        
                    </Row>

                    <Row>    
                        <Col size={1}>
                            <Text style={styles.typeText} >{getfilesize(item.size)}</Text>
                        </Col>
                        <Col size={2}>
                            <Text style={styles.typeText}>{getdate(item.lastModified)}</Text>
                        </Col>                    
                    </Row>
                </Col>
                <Col size={.7} style={{justifyContent:"center", alignItems:"flex-end"}}>
                    <Menu
                        opened={state}
                        onBackdropPress={() => onBackdropPress()}
                        onSelect={value => onOptionSelect(value)}>
                        <MenuTrigger >
                            <TouchableOpacity onPress={() => onTriggerPress()}>
                                <MaterialCommunityIcons name={"dots-vertical"} size={26} />
                            </TouchableOpacity>
                        </MenuTrigger>
                        <MenuOptions 
                            style={styles.menuView} 
                            optionsContainerStyle={styles.menuView}>
                            
                            <MenuOption value={"openfile"} style={styles.menuOptionsStyle}>
                                <MaterialCommunityIcons name={"file-pdf"} size={16} color={COLORS.lightblack}/>
                                <Text style={{...styles.menuText, marginLeft:5,}}>Open File</Text>
                            </MenuOption>
                            <MenuOption value={"sharefile"} style={styles.menuOptionsStyle}>
                                <MaterialCommunityIcons name={"share-variant"} size={16} color={COLORS.lightblack}/>
                                <Text style={{...styles.menuText, marginLeft:5,}}>Share File</Text>
                            </MenuOption>
                            <MenuOption value={"rename"} style={styles.menuOptionsStyle}>
                                <MaterialCommunityIcons name={"rename-box"} size={16} color={COLORS.lightblack}/>
                                <Text style={{...styles.menuText, marginLeft:5,}}>Rename</Text>
                            </MenuOption>
                            <MenuOption value={"delete"} style={styles.menuOptionsStyle}>
                                <MaterialCommunityIcons name={"delete"} size={16} color={COLORS.danger}/>
                                <Text style={{...styles.menuText,color:COLORS.danger, marginLeft:5,}}>Delete</Text>
                            </MenuOption>
                            
                        </MenuOptions>
                   </Menu>
                </Col>
            </Row>
            <Dialog.Container visible={isModalVisible}>
                <Dialog.Title>Rename File</Dialog.Title>
                <Dialog.Description>
                    Please Enter File Name
                </Dialog.Description>
                <Dialog.Input 
                    value={rename}
                    onChangeText={(text) => setRename(text)}
                />
                <Dialog.Button label="Cancel" style={{color:"red"}} onPress={() => setModalVisible(false)} />
                <Dialog.Button label="OK" onPress={() => RenameFileFunction()} />
            </Dialog.Container>

            <Dialog.Container visible={deleteModal}>
                <Dialog.Title>Delete File</Dialog.Title>
                <Dialog.Description>
                    Are Your Sure 
                </Dialog.Description>
                <Dialog.Button label="Cancel" onPress={() => setDeleteModal(false)} />
                <Dialog.Button label="OK" style={{color:"red"}}  onPress={() => DeleteFileFunction()} />
            </Dialog.Container>
        </Grid>
      
    )}
export default memo(Item) ;


const styles = StyleSheet.create({
    mainView: {
        backgroundColor:"#ffffff",
        flexGrow:1
    },
    RowView:{
        backgroundColor:"#eee",
      
        marginHorizontal:5, 
        alignItems:"center", 
        paddingHorizontal:10 , 
        marginVertical:5,
        borderRadius:BUTTONRADIUS.medium,
        elevation: 4,
    },
    nameText:{
        color:COLORS.lightblack,
        fontFamily:FONTS.medium
    },
    typeText:{
        color:COLORS.gray,
        fontSize:12,
        fontFamily:FONTS.regular
    },
    menuText:{
        color:COLORS.lightblack,
        fontSize:12,
        fontFamily:FONTS.regular
    },
    menuView:{
        backgroundColor:"#fff", 
        maxWidth:100, 
        borderRadius:10
    },
    menuOptionsStyle:{
        paddingHorizontal:10, 
        paddingVertical:5,
        borderBottomWidth:0,
        flexDirection:"row",
        
    }
})

tried this with memo and without memo but same result

Here is a sample video

20210812_144335.mp4

The text was updated successfully, but these errors were encountered:

bolan9999 · 2021-09-17T03:30:29Z

It seems that your item is too complicated. LargeList is reused component to resolve black screen problem when moving too fast.

baiachen · 2021-10-11T10:08:42Z

确实存在这个问题
另外想请问下FlatList 对应的是 WaterfallList组件, SectionList 对应的是 LargeList 是吗，

bolan9999 · 2021-10-12T01:26:56Z

确实存在这个问题另外想请问下FlatList 对应的是 WaterfallList组件, SectionList 对应的是 LargeList 是吗，

不是，LargeList相当于SectionList，WaterfallList是瀑布流组件

bolan9999 · 2021-10-12T01:27:31Z

注意看WaterfallList的动画

bolan9999 · 2021-10-12T01:28:22Z

1: Dev Operating System window 10

2: Target OS android 11 inifnix note 10 , redemi note 8 android 10, samsumg A51 android 11, samsung j2 android 8 3: real device

4: package.json

 "react-native": "0.64.2",
 "react-native-spring-scrollview": "^3.0.1-rc.5",
 "react-native-largelist-v3": "^3.1.0-rc.1",

5.

DocumentScreen.js

import React, {useEffect, useState} from 'react'
import {SafeAreaView,View, StyleSheet, Platform} from 'react-native'
import {WaterfallList } from 'react-native-largelist-v3'
import {useSelector, useDispatch} from 'react-redux';
import Item from '../components/DocumentItem'
import { BUTTONRADIUS, COLORS, FONTS } from '../constants';
const DocumentScreen = () => {
    const {allconverteddocuments} = useSelector(state => state.ConvertedDocumentsReducer)
    const [data, setData] = useState([])
    
    useEffect(() => {
        getfiledetails(allconverteddocuments).then((data) => {
            setData(data)
        })
    },[])

   
    const renderItem = (item, index) => (
        <Item item={item} />
    )
    
    return(
    <View style={styles.mainView}>
       
        <SafeAreaView>
            <WaterfallList 
                data={data}
                bounces={false}
                numColumns={1}
                renderItem={renderItem}
                heightForItem={() => 70}
            />
        </SafeAreaView>
    </View>
    )
}

export default DocumentScreen;


const styles = StyleSheet.create({
    mainView: {
        backgroundColor:"#ffffff",
        flexGrow:1
    },
    RowView:{
        backgroundColor:"#eee",
        paddingVertical:5,
        marginHorizontal:5, 
        alignItems:"center", 
        paddingHorizontal:20 , 
        marginVertical:5,
        borderRadius:BUTTONRADIUS.medium,
        elevation: 4,
    },
    nameText:{
        color:COLORS.lightblack,
        fontFamily:FONTS.medium
    },
    typeText:{
        color:COLORS.gray,
        fontSize:12,
        fontFamily:FONTS.regular
    }
})

DocumentItem.js

import React, {useState,memo, useCallback} from 'react'
import {Text, StyleSheet, TouchableOpacity,  } from 'react-native'
import { Col, Row, Grid } from "react-native-easy-grid";
import Share from 'react-native-share';
import WORDICON from '../assets/ppticon.svg'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import {getfilesize, getdate} from '../services'
import { BUTTONRADIUS, COLORS, FONTS, SCREENS, width } from '../constants';
import * as RootNavigation from '../navigations/Rootnavigator'
import Dialog from "react-native-dialog";
import Menu, {
    MenuProvider,
    MenuOptions,
    MenuOption,
    MenuTrigger,
  } from 'react-native-popup-menu';
const Item = ({ item }) => {
    const [state, setState] = useState(false)
    const [isModalVisible, setModalVisible] = useState(false);
    const [deleteModal, setDeleteModal] = useState(false)
    const [rename , setRename] = useState("")
    
    const onOptionSelect = (value) => {
        if(value == "openfile"){
            openFile();
        }else if(value == "sharefile"){
            ShareFile()
        }else if(value == "rename"){
            RenameFile()
        }else if(value == "delete"){
            DeleteFileFunction()
        }
        setState(false);
    }
    
    const openFile = () => {
        RootNavigation.navigate(SCREENS.VIEWPDFSCREEN, {path:item.path})
    }

    const ShareFile = useCallback(function () {
        Share.open({
            url: `file://${item.path}`,
            type: 'application/pdf',
        }).then((result) => {
            console.log(result)
        }).catch((err) =>{
          
            if(err.message == "User did not share"){

            }else{
                alert('Some Error Occured please try again');
            }
        });
    }, []); 
     
    const RenameFile = () => {
        setModalVisible(true)
    }

    const onTriggerPress = () => {
        setState(true);
    }
    
    const  onBackdropPress = () =>  {
        setState(false);
    }
    
    const RenameFileFunction = () => {
        setModalVisible(false)
    }

    const DeleteFileFunction = () => {
        setDeleteModal(!deleteModal)
    }

    return (
        <Grid>
            <Row style={styles.RowView}>
                <Col size={1}>
                    <WORDICON width={40} height={40} />
                </Col>
                <Col size={4.5} style={{paddingVertical:10,}}>
                    <Row style={{justifyContent:"space-between", width:width}}>
                        <Col size={10}>
                            <Text numberOfLines={1} style={styles.nameText} >{item.filename}</Text>
                        </Col>
                        
                    </Row>

                    <Row>    
                        <Col size={1}>
                            <Text style={styles.typeText} >{getfilesize(item.size)}</Text>
                        </Col>
                        <Col size={2}>
                            <Text style={styles.typeText}>{getdate(item.lastModified)}</Text>
                        </Col>                    
                    </Row>
                </Col>
                <Col size={.7} style={{justifyContent:"center", alignItems:"flex-end"}}>
                    <Menu
                        opened={state}
                        onBackdropPress={() => onBackdropPress()}
                        onSelect={value => onOptionSelect(value)}>
                        <MenuTrigger >
                            <TouchableOpacity onPress={() => onTriggerPress()}>
                                <MaterialCommunityIcons name={"dots-vertical"} size={26} />
                            </TouchableOpacity>
                        </MenuTrigger>
                        <MenuOptions 
                            style={styles.menuView} 
                            optionsContainerStyle={styles.menuView}>
                            
                            <MenuOption value={"openfile"} style={styles.menuOptionsStyle}>
                                <MaterialCommunityIcons name={"file-pdf"} size={16} color={COLORS.lightblack}/>
                                <Text style={{...styles.menuText, marginLeft:5,}}>Open File</Text>
                            </MenuOption>
                            <MenuOption value={"sharefile"} style={styles.menuOptionsStyle}>
                                <MaterialCommunityIcons name={"share-variant"} size={16} color={COLORS.lightblack}/>
                                <Text style={{...styles.menuText, marginLeft:5,}}>Share File</Text>
                            </MenuOption>
                            <MenuOption value={"rename"} style={styles.menuOptionsStyle}>
                                <MaterialCommunityIcons name={"rename-box"} size={16} color={COLORS.lightblack}/>
                                <Text style={{...styles.menuText, marginLeft:5,}}>Rename</Text>
                            </MenuOption>
                            <MenuOption value={"delete"} style={styles.menuOptionsStyle}>
                                <MaterialCommunityIcons name={"delete"} size={16} color={COLORS.danger}/>
                                <Text style={{...styles.menuText,color:COLORS.danger, marginLeft:5,}}>Delete</Text>
                            </MenuOption>
                            
                        </MenuOptions>
                   </Menu>
                </Col>
            </Row>
            <Dialog.Container visible={isModalVisible}>
                <Dialog.Title>Rename File</Dialog.Title>
                <Dialog.Description>
                    Please Enter File Name
                </Dialog.Description>
                <Dialog.Input 
                    value={rename}
                    onChangeText={(text) => setRename(text)}
                />
                <Dialog.Button label="Cancel" style={{color:"red"}} onPress={() => setModalVisible(false)} />
                <Dialog.Button label="OK" onPress={() => RenameFileFunction()} />
            </Dialog.Container>

            <Dialog.Container visible={deleteModal}>
                <Dialog.Title>Delete File</Dialog.Title>
                <Dialog.Description>
                    Are Your Sure 
                </Dialog.Description>
                <Dialog.Button label="Cancel" onPress={() => setDeleteModal(false)} />
                <Dialog.Button label="OK" style={{color:"red"}}  onPress={() => DeleteFileFunction()} />
            </Dialog.Container>
        </Grid>
      
    )}
export default memo(Item) ;


const styles = StyleSheet.create({
    mainView: {
        backgroundColor:"#ffffff",
        flexGrow:1
    },
    RowView:{
        backgroundColor:"#eee",
      
        marginHorizontal:5, 
        alignItems:"center", 
        paddingHorizontal:10 , 
        marginVertical:5,
        borderRadius:BUTTONRADIUS.medium,
        elevation: 4,
    },
    nameText:{
        color:COLORS.lightblack,
        fontFamily:FONTS.medium
    },
    typeText:{
        color:COLORS.gray,
        fontSize:12,
        fontFamily:FONTS.regular
    },
    menuText:{
        color:COLORS.lightblack,
        fontSize:12,
        fontFamily:FONTS.regular
    },
    menuView:{
        backgroundColor:"#fff", 
        maxWidth:100, 
        borderRadius:10
    },
    menuOptionsStyle:{
        paddingHorizontal:10, 
        paddingVertical:5,
        borderBottomWidth:0,
        flexDirection:"row",
        
    }
})

tried this with memo and without memo but same result

Here is a sample video

20210812_144335.mp4

我在尝试使用reanimated重新写LargeList的新版本。

baiachen · 2021-10-20T01:36:31Z

确实存在这个问题另外想请问下FlatList 对应的是 WaterfallList组件, SectionList 对应的是 LargeList 是吗，

不是，LargeList相当于SectionList，WaterfallList是瀑布流组件

FlatList 大列表使用您的那个组件比较合适呢？

bolan9999 · 2021-10-21T02:52:56Z

没有FlatList对应的，LargeList更改数据结构和参数就能完成FlatList的需求

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Large list and water fall both slow to update items #452

Large list and water fall both slow to update items #452

AftabUfaq commented Aug 12, 2021

bolan9999 commented Sep 17, 2021

baiachen commented Oct 11, 2021

bolan9999 commented Oct 12, 2021

bolan9999 commented Oct 12, 2021

bolan9999 commented Oct 12, 2021

baiachen commented Oct 20, 2021

bolan9999 commented Oct 21, 2021

Large list and water fall both slow to update items #452

Large list and water fall both slow to update items #452

Comments

AftabUfaq commented Aug 12, 2021

bolan9999 commented Sep 17, 2021

baiachen commented Oct 11, 2021

bolan9999 commented Oct 12, 2021

bolan9999 commented Oct 12, 2021

bolan9999 commented Oct 12, 2021

baiachen commented Oct 20, 2021

bolan9999 commented Oct 21, 2021