Permanently visible Scroll Bar for ScrollView (React Native)

Question

I just found that there is no permanent Scroll bar for ScrollView. I went through all the documentation and google but I don't think it actually exists.

How do we implement permanent Scroll Bar for <ScrollView>? How do we keep Scroll Bar visible?

Answer 1

ScrollView has a prop called persistentScrollbar.

You can set the boolean to be true by adding persistentScrollbar={true} to make scrollbars visible permanently, even when they are not in use.

This only works for Android.

React Native's Official Documentation

Answer 2

If you just want the user to know that the scroll is there a solution for iOS (persistentScrollbar={true} is all you need for Android)...is to set the scroll bar indicator to flash for a couple seconds after loading.

I set it to flash a half second after loading because I like the user to have moment to take in the page before the indicator flashes (flash length is preset by Apple but it fades in and out over two seconds which is more then enough for the user to know it is there)

export type ScrollViewRef = ScrollView & {
    flashScrollIndicators: () => void;
};

const My Page: React.FC<IProps> = (props) => {

    const scrollViewRef = React.useRef<ScrollViewRef | null>(null);

    useEffect(() => {
        setTimeout(function () {
            scrollViewRef.current?.flashScrollIndicators();
        }, 500);
    }, []);

    <ScrollView persistentScrollbar={true} ref={scrollViewRef}>
          my content that needs scrolling
   </ScollView>

Answer 3

It's simple.

<ScrollView showsVerticalScrollIndicator={true} persistentScrollbar={true}></ScrollView>

Answer 4

you can not show / visible ScrollIndicator all the time as far as I know. Its ScrollView default behaviour, Indicator will only be visible (fade-in) when you scroll list and fadeout once scroll has stopped animating

Answer 5

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

Usage:-

render(){
    return(
        <View>
            <ScrollView showsVerticalScrollIndicator={true}>
               ...
            </ScrollView>
        </View>
    );
}

Answer 6

There is scroll bar is available on <scrollview>...

here is the code...

import React, { Component } from 'react';
import { Text, Image, View, StyleSheet, ScrollView } from 'react-native';

class ScrollViewExample extends Component {
   state = {
      names: [
         {'name': 'Ben', 'id': 1},
         {'name': 'Susan', 'id': 2},
         {'name': 'Robert', 'id': 3},
         {'name': 'Mary', 'id': 4},
         {'name': 'Daniel', 'id': 5},
         {'name': 'Laura', 'id': 6},
         {'name': 'John', 'id': 7},
         {'name': 'Debra', 'id': 8},
         {'name': 'Aron', 'id': 9},
         {'name': 'Ann', 'id': 10},
         {'name': 'Steve', 'id': 11},
         {'name': 'Olivia', 'id': 12}
      ]
   }
   render() {
      return (
         <View>
            <ScrollView>
               {
                  this.state.names.map((item, index) => (
                     <View key = {item.id} style = {styles.item}>
                        <Text>{item.name}</Text>
                     </View>
                  ))
               }
            </ScrollView>
         </View>
      )
   }
}
export default ScrollViewExample

const styles = StyleSheet.create ({
   item: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      padding: 30,
      margin: 2,
      borderColor: '#2a4944',
      borderWidth: 1,
      backgroundColor: '#d2f7f1'
   }
})

just use import ScrollView