feat(iOS, Stack v5): Align Stack implementation with RFC 753 (#3774)

Closes
software-mansion/react-native-screens-labs#1050
Closes
software-mansion/react-native-screens-labs#864
Closes
software-mansion/react-native-screens-labs#816

## Description

This PR aligns the current Stack implementation with RFC 753 by adding
an operations queue that enables us to defer the application of JS
differences in a batch that moves the stack from one consistent state to
another. The implementation has been adapted from Android
implementation, with key difference being the absence of FragmentManager
along with its FragmentOperations. These are handled within
RNSStackNavigationController.

## Changes

- Introduced pendingPopOperations and pendingPushOperations that form a
queue and need not be applied immediately.
- Replaced swift controllers with objective-c to remove the need of
interoperability: given the amount of props, enums, customizations that
will be present in the future, I think it's better to avoid the interop
entirely

## Before & after - visual documentation

no visual changes

## Test plan

Use `Tests.Issue.TestScreenStack` to test various scenarios, verify the
state in the logs. Run `Tests.Issue.Test3576` to check a specific
scenario that caused problems on the android.

## Checklist

- [ ] Ensured that CI passes

---------

Co-authored-by: Kacper Kafara <kacperkafara@gmail.com>

Author: kmichalikk

apps/src/shared/gamma/containers/stack/StackContainer.types.tsx

@@ -20,6 +20,7 @@ export type StackRouteConfig = {
 export type StackRoute = StackRouteConfig & {
   activityMode: StackScreenProps['activityMode'];
   routeKey: StackScreenProps['screenKey'];
+  isMarkedForDismissal: Boolean, // whether this route is during or after dismissal process
 };
 
 /// StackContainer props

apps/src/shared/gamma/containers/stack/reducer.tsx

@@ -81,7 +81,7 @@ function navigationActionPushHandler(
   const stack = state.stack;
   const renderedRouteIndex = stack.findIndex(
     route =>
-      route.name === action.routeName && route.activityMode === 'detached',
+      route.name === action.routeName && route.activityMode === 'detached' && !route.isMarkedForDismissal,
   );
 
   if (renderedRouteIndex !== NOT_FOUND_INDEX) {
@@ -161,12 +161,21 @@ function navigationActionPopHandler(
     return state;
   }
 
+  // Pop operation on not-top screen is forbidden and might crash.
+  const topAttachedRouteIndex = state.stack.findLastIndex(r => r.activityMode === 'attached');
+
+  if (topAttachedRouteIndex > routeIndex) {
+    console.warn(`[Stack] Can not perform pop action on route: ${action.routeKey} - not a top screen`);
+    return state;
+  }
+
   const newStack = [...stack];
   // NOTE: This modifies existing state, possibly impacting calculations done before new state is updated.
   // Consider doing deep copy of the state here.
   // EDIT: not sure really whether this is really a problem or not, since the updates are queued
   // and the original state won't be immediatelly affected.
   route.activityMode = 'detached';
+  route.isMarkedForDismissal = true;
 
   return stateWithStack(state, newStack);
 }
@@ -266,6 +275,7 @@ function createRouteFromConfig(
     ...config,
     activityMode,
     routeKey: generateRouteKeyForRouteName(config.name),
+    isMarkedForDismissal: false,
   };
 }
 
@@ -312,7 +322,7 @@ function applyPush(state: StackState, newRoute: StackRoute): StackState {
     route => route.activityMode === 'attached',
   );
 
-  if (lastAttachedIndex === -1) {
+  if (lastAttachedIndex === NOT_FOUND_INDEX) {
     throw new Error(
       `[Stack] Invalid stack state: there should be at least one attached route on the stack.`,
     );

apps/src/tests/single-feature-tests/stack-v5/index.ts

@@ -3,12 +3,14 @@ import PreventNativeDismissSingleStack from './prevent-native-dismiss-single-sta
 import PreventNativeDismissNestedStack from './prevent-native-dismiss-nested-stack';
 import AnimationAndroid from './test-animation-android';
 import TestStackHeaderModes from './test-stack-header-modes';
+import TestStackSimpleNav from './test-stack-simple-nav';
 
 const scenarios = {
   PreventNativeDismissSingleStack,
   PreventNativeDismissNestedStack,
   AnimationAndroid,
   TestStackHeaderModes,
+  TestStackSimpleNav,
 };
 
 const StackScenarioGroup: ScenarioGroup<keyof typeof scenarios> = {

apps/src/tests/single-feature-tests/stack-v5/test-stack-simple-nav/index.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import type { Scenario } from '@apps/tests/shared/helpers';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  StackContainer,
+  useStackNavigationContext,
+} from '@apps/shared/gamma/containers/stack';
+import { CenteredLayoutView } from '@apps/shared/CenteredLayoutView';
+import Colors from '@apps/shared/styling/Colors';
+import { StackNavigationButtons } from '@apps/tests/shared/components/stack-v5/StackNavigationButtons';
+
+const SCENARIO: Scenario = {
+  name: 'Simple navigation scenario',
+  key: 'test-stack-simple-nav',
+  details:
+    'Test simple push and pop operations',
+  platforms: ['android', 'ios'],
+  AppComponent: App,
+};
+
+export default SCENARIO;
+
+export function App() {
+  return (
+    <StackSetup />
+  );
+}
+
+function StackSetup() {
+  return (
+    <StackContainer
+      routeConfigs={[
+        {
+          name: 'Home',
+          Component: HomeScreen,
+          options: {},
+        },
+        {
+          name: 'A',
+          Component: AScreen,
+          options: {},
+        },
+        {
+          name: 'B',
+          Component: BScreen,
+          options: {},
+        },
+      ]}
+    />
+  );
+}
+
+function HomeScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.BlueLight40 }}>
+      <RouteInformation routeName="Home" />
+      <StackNavigationButtons isPopEnabled={false} routeNames={['A', 'B']} />
+    </CenteredLayoutView>
+  );
+}
+
+function AScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.YellowLight40 }}>
+      <RouteInformation routeName="A" />
+      <StackNavigationButtons isPopEnabled={true} routeNames={['A', 'B']} />
+    </CenteredLayoutView>
+  );
+}
+
+function BScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.GreenLight100 }}>
+      <RouteInformation routeName="B" />
+      <StackNavigationButtons isPopEnabled={true} routeNames={['A', 'B']} />
+    </CenteredLayoutView>
+  );
+}
+
+function RouteInformation(props: { routeName: string }) {
+  const routeKey = useStackNavigationContext().routeKey;
+
+  return (
+    <View>
+      <Text style={styles.routeInformation}>Name: {props.routeName}</Text>
+      <Text style={styles.routeInformation}>Key: {routeKey}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  routeInformation: {
+    color: 'black',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});

ios/gamma/stack/host/RNSStackController.swift

@@ -1,18 +1,12 @@
 #pragma once
 
 #import "RNSReactBaseView.h"
-
-@class RNSStackController;
-@class RNSStackScreenComponentView;
+#import "RNSStackScreenComponentView.h"
 
 NS_ASSUME_NONNULL_BEGIN
 
 @interface RNSStackHostComponentView : RNSReactBaseView
 
-@property (nonatomic, nonnull, strong, readonly) RNSStackController *stackController;
-
-- (nonnull NSMutableArray<RNSStackScreenComponentView *> *)reactSubviews;
-
 @end
 
 #pragma mark - Communication with StackScreen