20+ Perfect React Native Scroll Component Examples
1.Twitter header scroll animation in React Native
Learn How to create the twitter header scroll animation in React Native.
nathvarun/Twitter-Header-Scroll-Animation-React-Native
2.React Native Scrollable Tab Header
Custom built to fit a rather specific solution. Scrollable tabs are meant to contain information as pages.
Rather than navigation & container in one, this solution’s intent was simply to create a navigation tool.
You could pass child components representing each page where I’m returning null.
See the suggested example below.
3.React Native Scrollable Tab View Forked
React native scrollable tab view
This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple JavaScript-only implementation of it for React Native. For more information about how the animations behind this work, check out the Rebound section of the React Native Animation Guide
4.Modalize
A modal that loves scrollable content.
This component has been built with react-native-gesture-handler to address the common issue of scrolling, swipping and handling the keyboard behaviors, you can face with react-native’s modal. This component comes with a ScrollView, the default content renderer, a FlatList and a SectionList. They are all three built-in and make your life easier, just pass your content and Modalize will handle the rest for you.
Demo: https://jeremybarbet.github.io/react-native-modalize/#/
5.RNParallax (react-native-parallax-header)
A react native scroll view component with Parallax header :p
6.React Native Spring ScrollView
React Native Spring ScrollView V2 is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android)
React Native Spring ScrollView！
React Native Spring ScrollView V2 is a high performance cross-platform native bounces ScrollView for React Native.(iOS & Android) It is easy to support pulling to refresh and dragging to load more data. It is bridged from Native in V2，and resolve a big problem in V1 when Javascript thread is stuck.
Features
- High performance cross-platform native bounces ScrollView (iOS & Android)
- Simultaneous gesture on both horizontal and vertical directions.
- Smoothly scroll
- Highly customizing refreshing and loading animation. Fully support react-native-lottie. More smoothly animation.
- Scroll to any position
- Native onScroll contentOffset on both horizontal and vertical directions
- Support initialing content offset.
- Resolved no response with onRefresh and onLoading in some special case.
Demo: https://bolan9999.github.io/react-native-spring-scrollview/#/
7.React Native Scrollable Tab View Mask Bar
this component is a custom component of the react-native-scrollable-tab-view repository ,so I suggest you use this component and the combination of react-native-scrollable-tab-view.
8.React Native Scroll Spy
I’m trying to build something like scroll spy on the web with react-native section list.
As you can see in the demo there is an issue on scrolling that causing scroll jumping.
If you can help me to fix this issue please join this discussion or answer this question on StackOverflow.
9.React Native Directed Scrollview
A natively implemented scrollview component which lets you specify different scroll directions for child content.
The iOS implementation extends the default UIScrollView component, whereas the Android implementation is custom and aims to provide some limited parity with the iOS api.
10.React Native Header Scroll View
A React Native component that creates a Apple-esque large header that fades in a smaller header as you scroll.
A React Native component that mimicks Apple’s large header that fades in a smaller header as you scroll, and slightly expands as you scroll up. You can see this effect in Apple’s Messages, Books, etc.
11.React Native Headroom
A Scrollview with a header which hides when user scrolls down and reappears when user scrolls up.
12.React Native Editable List
Editable Table Component with vertical scrolling in React native
13.React Native Parallax Scroll
A ScrollView-like component that:
- Has a parallax background
- Has a parallax foreground
- Has a fixed or sticky header
- Can be nested within other views(FlatList, SectionList)
- Works on iOS and Android
14.React Scroll Paged View
Inside scroll, Full page scroll
scroll view, Inside scroll, Full page scroll, Nesting ScrollView
15.React Native Scrollable Decorator
The @scrollable decorator lets your scrollable React Native components conform to a standard interface, making it easier to compose components. This lets you compose different types of ScrollView-like components while preserving the ScrollView API, including methods like scrollTo.
16.Rodrigocs - Animated Driver
A ScrollView-like component with parallax and sticky header support.
This component now uses Native Driver by default. Remember to pass a Animated component to renderScrollComponent, by default it has Animated.ScrollView
17.React Native Input Scroll View
Mainly to achieve the following functions：
- When the keyboard pops up, the TextInput will automatically adjust to the top of the keyboard.
- When the keyboard pops up, the content of the ScrollView will not be obscured by the keyboard.
- When multiline TextInput gets focus, the selected cursor will be automatically adjusted to the top of the keyboard.
- When the multiline TextInput create new line, the new line will automatically adjust to the top of the keyboard.
- Put your finger on top of TextInput and slide ScrollView, when you lift your finger, the TextInput will not get focus.
18.React Native Image Header Scroll View
ScrollView with an image in header which becomes a navbar
A ScrollView-like component that:
- Has a fixed image header
- Keep the image as a nav bar
- Works on iOS and Android
19.An invertible ScrollView for React Native
InvertibleScrollView is a React Native scroll view that can be inverted so that content is rendered starting from the bottom, and the user must scroll down to reveal more. This is a common design in chat applications and the command-line terminals. InvertibleScrollView also supports horizontal scroll views to present content from right to left.
It conforms to ScrollableMixin so you can compose it with other scrollable components.
20.Gifted ListView
ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps
Features
- Pull-to-refresh in iOS
- Touch-to-refresh in Android
- Infinite scrolling using touch to load more
- Loader for first display
- Default view when no content to display
- Customizable (see advanced example)
- Support for section header
- Pull-to-refresh in Android
21.React Native Focus Scroll
React Native Library to detect children that are focused on ScrollView.
#react-native #ios #android
