corrects

Author: LKuchno

apps/src/tests/single-feature-tests/tabs/test-tabs-events/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 import type { ScenarioDescription } from '@apps/tests/shared/helpers';
 import { createScenario } from '@apps/tests/shared/helpers';
@@ -16,7 +16,7 @@ const scenarioDescription: ScenarioDescription = {
   name: 'Tabs lifecycle events',
   key: 'test-tabs-events',
   details:
-    'Verifies onWillAppear, onDidAppear, onWillDisappear, onDidDisappear fire in the correct order when switching tabs.',
+    'Verify lifecycle events (onWillAppear, etc.) fire on tab switch',
   platforms: ['ios', 'android'],
 };
 
@@ -62,35 +62,38 @@ function AppContents() {
     [toast],
   );
 
-  const TAB_CONFIGS: TabRouteConfig[] = [
-    {
-      name: 'TabA',
-      Component: TabScreen,
-      options: {
-        ...DEFAULT_TAB_ROUTE_OPTIONS,
-        title: 'Tab A',
-        ...makeCallbacks('TabA'),
+  const TAB_CONFIGS = useMemo<TabRouteConfig[]>(
+    () => [
+      {
+        name: 'TabA',
+        Component: TabScreen,
+        options: {
+          ...DEFAULT_TAB_ROUTE_OPTIONS,
+          title: 'Tab A',
+          ...makeCallbacks('TabA'),
+        },
       },
-    },
-    {
-      name: 'TabB',
-      Component: TabScreen,
-      options: {
-        ...DEFAULT_TAB_ROUTE_OPTIONS,
-        title: 'Tab B',
-        ...makeCallbacks('TabB'),
+      {
+        name: 'TabB',
+        Component: TabScreen,
+        options: {
+          ...DEFAULT_TAB_ROUTE_OPTIONS,
+          title: 'Tab B',
+          ...makeCallbacks('TabB'),
+        },
       },
-    },
-    {
-      name: 'TabC',
-      Component: TabScreen,
-      options: {
-        ...DEFAULT_TAB_ROUTE_OPTIONS,
-        title: 'Tab C',
-        ...makeCallbacks('TabC'),
+      {
+        name: 'TabC',
+        Component: TabScreen,
+        options: {
+          ...DEFAULT_TAB_ROUTE_OPTIONS,
+          title: 'Tab C',
+          ...makeCallbacks('TabC'),
+        },
       },
-    },
-  ];
+    ],
+    [makeCallbacks],
+  );
 
   return <TabsContainer routeConfigs={TAB_CONFIGS} />;
 }

apps/src/tests/single-feature-tests/tabs/test-tabs-events/scenario.md

@@ -32,8 +32,10 @@ Other: ongoing research
   2. `TabX: onDidDisappear`
   3. `TabY: onWillAppear`
   4. `TabY: onDidAppear`
-- Toasts stack and dismiss automatically; observe each toast color and
-  label as it appears. To dismiss a toast manually, tap it.
+- Toasts stack and dismiss automatically. To dismiss a toast manually,
+  tap it. Toast background colors by event type:
+  `onWillAppear` — green, `onWillDisappear` — light navy,
+  `onDidAppear` — light blue, `onDidDisappear` — dark navy.
 - Re-tapping the currently active tab must not fire any lifecycle events.
 
 ## Steps
@@ -54,38 +56,62 @@ Other: ongoing research
 
 2. Tap **Tab B** in the tab bar.
 
-- [ ] Expected: The content area switches to show "TabB". Four toast
-  notifications appear in a platform-specific order:
-  - `TabB: onWillAppear` (green background)
-  - `TabA: onWillDisappear` (light navy background)
-  - `TabB: onDidAppear` (light blue background)
-  - `TabA: onDidDisappear` (dark navy background)
+- [ ] Expected: The content area switches to show "TabB". Four toasts
+  appear in the following platform-specific order:
+
+  **iOS:**
+  1. `TabB: onWillAppear`
+  2. `TabA: onWillDisappear`
+  3. `TabB: onDidAppear`
+  4. `TabA: onDidDisappear`
+
+  **Android:**
+  1. `TabA: onWillDisappear`
+  2. `TabA: onDidDisappear`
+  3. `TabB: onWillAppear`
+  4. `TabB: onDidAppear`
 
 ---
 
 ### Tab B → Tab C transition
 
 3. Tap **Tab C** in the tab bar.
 
-- [ ] Expected: The content area switches to show "TabC". Four toast
-  notifications appear in a platform-specific order:
-  - `TabC: onWillAppear` (green background)
-  - `TabB: onWillDisappear` (light navy background)
-  - `TabC: onDidAppear` (light blue background)  
-  - `TabB: onDidDisappear` (dark navy background)
+- [ ] Expected: The content area switches to show "TabC". Four toasts
+  appear in the following platform-specific order:
+
+  **iOS:**
+  1. `TabC: onWillAppear`
+  2. `TabB: onWillDisappear`
+  3. `TabC: onDidAppear`
+  4. `TabB: onDidDisappear`
+
+  **Android:**
+  1. `TabB: onWillDisappear`
+  2. `TabB: onDidDisappear`
+  3. `TabC: onWillAppear`
+  4. `TabC: onDidAppear`
 
 ---
 
 ### Tab C → Tab A transition
 
 4. Tap **Tab A** in the tab bar.
 
-- [ ] Expected: The content area switches to show "TabA". Four toast
-  notifications appear in a platform-specific order:
-  - `TabA: onWillAppear` (green background)  
-  - `TabC: onWillDisappear` (light navy background)
-  - `TabA: onDidAppear` (light blue background)
-  - `TabC: onDidDisappear` (dark navy background)
+- [ ] Expected: The content area switches to show "TabA". Four toasts
+  appear in the following platform-specific order:
+
+  **iOS:**
+  1. `TabA: onWillAppear`
+  2. `TabC: onWillDisappear`
+  3. `TabA: onDidAppear`
+  4. `TabC: onDidDisappear`
+
+  **Android:**
+  1. `TabC: onWillDisappear`
+  2. `TabC: onDidDisappear`
+  3. `TabA: onWillAppear`
+  4. `TabA: onDidAppear`
 
 ---