Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native <ScrollView> persistent scrollbar

Tags:

react-native

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?

like image 208
Ryan McDermott Avatar asked Oct 20 '15 19:10

Ryan McDermott


People also ask

How do you always show scroll indicator React Native?

You can set showsHorizontalScrollIndicator={true} or showsVerticalScrollIndicator={true} to set the scroll indicator visible even when not scrolling.

Can scroll in ScrollView React Native?

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).

What is infinite scroll in React Native?

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.

How do you auto scroll in React Native?

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.


1 Answers

iOS

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.

Android

A few approaches:

  • set <item name="android:overScrollMode">always</item>,
  • set android:fadeScrollbars="false" in XML, or
  • set ScrollView.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.

like image 175
Aaron Brager Avatar answered Oct 02 '22 10:10

Aaron Brager