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.
Related
I have a simple question: why is onViewableItemsChanged called at initial render without a horizontal flatlist being even visible? This flatlist is only shown when scrolling to it.
How can I fix this?
Thank you!
It is also possible for onViewableItemsChanged to be called during the initial render of a FlatList, even if the list is not yet visible on the screen. This can happen if the initialNumToRender prop of the FlatList is set to a value greater than 0, causing the FlatList to render more items than the ones that are currently visible on the screen.
In such cases, the onViewableItemsChanged callback will receive the list of viewable items that have been rendered, but they will not yet be visible to the user. This is the expected behavior of the FlatList component, and it is designed to optimize the performance of the list by pre-rendering items that are likely to become visible in the near future.
If you want to avoid having onViewableItemsChanged being called during the initial render, you can set the initialNumToRender prop to 0, or use other techniques to control the visibility of the FlatList component, such as conditional rendering based on a state variable or a prop passed from the parent component.
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
My screen layout is SectionList inside a View and on onEndReached I am calling an API to get paginated data successfully (LoadMore behaviour).
As, SectionList is covering only 40% part of screen, I tried adding ScrollView so that complete screen becomes scrollable.
Problem: When the screen loads it fetches the initial paginated data. After rendering the UI, onEndReached event gets fired which in-turn calls api to get load more data again. This runs in loop until the complete data is fetched.
Has anyone faced the same issue. Any solution how to stop that.
Instead of adding a SectionList inside ScrollView, What you can do is by adding your above view (i.e. your other 60% area) as header of the SectionList. This way your entire screen will be treated as SectionList, and onEndReached will only gets called when user performs scroll.
I want ScrollView to scroll more fast because it take 1sec time to scroll end even if it scroll little distance.
Does ScrollView have a option of change scroll speed?
or Do I have a another way?
sorry, but the office doc does not support changing scroll speed of ScrollView component. if you need, you can try to write a new native scrollView.
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