Right now, React Native ListView supports loading more data only in one direction, towards the end. If I add data towards the beginning, then it'll jump the scroll position.
Also, the ListView calls onEndReached in only in one direction.
Is there any way to implement a bi-directional ListView so that I can load more items in either direction without jumping the scroll position?
This is useful in case like, say the user came from a notification to an old item. So it'll be ideal to take the user to that part. Then as the user can scroll in either direction, I'll need to load data in either direction, without affecting scroll position.
Related
In my application I want to create a couple animations on my FlatList.
For example, after fetching the data and feeding it to the list I want the items that should be visible to slide from the left. When I'm scrolling each item (at the top) that supposed to disappear will slide out to the right and each item that should appear (at the bottom) should slide from the left. Is it possible in React Native?
I only managed to create one type of animation - items sliding right when they are about to disappear, but I don't have any idea how to make the items to appear from the left.
My Animated.View can receive only one type of transform. So how can create different types of input/output ranges for the top and the bottom of the list?
I tried to find some examples on the internet but couldn't find any for multiple animations, only for one type.
I think you will find React Native Reanimated's Entering and Exiting Animations API
useful for this task. It greatly simplifies animations like this in my experience.
In case you want to get more control. Using a FlatList, you can also use its onScroll prop to get the current value for YOffset (contentOffset.y) via the Reanimated useAnimatedScrollHandler. Thus you can figure out how much has been scrolled.
Which you could then use to manually apply any translateX's required to the Animated.View of whatever items the flatlist is rendering. The logic you'll of course have to figure out though. But it's a start.
Be sure to do any animation interpolates using UI thread worklets on Reanimated only. Good luck!
I was researching this since last year from time to time. I always wonder how Instagram handles the feeds screen?
What kind a component they using for it?
I'm sure it's not a ScrollView becouse it's much more performant than a ScrollView.
It is not also a FlatList becouse I know the basics of the FlatList how it renders the rows etc... and I am sure that they don't use it. For example a FlatList renders the items on top of each other like a card stack. In this behavior you cannot achieve the current Pinch Zoom feature that they have.
I thought maybe they use flipkart's RecyclerListView which is based on Java and much more performant than ScrollView and FlatList, but I am not quite sure about that too.
Any ideas about what they using to achieve current functionality on the feeds screen?
I mean, is there a method or specific listing component to achieve same behavior with all the functions like Double Tap to Like, like Pinch Zoom with overlaying everything.
#Quick note about pinch zooming, it's nearly impossible to build a component with current states of ScrollView and FlatList which will be performant and has same functionality.
You can check out my other topic about that here
Long story short, I have tried a lot of methods and 3rd party components to achieve same thing, but still could not do it.
Thanks for your thoughts!
I'm building a month view calendar and need to be able to swipe left and right for next and previous months.
I'm currently using a horizontal FlatList for this, which works great going forward in time (scrolling right). It just adds months to the end of the list. But I can't figure out how to effectively scroll back in time (scrolling left). When I add items to the left side of the data, the scroll position gets jerky.
I am resetting the scroll index when a new item is added to the beginning of the data array, and that works in a perfect world. But the problem comes when a scroll action is in motion while the index is being updated. In that case, the scroll position gets jerky.
Has anyone solved this problem?
I would like to create a carousel that scrolls automatically until the user scrolls / touches the ScrollView itself.
The auto-scrolling itself works fine with using scrollView.scrollTo but how could I detect if the user is interacting with the ScrollView? I took a look at the onScroll event but this does not seem to distinct between a user generated event and an event that was generated by calling scrollTo.
Also I'd like to know if it is possible to get the current scroll position from the ScrollView directly instead of reading it everytime from the onScroll event.
I'm very thankful for any tips and suggestions.
By digging into ScrollView's source code you can notice a few undocumented callbacks that will help you achieve what you're after, namely onTouchStart and onTouchEnd. These two callbacks are triggered only when user interacts with the ScrollView and not when you scroll programmatically.
You will probably want to clear your auto-scroll interval on onTouchStart and restart it after a delay on onTouchEnd.
Regarding your next question, the answer is no. As far as I know, no getter is currently exposed to retrieve the current scroll position. Therefore, you need to rely on the event passed to onScroll, retrieve event.nativeEvent.contentOffset['x' or 'y'], and store it in your component's state.
Note that if you're doing some heavy animations that need to follow scroll position closely (e.g. animated header or parallax image), it would be a good idea to use the native driver for Animated.event. You can learn more about it on React Native's blog.
I'm trying to implement scroll-then-fix using NavigationExperimental. (Medium android app implements this.)
First I need to make NavigationHeader scroll with the content instead of fixed at the top. And the Navigation fixed at the top when scrolling to certain position.
My first attempt is let NavigationHeader listen to the scroll event of the NavigationCard, here's the problem:
How do NavigationHeader/NavigationCard communicate each other? NavigationHeader needs to know the scroll position of the NavigationCard to change the state. But they are two separate components.
Or maybe there's an smarter way doing this? Thanks for your help!