Quiero tener una barra de desplazamiento personalizada flotante sobre una barra de desplazamiento normal, no tengo idea de cómo puedo traducir la posición de desplazamiento actual para que se refleje en mi barra de desplazamiento flotante personalizada, que tiene dos componentes, el fondo y el movimiento del pulgar.

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