fix(iOS): shadow does not appear on manual transition during push and…

… pop

apps/test-examples/App.js

@@ -104,6 +104,7 @@ import Test2069 from './src/Test2069';
 import Test2118 from './src/Test2118';
 import Test2184 from './src/Test2184';
 import Test2223 from './src/Test2223';
+import Test2227 from './src/Test2227';
 import Test2229 from './src/Test2229';
 import TestScreenAnimation from './src/TestScreenAnimation';
 import TestHeader from './src/TestHeader';

apps/test-examples/src/Test2227.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {NavigationContainer} from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+import {Button, View, Text} from 'react-native';
+
+type RootStackParamList = {
+  Home: undefined;
+  Details: undefined;
+};
+
+type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>;
+type DetailsScreenProps = NativeStackScreenProps<RootStackParamList, 'Details'>;
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+function HomeScreen({navigation}: HomeScreenProps) {
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Text>Home Screen</Text>
+      <Button
+        title="Go to Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+function DetailsScreen({navigation}: DetailsScreenProps) {
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Text>Details Screen</Text>
+      <Button
+        title="Go to Details Again"
+        onPress={() => navigation.push('Details')}
+      />
+      <Button title="Go Back" onPress={() => navigation.goBack()} />
+      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{
+          fullScreenGestureEnabled: true,
+        }}>
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Details" component={DetailsScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

ios/RNSScreenStack.mm

@@ -872,6 +872,7 @@ - (void)handleSwipe:(UIPanGestureRecognizer *)gestureRecognizer
         [_interactionController cancelInteractiveTransition];
       }
       _interactionController = nil;
+      _isFullWidthSwiping = NO;
     }
     default: {
       break;

ios/RNSScreenStackAnimator.mm

@@ -9,6 +9,9 @@
 static const float RNSSlideCloseTransitionDurationProportion = 0.25 / 0.35;
 static const float RNSFadeCloseTransitionDurationProportion = 0.15 / 0.35;
 static const float RNSFadeCloseDelayTransitionDurationProportion = 0.1 / 0.35;
+// same value is used in other projects using similar approach for transistions
+// and it looks the most similar to the value used by Apple
+constexpr float RNSShadowViewMaxAlpha = 0.1;
 
 @implementation RNSScreenStackAnimator {
   UINavigationControllerOperation _operation;
@@ -105,28 +108,40 @@ - (void)animateSimplePushWithTransitionContext:(id<UIViewControllerContextTransi
     leftTransform = CGAffineTransformMakeTranslation(belowViewWidth, 0);
   }
 
+  auto shadowView = [[UIView alloc] initWithFrame:fromViewController.view.frame];
+  shadowView.backgroundColor = [UIColor blackColor];
+
   if (_operation == UINavigationControllerOperationPush) {
     toViewController.view.transform = rightTransform;
     [[transitionContext containerView] addSubview:toViewController.view];
+    [[transitionContext containerView] insertSubview:shadowView belowSubview:toViewController.view];
+    shadowView.alpha = 0.0;
+
     [UIView animateWithDuration:[self transitionDuration:transitionContext]
         animations:^{
           fromViewController.view.transform = leftTransform;
           toViewController.view.transform = CGAffineTransformIdentity;
+          shadowView.alpha = RNSShadowViewMaxAlpha;
         }
         completion:^(BOOL finished) {
+          [shadowView removeFromSuperview];
           fromViewController.view.transform = CGAffineTransformIdentity;
           toViewController.view.transform = CGAffineTransformIdentity;
           [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
         }];
   } else if (_operation == UINavigationControllerOperationPop) {
     toViewController.view.transform = leftTransform;
     [[transitionContext containerView] insertSubview:toViewController.view belowSubview:fromViewController.view];
+    [[transitionContext containerView] insertSubview:shadowView belowSubview:fromViewController.view];
+    shadowView.alpha = RNSShadowViewMaxAlpha;
 
     void (^animationBlock)(void) = ^{
       toViewController.view.transform = CGAffineTransformIdentity;
       fromViewController.view.transform = rightTransform;
+      shadowView.alpha = 0.0;
     };
     void (^completionBlock)(BOOL) = ^(BOOL finished) {
+      [shadowView removeFromSuperview];
       fromViewController.view.transform = CGAffineTransformIdentity;
       toViewController.view.transform = CGAffineTransformIdentity;
       [transitionContext completeTransition:![transitionContext transitionWasCancelled]];