fix: make header subviews subscribe to transition (#820)

Added change to ScreenStackHeaderConfig.java to expose the Toolbar, of which the ScreenStackHeaderSubviews are the children. It is needed since the Toolbar is not a child of Screen in the view hierarchy, therefore its children are not subscribed to the transition by default. Then, in the prepareOutTransition, we add a check for ScreenStackHeaderConfig and apply the transition to the children of its Toolbar making them stay on the screen for during the transition of going back.

Author: WoLewicki

TestsExample/App.js

@@ -29,6 +29,7 @@ import Test748 from './src/Test748';
 import Test750 from './src/Test750';
 import Test765 from './src/Test765';
 import Test780 from './src/Test780';
+import Test817 from './src/Test817';
 import Test831 from './src/Test831';
 
 enableScreens();

TestsExample/src/Test817.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/display-name */
+import React from "react";
+import { View, Text, Button } from "react-native";
+
+import { NavigationContainer, ParamListBase } from "@react-navigation/native";
+import { createNativeStackNavigator, NativeStackNavigationProp } from "react-native-screens/native-stack";
+
+const Stack = createNativeStackNavigator();
+
+const App = (): JSX.Element => {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator
+        screenOptions={{
+          stackAnimation: "slide_from_right",
+        }}
+      >
+        <Stack.Screen
+          name="Home"
+          component={Home}
+        />
+        <Stack.Screen
+          name="Notifications"
+          component={Notifications}
+          options={{
+            headerCenter: () => <Text>Hello!</Text>,
+            headerRight: () => <Text>Some other text</Text>,
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+function Home({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+  return (
+    <View>
+      <Button
+        title="Navigate"
+        onPress={() => navigation.navigate("Notifications")}
+      />
+    </View>
+  )
+}
+
+function Notifications() {
+  return <View />;
+}
+
+export default App;

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

@@ -318,6 +318,10 @@ private void maybeUpdate() {
     }
   }
 
+  public Toolbar getToolbar() {
+    return mToolbar;
+  }
+
   public ScreenStackHeaderSubview getConfigSubview(int index) {
     return mConfigSubviews.get(index);
   }

android/src/main/java/com/swmansion/rnscreens/ScreenStackViewManager.java

@@ -44,6 +44,11 @@ private void startTransitionRecursive(ViewGroup parent) {
     for (int i = 0, size = parent.getChildCount(); i < size; i++) {
       View child = parent.getChildAt(i);
       parent.startViewTransition(child);
+      if (child instanceof ScreenStackHeaderConfig) {
+        // we want to start transition on children of the toolbar too,
+        // which is not a child of ScreenStackHeaderConfig
+        startTransitionRecursive(((ScreenStackHeaderConfig) child).getToolbar());
+      }
       if (child instanceof ViewGroup) {
         startTransitionRecursive((ViewGroup) child);
       }