After perusing the React Native Documentation I couldn't seem to find out how to make a <ScrollView>
have a persistent scrollbar that doesn't fade out. How would I achieve that?
You can set showsHorizontalScrollIndicator={true} or showsVerticalScrollIndicator={true} to set the scroll indicator visible even when not scrolling.
The ScrollView is a generic scrolling container that can contain multiple components and views. The scrollable items can be heterogeneous, and you can scroll both vertically and horizontally (by setting the horizontal property).
Infinite scrolling is a technique that constantly loads data as the user scrolls down the page, removing the need for pagination. This tutorial will use React Native to create infinite scrolling and FlashList to render the data.
Auto scroll is provided out of the box by react native. The ScrollView component by react native has props to scroll to the desired co-ordinates on the screen. There are two such props in ScrollView: ScrollTo(): takes the x and y offset coordinates and scrolls to that position.
The underlying iOS native component, UIScrollView
(technically, RCTEnhancedScrollView
), doesn't support keeping the scroll indicators visible. For this reason, the React Native wrapper around it won't either.
There is a hack to get this working with the native component (see this answer for one approach). To accomplish this in React Native, you'd need to implement this hack on the native side, and then either create your own Native Module or fork React Native and modify their ScrollView component.
That said, the iOS Scroll View interface guidelines discourage this, so you may want to leave the indicators' behavior alone.
A few approaches:
<item name="android:overScrollMode">always</item>
,android:fadeScrollbars="false"
in XML, orScrollView.setScrollbarFadingEnabled(false)
in Java (e.g. in your custom native bridge code)This is similarly discouraged as nonstandard UI unless you have a strong reason for it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With