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.
Related
I'm trying to find a react-native equivalent to Window.scroll() method.
I did my research and considered giving a ref to the ScrollView and using scrollTo() method, just like described here, but my parent ScrollView is composed of sibling components and passing refs among them seems like an overkill.
Is there a simpler method, without relying on refs and scrollTo() methods, in React Native so that when the button is pressed, the screen scrolls down by a certain amount, let's say 100 pixels, nothing more nothing less, just simple as that? Did my research but couldn't find any...any suggestions?
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
I have a React Native View, that I would like to allow the user to refresh by pulling down, this View contains fixed content that fits on one screen without the need to scroll, and I have used flex to position the elements to utilised the hold screen.
A quick google tells me I need a RefreshControl, but it seems this must be used in conjunction with a ScrollView.
When I try to apply these two controls to my View I get undesired effects:
Scrolls bars that I don't need, although these can be disabled via props
Flex now responds in a different way, the flex items dont expand to the container, which makes sense because its a scrollable container.
Help :)
I would indeed reuse RefreshControl in ScrollView, instead creating a RefreshControl behavior yourself.
As you mentioned, scroll indicators can be hidden by setting the correct props. In addition it is possible to disable scrolling with the scrollEnabled flag.
A ScrollView uses a built-in content container that wraps all the views inside. You can set flex style props for this view as well.
<ScrollView contentContainerStyle={{flex: 1}}>
{/* child views */}
</ScrollView>
I have a Flatlist inside animated ScrollView. Flatlist has onEndReached implemented with threshold set to 0.5. The problem I am facing is onEndReached keeps triggering without even scrolling.
I have an article view with a body. I want to load the comments when user reaches the end of article body, and onEndReached should only trigger when comments end is reached.
Please suggest if I should deal with the problem differently, I am stuck on this for quite a while.
Since I cannot do without the ScrollView, I fixed this by setting a fixed height for FlatList in style, and set nestedScrollEnabled to true for both ScrollView and FlatList.
That's said there's a long ScrollView with lots of contents, and there's another component at the bottom of the page. I'm trying to lazy-rendering the bottom component when user scroll down enough. Is there any library has implemented this?
(I'm aware of ListView's onEndReached, but not quite sure if that helpful for this case.)
Appreciate if anyone could guide me a direction.
I create a simple lib for this:
https://github.com/chunghe/react-native-defer-renderer
basically you could get scroll position from the onScroll event of the ScrollView (e.nativeEvent.contentOffset), pass the scroll position to the child component. Then in the child component, you could get the distance from top from onLayout event (e.nativeEvent.layout.y).
That's pretty much all the tricks.
Put it at the end of the ScrollView?
ScrollViews do this by default:
removeClippedSubviews bool
Experimental: When true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This can improve scrolling performance on long lists. The default value is true.
https://facebook.github.io/react-native/docs/scrollview.html#removeclippedsubviews