srivastavaanurag79 / react-native-paper-select

Dropdown using React Native Paper TextInput, Checkbox and Dialog
https://anurag-srivastava.gitbook.io/react-native-paper-select/
MIT License
48 stars 15 forks source link

fix: long select won't scroll #34

Closed Thodor12 closed 1 year ago

Thodor12 commented 1 year ago

A long select list, despite implementation, doesn't actually want to enable scrolling.

I don't know 100% certain if this will actually fix it, but by design the dialog scroll area should not be wrapped within a dialog content, see: https://callstack.github.io/react-native-paper/docs/components/Dialog/DialogScrollArea I also removed the 2 properties from the ScrollView that controlled the display of the scrollbar.

I limited the dialog height as I always do using:

            dialogStyle={Object.assign(
                {
                    maxHeight: 0.9 * Dimensions.get("window").height,
                },
                props.dialogStyle,
            )}

and whilst it does limit the height, it pushes the buttons down and the scrolling isn't being applied at all. All of my other dialogs function the same way, and this is the only problematic dialog.

srivastavaanurag79 commented 1 year ago

Will test and merge it.

srivastavaanurag79 commented 1 year ago

I tried testing for 1 Lakh = 0.1 Million records, but the app freezes and won't open the modal, and then the app crash. used for loop to replicate 1 Lakh records:

for (let i = 0; i < 100000; i++) {
    _tempList.push({
        _id: Math.round(Math.random() * 1000) + 22 + 'TEST',
        value: 'OTHERS' + i,
    });
}

up to 2500 records the modal opens after that app freezes and then crashes

Emulator specs: 8GB ROM, 1.5GB RAM

image

I guess the specs are too low, which is why it keeps getting crashed above 2.5K records

Thodor12 commented 1 year ago

That is one problem with the scrolling list, it's not very performant. I only barely got more items that it just went out of the view, not that many.

For large amounts there is a library called https://github.com/Shopify/flash-list which is faster at rendering by only rendering on screen items aswell as rendering using a predefined height per item so that the list height is not constantly updating as much.

I used it within my project as I have other pages where it needs to render a large list of checkboxes, text inputs, etc, and it made my list perform much better. Potentially this is an idea for a future version?

srivastavaanurag79 commented 1 year ago

Maybe for future version but I don't want the package to be dependent on any other 3rd party package