feat: expose transition progress

.eslintrc.js

@@ -16,7 +16,7 @@ module.exports = {
   },
 
   settings: {
-    'import/core-modules': ['react-native-screens', 'react-native-screens/native-stack', 'react-native-screens/createNativeStackNavigator'],
+    'import/core-modules': ['react-native-screens', 'react-native-screens/native-stack', 'react-native-screens/createNativeStackNavigator', 'react-native-screens/reanimated'],
     'import/ignore': ['node_modules/react-native/index\\.js$'],
     'import/resolver': {
       node: {

TestsExample/App.js

@@ -1,6 +1,8 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
 
+import {ReanimatedScreenProvider} from 'react-native-screens/reanimated';
+
 import Test42 from './src/Test42';
 import Test111 from './src/Test111';
 import Test263 from './src/Test263';
@@ -45,12 +47,14 @@ import Test860 from './src/Test860';
 import Test861 from './src/Test861';
 import Test865 from './src/Test865';
 import Test881 from './src/Test881';
+import Test887 from './src/Test887';
 import Test898 from './src/Test898';
 import Test913 from './src/Test913';
-import Test999 from './src/Test999';
-import Test1031 from './src/Test1031';
-import Test1032 from './src/Test1032';
 
 export default function App() {
-  return <Test42 />;
+  return (
+    <ReanimatedScreenProvider>
+      <Test42 />
+    </ReanimatedScreenProvider>
+  );
 }

TestsExample/ios/Podfile.lock

@@ -271,9 +271,9 @@ PODS:
   - React-jsinspector (0.65.1)
   - react-native-appearance (0.3.4):
     - React
-  - react-native-safe-area-context (3.1.9):
+  - react-native-safe-area-context (3.2.0):
     - React-Core
-  - react-native-webview (11.0.0):
+  - react-native-webview (11.4.4):
     - React-Core
   - React-perflogger (0.65.1)
   - React-RCTActionSheet (0.65.1):
@@ -565,8 +565,8 @@ SPEC CHECKSUMS:
   React-jsiexecutor: 43f2542aed3c26e42175b339f8d37fe3dd683765
   React-jsinspector: 41e58e5b8e3e0bf061fdf725b03f2144014a8fb0
   react-native-appearance: 0f0e5fc2fcef70e03d48c8fe6b00b9158c2ba8aa
-  react-native-safe-area-context: b6e0e284002381d2ff29fa4fff42b4d8282e3c94
-  react-native-webview: 6b7950628616679d81bdd75747e50cf6de9b5a5f
+  react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79
+  react-native-webview: cc2a1fd8149a2654d1408793daa62baadfc0bd96
   React-perflogger: fd28ee1f2b5b150b00043f0301d96bd417fdc339
   React-RCTActionSheet: 7f3fa0855c346aa5d7c60f9ced16e067db6d29fa
   React-RCTAnimation: 2119a18ee26159004b001bc56404ca5dbaae6077

TestsExample/metro.config.js

@@ -11,6 +11,7 @@ const modules = [
   '@react-navigation/native',
   'react-navigation',
   'react-navigation-stack',
+  'react-native-reanimated',
   'react-native-safe-area-context',
   ...Object.keys(pack.peerDependencies),
 ];

TestsExample/src/Test765.tsx

@@ -2,28 +2,31 @@ import * as React from 'react';
 import {
   Button,
   View,
+  Animated as RNAnimated,
 } from 'react-native';
 import {
   createAppContainer,
 } from 'react-navigation';
 
 import createNativeStackNavigator, {NativeStackNavigationOptions, NativeStackNavigationProp} from 'react-native-screens/createNativeStackNavigator';	
+import {useTransitionProgress} from 'react-native-screens';
+import {useReanimatedTransitionProgress} from 'react-native-screens/reanimated';
+import Animated, {useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
 
 const DEFAULT_STACK_OPTIONS : NativeStackNavigationOptions
  = {
-	headerBackTitleVisible: false,
 	headerTintColor: 'black',
 	headerTitleStyle: {
     fontFamily: 'arial',
   },
 	headerStyle: {
-		backgroundColor: 'white',
+		backgroundColor: 'powderblue',
 	},
 	cardStyle: {
 		backgroundColor: 'white',
 	},
+  headerTitle: 'Home',
 	hideShadow: true,
-	backButtonImage: undefined,
 	headerTopInsetEnabled: false,
 };
 
@@ -52,7 +55,6 @@ function makeStacks() {
 				screen: Home,
 				navigationOptions: {
 					cardTransparent: true,
-					gestureEnabled: false,
 					stackAnimation: 'fade',
 					cardStyle: {
 						backgroundColor: 'blue',
@@ -62,7 +64,6 @@ function makeStacks() {
 		},
 		{
 			headerMode: 'none',
-			mode: 'containedModal',
 		},
 	);
 	const MainStack = createNativeStackNavigator(
@@ -71,14 +72,12 @@ function makeStacks() {
 			Home5: {
 				screen: Home,
 				navigationOptions: {
-					gestureEnabled: false,
-					stackAnimation: 'fade',
+					stackAnimation: 'slide_from_right',
 				},
 			},
 		},
 		{
 			headerMode: 'none',
-			mode: 'containedModal',
 		},
 	);
 	return MainStack;
@@ -87,8 +86,27 @@ function makeStacks() {
 export default createAppContainer(makeStacks());
 
 function Home({navigation}: {navigation: NativeStackNavigationProp}) {
+  const reaProgress = useReanimatedTransitionProgress();
+  const sv = useDerivedValue(() => (reaProgress.progress.value < 0.5 ? (reaProgress.progress.value * 50) : ((1 - reaProgress.progress.value) * 50)) + 50);
+  const reaStyle = useAnimatedStyle(() => {
+    return {
+      width: sv.value,
+      height: sv.value,
+      backgroundColor: 'blue',
+    };
+  });
+
+  const {progress} = useTransitionProgress();
+  const opacity = progress.interpolate({
+    inputRange: [0, 0.5, 1],
+    outputRange: [1.0, 0.0 ,1.0],
+    extrapolate: 'clamp',
+  });
+
   return (
     <View style={{ flex: 1, backgroundColor: 'red' }}>
+      <RNAnimated.View style={{opacity, height: 50, backgroundColor: 'green'}} />
+      <Animated.View style={reaStyle} />
       <Button title="Go forward" onPress={() => navigation.navigate("Home5")} />
       <Button title="Go back" onPress={() => navigation.goBack()} />
     </View>