feat: add useCardAnimation (#11568)

**Motivation**

Make animation progress available inside a screen.

**Test plan**

Describe the **steps to test this change** so that a reviewer can verify
it. Provide screenshots or videos if the change affects UI.

The change must pass lint, typescript and tests.

packages/material-top-tabs/src/index.tsx

@@ -9,6 +9,11 @@ export { createMaterialTopTabNavigator } from './navigators/createMaterialTopTab
 export { MaterialTopTabBar } from './views/MaterialTopTabBar';
 export { MaterialTopTabView } from './views/MaterialTopTabView';
 
+/**
+ * Utilities
+ */
+export { useTabAnimation } from './utils/useTabAnimation';
+
 /**
  * Types
  */

packages/material-top-tabs/src/types.tsx

@@ -10,6 +10,7 @@ import type {
 } from '@react-navigation/native';
 import type React from 'react';
 import type {
+  Animated,
   PressableAndroidRippleConfig,
   StyleProp,
   TextStyle,
@@ -299,3 +300,7 @@ export type MaterialTopTabBarProps = SceneRendererProps & {
   >;
   descriptors: MaterialTopTabDescriptorMap;
 };
+
+export type MaterialTopTabAnimationContext = {
+  position: Animated.AnimatedInterpolation<number>;
+};

packages/material-top-tabs/src/utils/TabAnimationContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import type { MaterialTopTabAnimationContext } from '../types';
+
+export const TabAnimationContext = React.createContext<
+  MaterialTopTabAnimationContext | undefined
+>(undefined);

packages/material-top-tabs/src/utils/useTabAnimation.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { TabAnimationContext } from './TabAnimationContext';
+
+export function useTabAnimation() {
+  const animation = React.useContext(TabAnimationContext);
+
+  if (animation === undefined) {
+    throw new Error(
+      "Couldn't find values for tab animation. Are you inside a screen in Material Top Tab navigator?"
+    );
+  }
+
+  return animation;
+}

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -15,6 +15,7 @@ import type {
   MaterialTopTabNavigationConfig,
   MaterialTopTabNavigationHelpers,
 } from '../types';
+import { TabAnimationContext } from '../utils/TabAnimationContext';
 import { MaterialTopTabBar } from './MaterialTopTabBar';
 
 type Props = MaterialTopTabNavigationConfig & {
@@ -56,7 +57,11 @@ export function MaterialTopTabView({
           target: state.key,
         });
       }}
-      renderScene={({ route }) => descriptors[route.key].render()}
+      renderScene={({ route, position }) => (
+        <TabAnimationContext.Provider value={{ position }}>
+          {descriptors[route.key].render()}
+        </TabAnimationContext.Provider>
+      )}
       navigationState={state}
       renderTabBar={renderTabBar}
       renderLazyPlaceholder={({ route }) =>