I want to have a floating custom scrollbar over a normal scrollbar, I have no idea how I can translate current scroll position so that it's reflected on my custom floating scrollbar, which has two components, background and the moving thumb thing!

//import * as React from 'react';
import { View, Animated, ScrollView } from 'react-native';
import React, { useState, useEffect,useRef } from 'react'


export default CustomScrollBarOverNormalScrollBar = (props) => 
{
    const onScroll = () =>
    {
        console.log('User scrolled');
    };

    return(
    <View style={{flex:1}}>
        <ScrollView showsVerticalScrollIndicator={false} scrollEventThrottle={16} style={{flex:1,backgroundColor:'white',position:'relative'}} 
            onScroll={onScroll}>
                <View style={{ width:'100%', height:700, backgroundColor:'rgb(235,235,235)' }}></View>
        </ScrollView>
        <View style={{width:'100%',height:100,position:'absolute',bottom:0,left:0}}>
            {/*CUSTOM SCROLLBAR COMPONENT START*/}
            <View style={{ width:20,height:100,borderRadius:25,backgroundColor:'rgb(235,235,235)',overflow:'hidden',position:'absolute',right:0,top:0 }}>
                <View style={{ width:'100%',height:30,backgroundColor:'red',borderRadius:25 }}></View>   
            </View>
            {/*CUSTOM SCROLLBAR COMPONENT END*/}
        </View>
    </View>
    );    
};