fix(Android): fix formSheet sliding from top when it contains input with autofocus (#2909)

## Description

On API 36, formSheet that contains input with autoFocus would sometimes
slide from the top.

Even though `react-native-screens` used
`com.google.android.material:material:1.6.1`, `InsetsAnimationCallback`
(which is not present in `1.6.1`) is called (it probably comes from
`com.google.android.material:material:1.12.0` dependency in
`react-native-edge-to-edge`). This callback interferes with our
formSheet entering/closing animations:

1. Values used to calculate start and end position in
`InsetsAnimationCallback`'s `onPrepare` and `onStart` are usually
incorrect. This has become a significant issue since API 36: for some
reason, animation created in `ScreenStackFragment`'s `onCreateAnimator`
is sometimes incorrecly accounted for in calculating
`startTranslationY`. The value becomes negative which means that the
formSheet slides from the top.
2. Both `InsetsAnimationCallback` and formSheet animations use
`setTranslationY` and they are overwriting each other's changes.
`InsetsAnimationCallback`'s `onProgress` is called just after
animation's `setTranslationY` so it takes precedence.

We decided to replace the window insets animation callback which is set
in `BottomSheetBehavior`'s `onLayoutChild` with our own implementation.
Currently it is empty in order to bring back previous behavior.

FormSheet that contains input with autoFocus still does not behave as
intented - only rarely it gets expanded with the keyboard. This seems to
be a timing issue and needs more investigation. It might be necessary to
implement logic in new window insets animation callback.

Fixes
#2895.

## Changes

- change `com.google.android.material:material` version to `1.12.0`
- replace `BottomSheetBehavior`'s `InsetsAnimationCallback` with empty
implementation
- add test screen `Test2895`

## Test code and steps to reproduce

Open `Test2895` screen in the example app and open the formSheet.

## Checklist

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

---------

Co-authored-by: Kacper Kafara <[email protected]>

Author: kligarski

android/build.gradle

@@ -231,7 +231,7 @@ dependencies {
     implementation 'androidx.fragment:fragment-ktx:1.6.1'
     implementation 'androidx.coordinatorlayout:coordinatorlayout:1.2.0'
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
-    implementation 'com.google.android.material:material:1.6.1'
+    implementation 'com.google.android.material:material:1.12.0'
     implementation "androidx.core:core-ktx:1.8.0"
 
     constraints {

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

@@ -188,6 +188,7 @@ class Screen(
         if (!usesFormSheetPresentation() || !isNativeStackScreen) {
             return
         }
+
         if (coordinatorLayoutDidChange) {
             dispatchShadowStateUpdate(width, height, top)
         }

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

@@ -17,6 +17,9 @@ import android.view.animation.Animation
 import android.widget.LinearLayout
 import androidx.appcompat.widget.Toolbar
 import androidx.coordinatorlayout.widget.CoordinatorLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsAnimationCompat
+import androidx.core.view.WindowInsetsCompat
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.UIManagerHelper
 import com.google.android.material.appbar.AppBarLayout
@@ -237,6 +240,21 @@ class ScreenStackFragment :
                 View.MeasureSpec.makeMeasureSpec(container.height, View.MeasureSpec.EXACTLY),
             )
             coordinatorLayout.layout(0, 0, container.width, container.height)
+
+            // Replace InsetsAnimationCallback created by BottomSheetBehavior with empty
+            // implementation so it does not interfere with our custom formSheet entering animation
+            // More details: https://github.com/software-mansion/react-native-screens/pull/2909
+            ViewCompat.setWindowInsetsAnimationCallback(
+                screen,
+                object : WindowInsetsAnimationCompat.Callback(
+                    DISPATCH_MODE_STOP,
+                ) {
+                    override fun onProgress(
+                        insets: WindowInsetsCompat,
+                        runningAnimations: MutableList<WindowInsetsAnimationCompat>,
+                    ): WindowInsetsCompat = insets
+                },
+            )
         }
 
         return coordinatorLayout

apps/src/tests/Test2895.tsx

@@ -0,0 +1,100 @@
+import React, { Fragment } from 'react';
+import { NavigationContainer, ParamListBase } from '@react-navigation/native';
+import {
+  NativeStackNavigationProp,
+  createNativeStackNavigator,
+} from '@react-navigation/native-stack';
+import { Button, StyleSheet, View } from 'react-native';
+import { ThemedText, ThemedTextInput } from '../shared';
+
+type StackRouteParamList = {
+  Home: undefined;
+  FormSheet: undefined;
+};
+
+type NavigationProp<ParamList extends ParamListBase> = {
+  navigation: NativeStackNavigationProp<ParamList>;
+};
+
+type StackNavigationProp = NavigationProp<StackRouteParamList>;
+
+const Stack = createNativeStackNavigator<StackRouteParamList>();
+
+function Home({ navigation }: StackNavigationProp) {
+  return (
+    <View style={[{ backgroundColor: 'goldenrod', flex: 1 }]}>
+      <Button
+        title="Open FormSheet"
+        onPress={() => navigation.navigate('FormSheet')}
+      />
+    </View>
+  );
+}
+
+function FormSheet({}: StackNavigationProp) {
+  const fields = [
+    { name: 'form-first-name', placeholder: 'First Name *', autoFocus: true },
+    { name: 'form-last-name', placeholder: 'Last Name *' },
+    { name: 'form-email', placeholder: 'Email *' },
+  ];
+
+  return (
+    <View testID="form" style={styles.wrapper}>
+      <ThemedText testID="form-header" style={styles.heading}>
+        Example form
+      </ThemedText>
+      {fields.map(({ name, placeholder, autoFocus }) => (
+        <Fragment key={name}>
+          <ThemedText testID={`${name}-label`} style={styles.label}>
+            {placeholder}
+          </ThemedText>
+          <ThemedTextInput
+            autoFocus={autoFocus}
+            testID={`${name}-input`}
+            style={styles.input}
+          />
+        </Fragment>
+      ))}
+    </View>
+  );
+}
+
+export default function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen name="Home" component={Home} />
+        <Stack.Screen
+          name="FormSheet"
+          component={FormSheet}
+          options={{
+            presentation: 'formSheet',
+            sheetAllowedDetents: [0.5, 0.85],
+          }}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    margin: 15,
+  },
+  heading: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginBottom: 16,
+  },
+  label: {
+    textTransform: 'capitalize',
+    fontSize: 12,
+    marginBottom: 8,
+  },
+  input: {
+    borderWidth: 1,
+    borderRadius: 5,
+    marginBottom: 12,
+    height: 40,
+  },
+});

apps/src/tests/index.ts

@@ -133,6 +133,7 @@ export { default as Test2811 } from './Test2811';
 export { default as Test2819 } from './Test2819';
 export { default as Test2855 } from './Test2855';
 export { default as Test2877 } from './Test2877'; // [E2E created](iOS): issue is related to formSheet on iOS
+export { default as Test2895 } from './Test2895';
 export { default as Test2899 } from './Test2899';
 export { default as TestScreenAnimation } from './TestScreenAnimation';
 export { default as TestScreenAnimationV5 } from './TestScreenAnimationV5';