Props.progress issue after updating react reanimated to 2.3.0 - react-native

Question

I was working with react native reanimated 1.13.1, but I decided to upgrade because of the new content and new features. I have been trying to fix an animation that I had on my Custom Drawer the animation consists on scaling the screen differently when the user accesses the drawer. It was working perfectly on 1.13.1 but on 2.3.0 I can't seem to get the scaling right with props.progress.
This is the code for the drawer.
import React, { useEffect } from 'react';
import { Container } from './styles';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { Register } from '../../screens/Register';
import { CustomDrawerContent } from '../CustomDrawerContent';
import { Dashboard } from '../../screens/Dashboard';
import { Summary } from '../../screens/Summary';
//REDUX
import { connect } from 'react-redux';
import { setSelectedTab } from '../../stores/tab/tabActions';
import { Settings } from '../../screens/Settings';
import { useSharedValue, interpolate, useAnimatedStyle, Extrapolate, withTiming } from 'react-native-reanimated';
const Drawer = createDrawerNavigator();
function CustomDrawer({ selectedTab, setSelectedTab }: any){
function setDefaultOnlyOnce() {
setSelectedTab('Dashboard');
}
let progress = useSharedValue(0);
const scale: any = useAnimatedStyle(() => {
return {
transform: [{
scale: interpolate(
progress.value,
[0, 1],
[1, 0.8],
Extrapolate.CLAMP
)
}]
};
})
const borderRadius: any = useAnimatedStyle(() => {
return {
borderRadius: interpolate(
progress.value,
[0, 1],
[0, 26],
Extrapolate.CLAMP
)
};
})
const animatedStyle = [[ borderRadius, scale ]];
useEffect(() => {
setDefaultOnlyOnce();
}, [])
return (
<Container>
<Drawer.Navigator
drawerType='slide'
overlayColor='transparent'
drawerStyle={{
flex: 1,
width: '70%',
paddingRight: 20,
backgroundColor: 'transparent'
}}
initialRouteName="Dashboard"
drawerContent={props => {
setTimeout(() => {
progress.value = 1;
/*
PREVIOUS VERSION:
setProgress(props.progress as any);
*/
}, 0);
return <CustomDrawerContent
navigation={props.navigation}
selectedTab={selectedTab}
setSelectedTab={setSelectedTab}
/>
}}
>
<Drawer.Screen name="Dashboard">
{props => <Dashboard drawerAnimationStyle={animatedStyle} />}
</Drawer.Screen>
<Drawer.Screen name="Register">
{props => <Register drawerAnimationStyle={animatedStyle} setSelectedTab={setSelectedTab}/>}
</Drawer.Screen>
<Drawer.Screen name="Summary">
{props => <Summary drawerAnimationStyle={animatedStyle}/>}
</Drawer.Screen>
<Drawer.Screen name="Settings">
{props => <Settings drawerAnimationStyle={animatedStyle}/>}
</Drawer.Screen>
</Drawer.Navigator>
</Container>
);
}
function mapStateToProps(state: any) {
return {
selectedTab: state.tabReducer.selectedTab
}
}
function mapDispatchToProps(dispatch: any) {
return {
setSelectedTab: (selectedTab: any) => { return dispatch(setSelectedTab(selectedTab)) }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(CustomDrawer);
I think that the problem might be on setting progress.value where previously it setted the progress with props.progress but that doesn't seem to work for the new version.
When the progress.value is 0 the screen is completely filled (Drawer is closed) and when the progress.value is 1 the screen is resized and the drawer is opened. This, altered in the previous version with the props.progress being set on drawerContent