How to get touch coordinates for cardStyleInterpolator

[IslamRustamov]

I have two screens. On the first screen I have a list of items. When I press on the item, I want to navigate to next screen. I want to have a custom transition to this next screen. I want it to "originate" from the item I touched. Take a look at the code below:

const cardStyleInterpolator: StackCardStyleInterpolator = ({
  current,
  next,
  inverted,
  layouts: { screen },
}) => {
  const progress = Animated.add(
    current.progress.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 1],
    }),
    next
      ? next.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        })
      : 0
  );

  return {
    cardStyle: {
      transform: [
        {
          translateX: Animated.multiply(
            progress.interpolate({
              inputRange: [0, 1],
              outputRange: [
                screen.width,
                0,
              ],
            }),
            inverted
          ),
        },
        {
          translateY: Animated.multiply(
            progress.interpolate({
              inputRange: [0, 1],
              outputRange: [
                screen.height,
                0,
              ],
            }),
            inverted
          ),
        },
        {
          scale: Animated.multiply(
            progress.interpolate({
              inputRange: [0, 1],
              outputRange: [
                0,
                1,
              ],
            }),
            inverted
          ),
        },
      ],
    },
  };
};

function App(): React.JSX.Element {
  return (
    <SafeAreaView style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator  screenOptions={{ cardStyleInterpolator }}>
          <Stack.Screen name="MainScreen" component={MainScreen} />
          <Stack.Screen name="ReelsScreen" component={ReelsScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  );
}

This just shows the next screen from the bottom right, but I want to show screen from a custom x,y location on the screen.

What are the best ways to pass custom values to cardStyleInterpolator?

[satya164]

You could store the coordinates in a variable outside the component and read that variable inside cardStyleInterpolator, then clear it once the animation finishes.

[IslamRustamov]

I kind of did it, I stored coordinates in Zustand store and read them in cardStyleInterpolator (and it worked), but it just didn't really look like a clean solution to me, so I hoped for some other suggestions