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

Answer 1

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

Answer 2

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 3

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>
    );
}