How can i style the scroll indicator in react native scrollbar

Question

I want to add some style to the my scroll indicator in vertical scrollbar use in react native.I want to make the scroll indicator more wider than default size so that the user will clearly see the scroll indicator. As well as i want to change the colors and some other stuffs in scroll indicator.

How can i do so. is it possible to stlye the scroll indicator in vertical scroll view in react native..

Should be compatible in any platform too

Answer 1

you should add Listener on scroll then create a custom view and transform it due to scrollListener and invisible scroll indicator this is simple implementation of what you want:

class CustomScrollview extends PureComponent {
    state = {
        indicator: new Animated.Value(0),
        wholeHeight: 1,
        visibleHeight: 0
    }
    render() {
        const indicatorSize = this.state.wholeHeight > this.state.visibleHeight ?
            this.state.visibleHeight * this.state.visibleHeight / this.state.wholeHeight :
            this.state.visibleHeight

        const difference = this.state.visibleHeight > indicatorSize ? this.state.visibleHeight - indicatorSize : 1
        return (
            <View >
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    onContentSizeChange={(width, height) => {
                        this.setState({ wholeHeight: height })
                    }}
                    onLayout={({ nativeEvent: { layout: { x, y, width, height } } }) => this.setState({ visibleHeight: height })}
                    scrollEventThrottle={16}
                    onScroll={Animated.event(
                        [{ nativeEvent: { contentOffset: { y: this.state.indicator } } }]
                    )}>


                </ScrollView >
                <View style={styles.indicatorWrapper} />
                <Animated.View style={[
                    styles.indicator, {
                        height: indicatorSize,
                        transform: [{
                            translateY: Animated.multiply(this.state.indicator, this.state.visibleHeight / this.state.wholeHeight).interpolate({
                                inputRange: [0, difference],
                                outputRange: [0, difference],
                                extrapolate: 'clamp'
                            })
                        }]
                    }]} />

            </View>
        )
    }
}

hope this help!

Answer 2

You can use indicatorStyle props of ScrollView for change color, but it supports only three color white, black or default. You can set insets of the indicator using scrollIndicatorInsets props. For more custom style you can use react-native-scroll-indicator.