fix(Android, Stack v4): Clear supportActionBar on fragment removal to prevent ScreenStackFragment leak (#3867)

## Description

Detected retention chain:
- AppCompatDelegateImpl.mActionBar
- ToolbarActionBar.mDecorToolbar
- ToolbarWidgetWrapper.mToolbar
- DebugMenuToolbar.config
- ScreenStackHeaderConfig.mParent
- Screen.fragment

`ScreenStackHeaderConfig.onUpdate` calls
`activity.setSupportActionBar(toolbar)` on top screen updates.
`AppCompatDelegateImpl` stores the resulting `ToolbarActionBar` in
`mActionBar` for the lifetime of the activity. When a screen is popped
(and the new top screen does not install a replacement ActionBar) the
stale `ToolbarActionBar` is never released.

In `onDestroyView` of `ScreenStackFragment`, call reset SupportActionBar
to release it and the fragment. I'm storing a reference to `actionBar`
that ensures the call is skipped when the incoming screen has already
installed its own toolbar in `onUpdate`.

Closes:
software-mansion/react-native-screens-labs#1129

## Changes

- added a reference to the actionBar in ScreenStackHeaderConfig to clear
actionBar only if it's associated with that fragment and wasn't
overridden by other screen
- added onDestroyView override in ScreenStackFragment that will clear
the ActionBar
- changed `setToolbar` signature to pass a CustomToolbar, which allows
for storing the header config - HeaderConfig is nulled by React
transaction before FragmentManager sends onDestroy to
ScreenStackFragment

## Before & after - visual documentation


| Before | After |
| --- | --- |
| <video
src="https://github.com/user-attachments/assets/6d095d46-b868-4036-b8ed-120e65114711"
/> | <video
src="https://github.com/user-attachments/assets/09a29685-5b81-433d-b408-61fcd54944a0"
/> |

## Test plan

Test3867

## Checklist

- [ ] Included code example that can be used to test this change.
- [ ] For visual changes, included screenshots / GIFs / recordings
documenting the change.
- [ ] For API changes, updated relevant public types.
- [ ] Ensured that CI passes

Author: t0maboro

android/src/main/java/com/swmansion/rnscreens/ScreenModalFragment.kt

@@ -10,7 +10,6 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.ViewParent
 import android.view.WindowManager
-import androidx.appcompat.widget.Toolbar
 import androidx.fragment.app.Fragment
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.uimanager.UIManagerHelper
@@ -187,7 +186,7 @@ class ScreenModalFragment :
 
     override fun removeToolbar(): Unit = throw IllegalStateException("[RNScreens] Modal screens on Android do not support header right now")
 
-    override fun setToolbar(toolbar: Toolbar): Unit =
+    override fun setToolbar(toolbar: CustomToolbar): Unit =
         throw IllegalStateException("[RNScreens] Modal screens on Android do not support header right now")
 
     override fun setToolbarShadowHidden(hidden: Boolean): Unit =

android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.kt

@@ -14,6 +14,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.view.animation.Animation
 import android.widget.LinearLayout
+import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.widget.Toolbar
 import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.core.view.ViewCompat
@@ -57,6 +58,8 @@ class ScreenStackFragment :
     private var isToolbarShadowHidden = false
     private var isToolbarTranslucent = false
 
+    private var lastActiveHeaderConfig: ScreenStackHeaderConfig? = null
+
     private lateinit var sheetTransitionCoordinator: BottomSheetTransitionCoordinator
 
     private var lastFocusedChild: View? = null
@@ -103,7 +106,8 @@ class ScreenStackFragment :
         toolbar = null
     }
 
-    override fun setToolbar(toolbar: Toolbar) {
+    override fun setToolbar(toolbar: CustomToolbar) {
+        lastActiveHeaderConfig = toolbar.config
         appBarLayout?.addView(toolbar)
         toolbar.layoutParams =
             AppBarLayout
@@ -301,6 +305,25 @@ class ScreenStackFragment :
         super.onViewCreated(view, savedInstanceState)
     }
 
+    override fun onDestroyView() {
+        // ScreenStackHeaderConfig.onUpdate() calls activity.setSupportActionBar(toolbar) each time
+        // the top screen updates. AppCompatDelegateImpl stores the resulting ToolbarActionBar in
+        // its mActionBar field for the lifetime of the activity. When a screen is popped and the new
+        // top screen does not install a replacement action bar (e.g. headerShown: false),
+        // the stale ToolbarActionBar — and the entire object graph hanging off the toolbar is never released.
+        // When this fragment is being removed, we're clearing the activity's support action bar if it
+        // still belongs to us. This will break the retention chain:
+        // - AppCompatDelegateImpl.mActionBar
+        // - ToolbarActionBar.mDecorToolbar
+        // - ToolbarWidgetWrapper.mToolbar
+        // - DebugMenuToolbar.config
+        // - ScreenStackHeaderConfig.mParent
+        // - Screen.fragment
+        lastActiveHeaderConfig?.clearActionBarIfOwned(activity as? AppCompatActivity)
+        lastActiveHeaderConfig = null
+        super.onDestroyView()
+    }
+
     override fun onCreateAnimation(
         transit: Int,
         enter: Boolean,

android/src/main/java/com/swmansion/rnscreens/ScreenStackFragmentWrapper.kt

@@ -1,12 +1,10 @@
 package com.swmansion.rnscreens
 
-import androidx.appcompat.widget.Toolbar
-
 interface ScreenStackFragmentWrapper : ScreenFragmentWrapper {
     // Toolbar management
     fun removeToolbar()
 
-    fun setToolbar(toolbar: Toolbar)
+    fun setToolbar(toolbar: CustomToolbar)
 
     fun setToolbarShadowHidden(hidden: Boolean)
 

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.kt

@@ -9,6 +9,7 @@ import android.view.Gravity
 import android.view.View.OnClickListener
 import android.widget.ImageView
 import android.widget.TextView
+import androidx.appcompat.app.ActionBar
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.widget.Toolbar
 import androidx.fragment.app.Fragment
@@ -58,6 +59,7 @@ class ScreenStackHeaderConfig(
     private var isBackButtonHidden = false
     private var isShadowHidden = false
     private var isDestroyed = false
+    private var actionBar: ActionBar? = null
     private var backButtonInCustomView = false
     private var tintColor = 0
     private var isAttachedToWindow = false
@@ -113,6 +115,17 @@ class ScreenStackHeaderConfig(
         isDestroyed = true
     }
 
+    internal fun clearActionBarIfOwned(activity: AppCompatActivity?) {
+        actionBar?.let { ownedActionBar ->
+            activity?.let { appCompat ->
+                if (appCompat.supportActionBar === ownedActionBar) {
+                    appCompat.setSupportActionBar(null)
+                }
+            }
+        }
+        actionBar = null
+    }
+
     /**
      * Native toolbar should notify the header config component that it has completed its layout.
      */
@@ -243,15 +256,16 @@ class ScreenStackHeaderConfig(
 
         activity.setSupportActionBar(toolbar)
         // non-null toolbar is set in the line above and it is used here
-        val actionBar = requireNotNull(activity.supportActionBar)
+        val newActionBar = requireNotNull(activity.supportActionBar)
+        actionBar = newActionBar
 
         // hide back button
-        actionBar.setDisplayHomeAsUpEnabled(
+        newActionBar.setDisplayHomeAsUpEnabled(
             screenFragment?.canNavigateBack() == true && !isBackButtonHidden,
         )
 
         // title
-        actionBar.title = title
+        newActionBar.title = title
         if (TextUtils.isEmpty(title)) {
             isTitleEmpty = true
         }
@@ -325,7 +339,7 @@ class ScreenStackHeaderConfig(
                         ?: throw JSApplicationIllegalArgumentException(
                             "Back button header config view should have Image as first child",
                         )
-                actionBar.setHomeAsUpIndicator(firstChild.drawable)
+                newActionBar.setHomeAsUpIndicator(firstChild.drawable)
                 i++
                 continue
             }

apps/src/tests/issue-tests/Test3867.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { View, Text, Button, StyleSheet } from 'react-native';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+
+type RouteParamList = {
+  Home: undefined;
+  Details: undefined;
+  Settings: undefined;
+};
+
+type NavigationProp<ParamList extends ParamListBase> = {
+  navigation: NativeStackNavigationProp<ParamList>;
+};
+
+type StackNavigationProp = NavigationProp<RouteParamList>;
+
+const Stack = createNativeStackNavigator<RouteParamList>();
+
+function HomeScreen({ navigation }: StackNavigationProp) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Home Screen</Text>
+      <Button
+        title="Push Details"
+        onPress={() => navigation.navigate('Details')}
+      />
+    </View>
+  );
+}
+
+function DetailScreen({ navigation }: StackNavigationProp) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Details Screen</Text>
+      <Button
+        title="Push Settings"
+        onPress={() => navigation.navigate('Settings')}
+      />
+      <View style={styles.spacer} />
+      <Button
+        title="Pop (Go Back)"
+        onPress={() => navigation.goBack()}
+        color="red"
+      />
+    </View>
+  );
+}
+
+function DeepDetailScreen({ navigation }: StackNavigationProp) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Settings Screen</Text>
+      <View style={styles.spacer} />
+      <Button
+        title="Pop to Top"
+        onPress={() => navigation.popToTop()}
+        color="red"
+      />
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen name="Details" component={DetailScreen} />
+        <Stack.Screen name="Settings" component={DeepDetailScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    marginBottom: 10,
+  },
+  spacer: {
+    height: 20,
+  },
+});

apps/src/tests/issue-tests/index.ts

@@ -188,6 +188,7 @@ export { default as Test3793 } from './Test3793';
 export { default as Test3816 } from './Test3816';
 export { default as Test3833 } from './Test3833';
 export { default as Test3835 } from './Test3835';
+export { default as Test3867 } from './Test3867';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 // The following test was meant to demo the "go back" gesture using Reanimated
 // but the associated PR in react-navigation is currently put on hold