19

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?

merry-go-round
  • 4,150
  • 7
  • 48
  • 91

5 Answers5

30

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

Simon Stroh
  • 301
  • 3
  • 6
5

It's simple.

<ScrollView showsVerticalScrollIndicator={true} persistentScrollbar={true}></ScrollView>
Dan Salomon
  • 126
  • 2
  • 4
3

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>
Auzziland
  • 78
  • 6
-4

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>
    );
}
anto-christo
  • 37
  • 5
  • 4
    At least in android the scrollbar disappears after a while. – Jan F. Jul 11 '18 at 09:17
  • 1
    showsHorizontalScrollIndicator and showsVerticalScrollIndicator are true by default. Setting them to false prevents the scrollbars from appearing when scrolling – Martin Lockett Sep 15 '18 at 13:56
-8

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

Ebîñ Râykãr
  • 42
  • 7