fix(Android): formSheet with fitToContents does not have correct height after goBack (#2789)

## Description

When fragment is reattached (on navigation back) `onCreateView` is
called which tries to configure the form sheet (that has `fitToContents`
set).
On view recreation the subtree is not laid out (the flag is cleared) &
therefore current code fails.

## Changes

We now utilise the fact, that the Screen's subtree is retained by
react-native and the components are not recreated themselves -> old
height is stored in the member variable.
We reuse it. 


## Test code and steps to reproduce

Added Test2789

## Checklist

- [x] Included code example that can be used to test this change
- [x] Ensured that CI passes

Author: kkafar

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

@@ -27,6 +27,7 @@ import com.google.android.material.shape.CornerFamily
 import com.google.android.material.shape.MaterialShapeDrawable
 import com.google.android.material.shape.ShapeAppearanceModel
 import com.swmansion.rnscreens.bottomsheet.isSheetFitToContents
+import com.swmansion.rnscreens.bottomsheet.useSingleDetent
 import com.swmansion.rnscreens.bottomsheet.usesFormSheetPresentation
 import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
 import com.swmansion.rnscreens.events.SheetDetentChangedEvent
@@ -135,11 +136,7 @@ class Screen(
         val height = bottom - top
 
         if (isSheetFitToContents()) {
-            sheetBehavior?.let {
-                if (it.maxHeight != height) {
-                    it.maxHeight = height
-                }
-            }
+            sheetBehavior?.useSingleDetent(height)
 
             if (!BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
                 // On old architecture we delay enter transition in order to wait for initial frame.

android/src/main/java/com/swmansion/rnscreens/bottomsheet/SheetDelegate.kt

@@ -130,10 +130,15 @@ class SheetDelegate(
                         behavior.apply {
                             val height =
                                 if (screen.isSheetFitToContents()) {
-                                    screen.contentWrapper
-                                        .get()
-                                        ?.height
-                                        .takeIf { screen.contentWrapper.get()?.isLaidOut == true }
+                                    screen.contentWrapper.get()?.let { contentWrapper ->
+                                        contentWrapper.height.takeIf {
+                                            // subtree might not be laid out, e.g. after fragment reattachment
+                                            // and view recreation, however since it is retained by
+                                            // react-native it has its height cached. We want to use it.
+                                            // Otherwise we would have to trigger RN layout manually.
+                                            contentWrapper.isLaidOut || contentWrapper.height > 0
+                                        }
+                                    }
                                 } else {
                                     (screen.sheetDetents.first() * containerHeight).toInt()
                                 }

apps/src/tests/Test2789.tsx

@@ -0,0 +1,92 @@
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import { NativeStackNavigationProp, createNativeStackNavigator } from '@react-navigation/native-stack';
+import React from 'react';
+import { Button, View } from 'react-native';
+
+type NavigationRouteProps<ParamList extends ParamListBase> = {
+  navigation: NativeStackNavigationProp<ParamList>;
+}
+
+type RootStackRouteParamList = {
+  RootStackHome: undefined;
+};
+
+type OneStackRouteParamList = RootStackRouteParamList & {
+  OneHome: undefined;
+}
+
+type TwoStackRouteParamList = OneStackRouteParamList & {
+  TwoHome: undefined;
+  TwoSecond: undefined;
+  TwoSheet: undefined;
+}
+
+type RootStackRouteNavProps = NavigationRouteProps<RootStackRouteParamList>;
+type TwoStackRouteNavProps = NavigationRouteProps<TwoStackRouteParamList>;
+
+
+const RootStack = createNativeStackNavigator<RootStackRouteParamList>();
+const TwoStack = createNativeStackNavigator<TwoStackRouteParamList>();
+
+function RootStackHostComponent() {
+  return (
+    <RootStack.Navigator>
+      <RootStack.Screen name="RootStackHome" component={RootStackHome} />
+    </RootStack.Navigator>
+  );
+}
+
+function RootStackHome({ }: RootStackRouteNavProps) {
+  return (
+    <TwoStackHostComponent />
+  );
+}
+
+function TwoStackHostComponent() {
+  return (
+    <TwoStack.Navigator>
+      <TwoStack.Screen name="TwoHome" component={TwoStackHome} />
+      <TwoStack.Screen name="TwoSecond" component={TwoStackSecond} />
+      <TwoStack.Screen name="TwoSheet" component={TwoStackSheet} options={{
+        presentation: 'formSheet',
+        sheetAllowedDetents: 'fitToContents',
+      }} />
+    </TwoStack.Navigator>
+  );
+}
+
+function TwoStackHome({ navigation }: TwoStackRouteNavProps) {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'palevioletred' }}>
+      <Button title="Open TwoSheet" onPress={() => navigation.navigate('TwoSheet')} />
+      <Button title="Open TwoSecond" onPress={() => navigation.navigate('TwoSecond')} />
+    </View>
+  );
+}
+
+function TwoStackSecond({ navigation }: TwoStackRouteNavProps) {
+  return (
+    <View style={{ flex: 1, backgroundColor: 'tomato' }}>
+      <Button title="Go back" onPress={() => navigation.goBack()} />
+    </View>
+  );
+}
+
+function TwoStackSheet({ navigation }: TwoStackRouteNavProps) {
+  return (
+    <View style={{ flex: undefined, backgroundColor: 'palegreen' }}>
+      <View style={{ backgroundColor: 'peru', height: 400 }}>
+        <Button title="Open TwoSecond" onPress={() => navigation.navigate('TwoSecond')} />
+      </View>
+    </View>
+  );
+}
+
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <RootStackHostComponent />
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -124,6 +124,7 @@ export { default as Test2668 } from './Test2668';
 export { default as Test2675 } from './Test2675';
 export { default as Test2717 } from './Test2717';
 export { default as Test2767 } from './Test2767';
+export { default as Test2789 } from './Test2789';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';