I try to render a dropdown-picker (react-native-dropdownpicker) in a sectionlist but it's impossable to scroll the content of the dropdown. It only shows the first results.
I tried many things with zIndex, view with flex: 1 as parent but im unable to find the solution.
Is it possible to render in a sectionlist or should i be looking for another solution?
sectionlist with dropdown-picker
I think this is what you want.
List Modes
You have 3 options when choosing the list mode.
DEFAULT
FLATLIST
SCROLLVIEW
MODAL
listMode="FLATLIST"
Notes
The FlatList component shouldn't be nested inside ScrollView or you'll come across the VirtualizedLists should never be nested inside plain ScrollViews warning.
If this happens to you and you only have a few items, consider using the SCROLLVIEW mode. Otherwise, you have to use the MODAL mode.
Take a look at this snack:
https://snack.expo.dev/#devsaeedhabibi/dropdown-picker
Related
i have a ScrollView as a parent,inside ScrollView i need to add FlatList and SectionList and when i serve the app it shows warning of:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
I used nestedScrollEnabled={true} in FlatList but what about SectionList. It continuously showing same warning. if anyone has solutions for this please do let me know.
I want to do this layout:
Currently I do the layout by this way:
menu is belong to the below part and i marginTop: -30 for it to above the image
FlatList is absolute view and have zIndex bigger than Menu. FlatList have dynamic data and each item of FlatList have textInput to search data ( look at this pic )
I have tried 2 ways:
First way:
I used for the list filtered data, it is limited by the Flatlist area so that my filtered list cannot display fully, just 2 rows visible, the rest of filtered data is invisible. I have tried increase the height of the Flatlist and now I can see the filtered list fully but I cannot click the menu button because menu is overived by the Flatlist,
Second way
I use Modal and tried with this library: react-native-modal-dropdown, I can reach my expertation UI but because it use Modal so when Modal is appearing, my textInput in Item is loss focus, so that I cannot continually input to TextInput until I close the Modal.
Do you guys have any solution for it? Thanks in advance
The modal component use the native Modal, you won't be able to interact with elements outside it while it is still visible.
I am not sure to understand why you cannot use View to display the results, but maybe you could try with FlatList ?
I'm trying to get the top header of my SectionList (not the individual section headings) to stick on the page, so other items are allowed to scroll underneath.
The prop "stickyHeaderIndices={[0]}" does the intended job on FlatList, but not SectionList. Is there an easy workaround for this?
What is structure different between FlatList and ScrollView in react native?
It seems to they equal to each other for scrolling view in the application, but ScrollView is very simple rather than FlatList, so when we must use FlatList in code?
There's a big difference between FlatList and ScrollView
ScrollView will load the items (data for scrolling) immediately after the component has been loaded. As a result, all data will be stored in RAM, and you will be unable to use hundreds or thousands of items in it (due to low performance).
FlatList, on the other hand, has a better solution for this problem; it will mount 10 items (by default) to the screen, and as the user scrolls the view, other items will mount.
It's a significant advantage to use FlatList instead of ScrollView.
You can use ScrollView for a small number of items and FlatList for even 10000 items.
A really big difference that no one seems to be pointing out here is that component state is not maintained with the FlatList component but is maintained with ScrollView. This is due to the fact that ScrollView renders all the children in one go and maintains them. Meanwhile, FlatList unmounts components once they are way off the screen and recreates them from scratch once the item comes back from screen (thus state is lost).
They have different usages.
FlatList is built to render a large list of items. If you check the documentation, you need to pass an array of data and then render each item in the array with the renderItem callback. It is optimized to have very good performances with very large arrays because it actually only renders the items that need to be displayed at the moment.
ScrollView is built to render a generic content in a way that it scrolls when the content is bigger than the ScrollView itself. You don't pass an array of data, but you put elements inside the ScrollView in the same way you would use a normal View. Be careful however, it does not provide the same optimization of the flat list for very long content.
As a rule of thumb:
Do you need to render a list of similar items from an array? Use FlatList
Do you need to render generic content in a scrollable container? Use ScrollView
I am trying to develop a profile screen which has the persons profile pic, name, etc in the header as well as tabs that determines which data gets displayed in the FlatList below. I want the header component to be scrollable with the FlatList so that the header does not take up screen space while scrolling the FlatList. Also, the header's tabs will change the data that gets render in the list. I have tried two approaches but neither one has worked. Including the header and flatlist inside of a scrollview causes the flatlist to continually call onEndReach until all of the data is returned, but I also read that this is not recommended. The second approach was setting the ListHeaderComponent on the flatlist to the header component, but every time a tab is change the entire screen reloads. I am looking to have the header scrollable as if it were part of the flatlist, and only the flatlist re-render when a tab is pressed. Similar to what Instagram has with their profile screen. Any help with this issue would be much appreciated.