How to specified position from element react-native - react-native

Question

i have a little problem.
I have a tabNavigator in which I have placed an element that must move according to the selected view.
My problem is that I can't specify exactly the position of tabscreen
I can make my element move close to the selection but it is not exactly at the same place
Here is a screenshot to show you what I can do for the moment the green element represents the element that must move.
Screen for this problem
my code :
const [positionX, setPositionX] = useState(new Animated.Value(0));
const animate = (x) => {
console.log("animate");
Animated.timing(positionX, {
toValue: x,
duration: 600,
useNativeDriver: true,
}).start();
};
return (
<NavigationContainer>
<Tab.Navigator
tabBar={(props) => {
console.log(props);
return (
<View
style={{
width: "100%",
height: 50,
backgroundColor: "red",
display: "flex",
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
}}
>
<Animated.View
style={{
transform: [{ translateX: positionX }],
position: "absolute",
width: 60,
height: 10,
backgroundColor: "green",
bottom: 50,
left: 0,
}}
></Animated.View>
{routes.map((route, index) => {
return (
<TouchableOpacity
style={{
width: 60,
height: 50,
backgroundColor: "blue",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
onPress={(event) => {
console.log(event.nativeEvent);
animate(
event.nativeEvent.pageX - event.nativeEvent.locationX
);
}}
onLayout={(event) => console.log(event.nativeEvent)}
key={index}
>
<Text>{route.name}</Text>
</TouchableOpacity>
);
})}
</View>
);
}}
initialRouteName="Home"
tabBarShowLabel={false}
screenOptions={{
tabBarShowLabel: false,
headerShown: false,
tabBarStyle: {
backgroundColor: "white",
borderTopColor: "#000",
height: 60,
bottom: 20,
width: "90%",
left: 20,
right: 20,
borderRadius: 15,
position: "absolute",
elevation: 0,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.53,
shadowRadius: 13.97,
elevation: 21,
},
}}
>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
<Tab.Screen name="Like" component={LikeScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
I would like my element to be placed at the click for example above Home or Settings... at the click.