Permanently visible Scroll Bar for ScrollView (React Native)

It's simple.

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

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


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>

Tags:

React Native