in my react-native app when scroll position is higher than 0 I want to smoothly animate a circle view to be like 25% smaller:

transform: [{ scaleX: .8 }, { scaleY: .8 }]

when user scrolls back to top I want the circle to smoothly animate back to normal size:

//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, alignItems:'center',justifyContent:'center'}}>
            {/*TI WANT TO SCALE THIS CIRCLE*/}
            <View style={{ width:100,height:100,borderRadius:100%2,backgroundColor:'red' }}>  </View>
            {/*I WANT TO SCALE THIS CIRCLE*/}
        </View>
    </View>
    );    
};