[Help needed] Vote for React Native's feature requests so we can improve the plugin

[bd-arc]

Hey there,

We're really pleased with how the plugin has grown over the past few months: there is now a large user base and it is used in numerous apps. We're proud of that and we want to thank you all for your appreciation and for making the most out of it! 😊 You've motivated us to devote countless hours maintaining and regularly improving the plugin, and we've been happy to give back to the community.

But now we're starting to feel tired of fighting React Native's core again and again, to work around the many issues of the FlatList and ScrollView components while knowing that the next critical one is just around the corner.

Now is the time to let the React Native team know how badly we need them to improve those components! 💢 (and then we'll make the plugin even better, of course 😉)

The main issues of the ScrollView/VirtualizedList/FlatList components are the following:

• there is no scrollEnd event
• scrollTo method doesn't accept any callback
• Android's scrollTo animation is quite brutal
• it is not possible to specify a scroll duration
• there are performance issues.

React Native has a dedicated canny for feature requests. Here are the ones that need your vote the most:

• [ScrollView] Add completion callback to scrollTo
• snapToInterval for Android
• Add speed attribute to scrollTo
• Bring ios only methods to Android ScrollView
• ScrollView Animation Events (e.g. onScrollAnimationEnd)

If you find other feature requests or React Native issues that are relevant, do not hesitate to list them in this thread so we can vote together as a group and help putting the focus on those.

Remember that every vote counts ✊

[batmanhit]

I am doing it now.

[florentroques]

Done!

I added a pull request to add visibility to this issue on readme file.
Another suggestion:
show this issue link when a user is installing the plugin

[Eyesonly88]

Done!

[nadavoran]

Done!

[ifyapishore]

+!

[adamski]

Done, thanks for your efforts on this!

[ssssssssssss]

Dear @bd-arc , I think the snapToInterval for Android has been merge to RN master last time I check. facebook/react-native@b2848a5

[bd-arc]

Hey @ssssssssssss,

Thanks for keeping me posted. Unfortunately, I don't think that the feature has been implemented yet since two PRs address it but none has been merged so far...

• [ANDROID] Add snapToInterval support for horizontal ScrollView facebook/react-native#15297
• Add snapToInterval support for Android ScrollView facebook/react-native#15667

[bd-arc]

@ssssssssssss Apparently you were right, but the feature was added in another commit: facebook/react-native@ddd65f1

Can't wait to see version 0.53.0 land and try it out!

[Adirael]

That's awesome!

Hopefully a vertical snap PR will be accepted soon. On the two PRs mentioned by @bd-arc is deemed as not as useful, but now that we have the horizontal one merged it's a good time to do the vertical too.

[bd-arc]

@Adirael I agree with you, and that's exactly what I said in this comment to one of the PR.

Unfortunately, if snapToAlignment and vertical handling aren't also implemented, we won't be able to really improve the plugin...

[khaledwj90]

+1

[bd-arc]

This recent commit smells pretty good!

The version 0.58 of React Native might finally gives us the means to improve the plugin drastically. Wait and see ;-)

[Titozzz]

@bd-arc I linked it in the community discussion to try and get it in 0.57.4

[Titozzz]

@kelset gave me that link : facebook/react-native@ef7e99c

Turns out it's already here in 0.57 @bd-arc , so what are the next steps

[bd-arc]

@Titozzz Well, a huge bunch of tests awaits us then! We need to see how props snapToInterval and snapToOffsets behave on both iOS and Android.

If someone wants to jump in and create a few public test cases on Snack, this would be awesome!

There is one problem though: we still don't have a proper callback mechanism. The aim is to ditch the current hacky solution altogether, but there is no way to do that until something is implemented on the native side by the Facebook team...

[RWOverdijk]

Update? for this

Implemented fully for both vertical and horizontal scroll views in facebook/react-native@fd744dd. This will make it in the next release 0.58

[tobiaslins]

Take a look at https://github.com/CrowdLinker/react-native-pager
It's made with reanimated to tackle the performance issues

Just as an inspiration for future development. Still love this library tho

[RWOverdijk]

Looks good. Don't appreciate the offtopic spam though.

[bd-arc]

@RWOverdijk I appreciate the intent ;-) A lot of goodness might come from what @tobiaslins has created though.

@tobiaslins Well, I find your plugin really interesting! Just took a look at the source code and it seems you're on your way of achieving what I've been postponing for years — see #40 and #250 if you want to know what I mean.

Quick questions:

1. How have you addressed memory issues with huge numbers of items?
2. Could you share your roadmap? Does it include a loop feature?
3. Would you be interested in finding a way to "blend" our respective plugins? Obviously this needs to be discussed in length; I just want to get the temperature at this point :-)

[tobiaslins]

@bd-arc
"Sadly" I havn't built this library. I just did a small PR and I'm using it in a new app I'm building with focus on high performance (using lot of rn-reanimated stuff)

The creator is @ajsmth maybe he can answer you this questions. Would love to see you working out something together!! Keep up the great work!

[ajsmth]

hey there -- i would say that the repo is still immature so please take my answers with a grain of salt

1. a combination of slicing children to fake out "virtualization" and a ton of memoization. reanimated uses mutable nodes so child slides rerender as little as possible. i would say the ability to slice children is the most important aspect of handling larger lists, and reanimated is crucial to handling smooth animation

2. i am in the process of building another library that uses the pager heavily, if something comes along that i absolutely need from the pager itself then i might add to it, but the core api and features are set for the time being -- my focus is on fixing bugs and issues that surface as I use it more and more. there are a couple implementations for a loop feature that i have in mind, but its not a priority right now as it's something that can be achieved with wrapper components

3. i'm always open to discuss / chat about this!

cheers

[bd-arc]

@ajsmth Thanks a lot for your answers!

I'm really interested in what you've created because using such a base for this plugin would mean no more pesky FlatList bugs (🙏), better animations and, at last, some control over it.

As I see it, the tricky parts are:

• the handling of large lists
• the loop feature
• the dynamic addition/removal of items.

You seem to have a great vision about dealing with all this. If you are, or anyone else is, interested in adding those features to your pager, I'll be more than happy to "connect the dots" with the rest and make the end result the new carousel!

Let me know what you think.

[ajsmth]

no problem!

from what i can tell the only missing feature from your list there is the loop feature. as i said above, i've been focused on a few other things at the moment so this will likely take some time, but it's something i'll keep in mind. if anyone else is willing to give this a shot, feel free to reach out

[nihp]

I have a suggestion. While scrolling from one card to another in First example gif we need to add a scroll animation too.

i.e) If we scroll a nook means it shows a scroll animation. I need that support too in my app. So we can show the scroll animation here

[bd-arc]

It was more than time to give this plugin a heavy lifting!

Happy to report that 90% of the job is already done. Now I need you all to test, provide feedback, and even jump in if you feel like it 😉

Click here to learn everything about the upcoming v4!

[MKaidan]

Discord spoke about their issues with FlatList in this blog post: https://discord.com/blog/how-discord-achieves-native-ios-performance-with-react-native

Their solution was a new, custom-made FastList component: https://gist.github.com/derekstavis/d8f6a00e14a4259224aafafab14ffd3e

Perhaps this can help you with performance and the other issues you've listed.