fix(Android, Stack): Fix flex-end positioning in formSheet

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

@@ -4,36 +4,37 @@ import android.view.View
 import com.google.android.material.bottomsheet.BottomSheetBehavior
 
 internal fun <T : View> BottomSheetBehavior<T>.useSingleDetent(
-    height: Int? = null,
+    maxAllowedHeight: Int? = null,
     forceExpandedState: Boolean = true,
 ): BottomSheetBehavior<T> {
     this.skipCollapsed = true
     this.isFitToContents = true
     if (forceExpandedState) {
         this.state = BottomSheetBehavior.STATE_EXPANDED
     }
-    height?.let {
-        maxHeight = height
+    maxAllowedHeight?.let {
+        maxHeight = maxAllowedHeight
     }
     return this
 }
 
 internal fun <T : View> BottomSheetBehavior<T>.useTwoDetents(
     @BottomSheetBehavior.StableState state: Int? = null,
     firstHeight: Int? = null,
-    secondHeight: Int? = null,
+    maxAllowedHeight: Int? = null,
 ): BottomSheetBehavior<T> {
     skipCollapsed = false
     isFitToContents = true
     state?.let { this.state = state }
     firstHeight?.let { peekHeight = firstHeight }
-    secondHeight?.let { maxHeight = secondHeight }
+    maxAllowedHeight?.let { maxHeight = maxAllowedHeight }
     return this
 }
 
 internal fun <T : View> BottomSheetBehavior<T>.useThreeDetents(
     @BottomSheetBehavior.StableState state: Int? = null,
     firstHeight: Int? = null,
+    maxAllowedHeight: Int? = null,
     halfExpandedRatio: Float? = null,
     expandedOffsetFromTop: Int? = null,
 ): BottomSheetBehavior<T> {
@@ -43,5 +44,6 @@ internal fun <T : View> BottomSheetBehavior<T>.useThreeDetents(
     firstHeight?.let { this.peekHeight = firstHeight }
     halfExpandedRatio?.let { this.halfExpandedRatio = halfExpandedRatio }
     expandedOffsetFromTop?.let { this.expandedOffset = expandedOffsetFromTop }
+    maxAllowedHeight?.let { maxHeight = maxAllowedHeight }
     return this
 }

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

@@ -142,7 +142,7 @@ class SheetDelegate(
                                 } else {
                                     (screen.sheetDetents.first() * containerHeight).toInt()
                                 }
-                            useSingleDetent(height = height)
+                            useSingleDetent(maxAllowedHeight = height)
                         }
 
                     2 ->
@@ -153,7 +153,7 @@ class SheetDelegate(
                                     screen.sheetDetents.count(),
                                 ),
                             firstHeight = (screen.sheetDetents[0] * containerHeight).toInt(),
-                            secondHeight = (screen.sheetDetents[1] * containerHeight).toInt(),
+                            maxAllowedHeight = (screen.sheetDetents.last() * containerHeight).toInt(),
                         )
 
                     3 ->
@@ -164,6 +164,7 @@ class SheetDelegate(
                                     screen.sheetDetents.count(),
                                 ),
                             firstHeight = (screen.sheetDetents[0] * containerHeight).toInt(),
+                            maxAllowedHeight = (screen.sheetDetents.last() * containerHeight).toInt(),
                             halfExpandedRatio = (screen.sheetDetents[1] / screen.sheetDetents[2]).toFloat(),
                             expandedOffsetFromTop = ((1 - screen.sheetDetents[2]) * containerHeight).toInt(),
                         )
@@ -212,19 +213,20 @@ class SheetDelegate(
                 when (screen.sheetDetents.count()) {
                     1 ->
                         behavior.useSingleDetent(
-                            height = (screen.sheetDetents.first() * containerHeight).toInt(),
+                            maxAllowedHeight = (screen.sheetDetents.last() * containerHeight).toInt(),
                             forceExpandedState = false,
                         )
 
                     2 ->
                         behavior.useTwoDetents(
                             firstHeight = (screen.sheetDetents[0] * containerHeight).toInt(),
-                            secondHeight = (screen.sheetDetents[1] * containerHeight).toInt(),
+                            maxAllowedHeight = (screen.sheetDetents.last() * containerHeight).toInt(),
                         )
 
                     3 ->
                         behavior.useThreeDetents(
                             firstHeight = (screen.sheetDetents[0] * containerHeight).toInt(),
+                            maxAllowedHeight = (screen.sheetDetents.last() * containerHeight).toInt(),
                             halfExpandedRatio = (screen.sheetDetents[1] / screen.sheetDetents[2]).toFloat(),
                             expandedOffsetFromTop = ((1 - screen.sheetDetents[2]) * containerHeight).toInt(),
                         )

apps/src/tests/Test3346.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import type {
+  NativeStackNavigationOptions,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+import { Button, Text, View } from 'react-native';
+import PressableWithFeedback from '../shared/PressableWithFeedback';
+import Colors from '../shared/styling/Colors';
+
+type StackParamList = {
+  Main: undefined;
+  FormSheetWithSmallDetent: undefined;
+  FormSheetWithMediumDetent: undefined;
+  FormSheetWithLargeDetent: undefined;
+  FormSheetWithTwoDetents: undefined;
+  FormSheetWithThreeDetents: undefined;
+  FormSheetWithMaxDetent: undefined;
+};
+
+type MainProps = {
+  navigation: NativeStackNavigationProp<StackParamList, 'Main'>;
+};
+
+const Stack = createNativeStackNavigator();
+
+const Main = ({ navigation }: MainProps) => {
+  return (
+    <View style={{ flex: 1 }}>
+      <Button
+        title="1 small detent"
+        onPress={() => navigation.navigate('FormSheetWithSmallDetent')}
+      />
+      <Button
+        title="1 medium detent"
+        onPress={() => navigation.navigate('FormSheetWithMediumDetent')}
+      />
+      <Button
+        title="1 large detent"
+        onPress={() => navigation.navigate('FormSheetWithLargeDetent')}
+      />
+      <Button
+        title="2 detents"
+        onPress={() => navigation.navigate('FormSheetWithTwoDetents')}
+      />
+      <Button
+        title="3 detents"
+        onPress={() => navigation.navigate('FormSheetWithThreeDetents')}
+      />
+      <Button
+        title="Max detent"
+        onPress={() => navigation.navigate('FormSheetWithMaxDetent')}
+      />
+    </View>
+  );
+};
+
+const formSheetBaseOptions: NativeStackNavigationOptions = {
+  presentation: 'formSheet',
+  animation: 'slide_from_bottom',
+  headerShown: false,
+  contentStyle: {
+    backgroundColor: Colors.GreenLight100
+  }
+};
+
+const PressableBase = () => (
+  <PressableWithFeedback>
+    <View
+      style={{
+        alignItems: 'center',
+        height: 40,
+        justifyContent: 'center',
+      }}>
+      <Text>Pressable</Text>
+    </View>
+  </PressableWithFeedback>
+);
+
+const FormSheetBase = () => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'flex-end',
+      }}>
+      <PressableBase />
+    </View>
+  );
+};
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          component={Main}
+          name="main"
+          options={{ title: 'Main' }}
+        />
+        <Stack.Screen
+          component={FormSheetBase}
+          name="FormSheetWithSmallDetent"
+          options={{
+            ...formSheetBaseOptions,
+            sheetAllowedDetents: [0.2],
+          }}
+        />
+        <Stack.Screen
+          component={FormSheetBase}
+          name="FormSheetWithMediumDetent"
+          options={{
+            ...formSheetBaseOptions,
+            sheetAllowedDetents: [0.5],
+          }}
+        />
+        <Stack.Screen
+          component={FormSheetBase}
+          name="FormSheetWithLargeDetent"
+          options={{
+            ...formSheetBaseOptions,
+            sheetAllowedDetents: [0.8],
+          }}
+        />
+        <Stack.Screen
+          component={FormSheetBase}
+          name="FormSheetWithTwoDetents"
+          options={{
+            ...formSheetBaseOptions,
+            sheetAllowedDetents: [0.3, 0.6],
+          }}
+        />
+        <Stack.Screen
+          component={FormSheetBase}
+          name="FormSheetWithThreeDetents"
+          options={{
+            ...formSheetBaseOptions,
+            sheetAllowedDetents: [0.3, 0.6, 0.9],
+          }}
+        />
+        <Stack.Screen
+          component={FormSheetBase}
+          name="FormSheetWithMaxDetent"
+          options={{
+            ...formSheetBaseOptions,
+            sheetAllowedDetents: [1.0],
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}

apps/src/tests/index.ts

@@ -155,6 +155,7 @@ export { default as Test3239 } from './Test3239';
 export { default as Test3265 } from './Test3265';
 export { default as Test3271 } from './Test3271';
 export { default as Test3282 } from './Test3282';
+export { default as Test3346 } from './Test3346';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';
 export { default as TestHeader } from './TestHeader';