![React React](/uploads/1/2/4/7/124751862/730257836.gif)
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.
React Native ScrollView - Learn React Native in simple and easy steps starting from basic to advanced concepts with examples including Overview, Environment Setup. May 15, 2019 react-native-largelist. React-native-largelist is a very high performance large list component for React-Native. (iOS & Android) Now V3 is available. Large data source list component, items reused by group, Less CPU/Memory usage. Never blanks. Fully Cross-platform bounces (iOS & Android). Highly customize Refreshing.
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.
Documentation
Check out our dedicated documentation page for info about this library, API reference and more:Documentation Reference
Preview
In my app I'm using
Dev01Dev01<ScrollView />
to view pages of a book scrolling horizontally. When a user gets to the end of the <ScrollView />
there is a bounce that shows a white area to the right that is only visible if the user drags the last page to the left. I want to add some text there that says 'The End' vertically. How can I add content to the right of the <ScrollView />
in the bounce area?6,0801212 gold badges5252 silver badges9393 bronze badges
2 Answers
I ALMOST figured it out. This is close but shows up in the right side of the last page but not off the page on the right in the bounce area. I want it to show up 'to the right of the page' not 'on the right side of the page.' Any other ideas?
Create a
<View style={styles.end} />
with this style:Place it right before the
Dev01Dev01<ScrollView />
and put whatever you want to show inside of the View component with the 'theEnd' style.6,0801212 gold badges5252 silver badges9393 bronze badges
This probably doesn't apply to your content, but I had the same situation except with a large image for the
ScrollView
content. I wanted both horizontal and vertical scrolling, where the edge of the image would show up only in the bounce margin. I figured out that the scale
transformation works great for this:So the image takes up 110% of the height and width of its box (which is then inside a yet smaller
ScrollView
).EDIT: FYI, after testing, discovered this only works on iOS, not Android. (Android won't allow vertical scrolling if you set horizontal to true, and also I think it didn't render the parts outside of the normal viewing area, so the bounce margin was empty.)
OnyxiteOnyxite