-
stream-chat-react-native
💬 React-Native Chat SDK ➜ Stream Chat. Includes a tutorial on building your own chat app experience using React-Native, React-Navigation and Stream
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
There have been many discussions on Stack Overflow and GitHub around implementing infinite scroll using React Native, on top of FlatList or SectionList. I've found that there aren't any easy solution out there for bidirectional infinite scroll, which works on both Android and iOS. Recently, while working on v3.0.0 of React Native Chat SDK at Stream, we added bidirectional infinite scroll to our chat components. We had to jump through plenty of hurdles to make it happen while maintaining a good user experience around scrolling (especially for Android). Thus we decided to publish an excellent and small open-source package, on top of FlatList, to make this task easier for other React Native developers.
I hope you found it useful. Feel free to add some questions, comments, and feedback here. And don't forget to put a ⭐ on github repo. Happy Coding!!
FlatList from React Native has built-in support for infinite scroll in a single direction (from the end of the list). You can add a prop onEndReachedon FlatList. This function gets called when your scroll is near the end of the list, and thus you can append more items to the list from this function. You can Google for React Native infinite scrolling, and you will find plenty of examples for this. Unfortunately, the FlatList doesn't provide any similar prop for onStartReached for infinite scrolling in other directions. We have added support for this prop as part of this package by simply adding the onScroll handler on FlatList, and executing the callback function (onStartReached) when the scroll is near the start of the list. If you take a look at the implementation of VirtualizedList, you will notice that onEndReachedfunction gets called only once per content length. That's there for a good purpose - to avoid redundant function calls on every scroll position change. Similar optimizations have been done for onStartReached within this package.
FlatList from React Native accepts a prop - maintainVisibleContentPosition, which makes sure your scroll doesn't jump to the end of the list when more items are added to the list. But this prop is only supported on iOS for now. So taking some inspiration from this PR, we published our separate package to add support for this prop on Android - flat-list-mvcp. And thus @stream-io/flat-list-mvcp is a dependency of the react-native-bidirectional-scroll package.