React navigation custom scale Transition animation like when app opens - react-native

Question

I wanted to create a zoom out effect when a button is pressed for my next screen, a custom transition like when apps are pressed from the homescreen and splash screen comes out of it.
I have tried transitionConfig in stackNavigator and used a custom transition with following code
let sharedElementTransition = (index, position,touchPosition, height) => {
const inputRange = [index - 1, index, index + 1];
const outputRange = [0.1, 1, 1];
const opacity = position.interpolate({
inputRange,
outputRange: [0, 1, 1],
});
const scale = position.interpolate({
inputRange:[0, 0.01, 0.99, 1],
outputRange:[0.3, 0.3, 1, 1],
});
const translateX = position.interpolate({
inputRange,
outputRange: [touchPosition.x, 0, 0]
})
const translateY = position.interpolate({
inputRange,
outputRange: [touchPosition.y, 0, 0]
})
return {
opacity,
transform: [
{scale},
{ translateX },
{ translateY },
]
};
};
The problem I am facing is scaling starts from middle of the screen , so if i pass the position as (237,16) top right corner of the screen , I can't get translateX and translateY to animate properly as the scale of the next screen is smaller the screen size (we are animating the next screen from the button pressed in the last screen) so its co-ordinate system doesn't have a point (237,16).
This is not a shared element animation problem, I also tried https://github.com/fram-x/FluidTransitions recommended in the react navigation docs, but under this one (from its example, there is no extensive documentation) my screens which are under FluidNavigator never seems to have a header.