I need a custom screen transition for my react native app

Question

I am making an app where I need multiple screen transitions. Right now I have the animation ready to the point where it is doing what I desire, but the problem lies at where the screen transition starts. For example, I want the screen transition to start from the point where I tap on the button just like Instagram Stories; when you tap on an Instagram Story, it starts to animate from that image.

I have tried shared element and sharedTransitonTag, but I guess they are for the image which are common between screens. I need an algorithm or something that make this animation just like in Instagram Stories

This is My App.tsx

const Stack = createStackNavigator();

const customTransition = {
 transitionSpec: {
 open: {
  animation: 'timing',
  config: {
    duration: 800,
  },
},
close: {
  animation: 'timing',
  config: {
    duration: 300,
  },
 },
 },
 cardStyleInterpolator: ({current, next, layouts}) => {
 return {
  cardStyle: {
    transform: [
      {
        scaleX: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
      {
        scaleY: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 1],
        }),
      },
      {
        translateX: next
          ? next.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.width, 0],
            })
          : current.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.width, 0],
            }),
      },
      {
        translateY: next
          ? next.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [layouts.screen.height, 0],
            })
          : current.progress.interpolate({
              inputRange: [0, 0],
              outputRange: [layouts.screen.height, 0],
            }),
      },
    ],
  },
};
},
};

 const AppStack = () => {
 return (
 <Stack.Navigator
  screenOptions={{
    ...customTransition,
    headerShown: false,
    presentation: 'transparentModal',
  }}>
  <Stack.Screen name="Back" component={TabScreens} />
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Story" component={StoryScreen} />
 </Stack.Navigator>
 );
  };

 const App: React.FC = () => {
 return (
  <GestureHandlerRootView style={{flex: 1}}>
  <NavigationContainer>
    <AppStack />
  </NavigationContainer>
  </GestureHandlerRootView>
  );
  };
export default App;

Answer 1

I used transition tags for it and it worked.