Merge branch 'main' into @maciekstosio/Handle-bottom-sheet-with-a-keyboard

Author: maciekstosio

FabricExample/e2e/issuesTests/Test2926.e2e.ts

@@ -0,0 +1,40 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS } from '../e2e-utils';
+
+// PR related to iOS search bar
+describeIfiOS('Test2926', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test2926 should exist', async () => {
+    await waitFor(element(by.id('root-screen-tests-Test2926')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(600, 'down', NaN, 0.85);
+
+    await expect(element(by.id('root-screen-tests-Test2926'))).toBeVisible();
+    await element(by.id('root-screen-tests-Test2926')).tap();
+  });
+
+  it('searchBar should be initially visible', async () => {
+    await expect(element(by.type('UISearchBarTextField'))).toBeVisible();
+  });
+
+  it('searchBar should hide after setting headerSearchBarOptions to undefined', async () => {
+    await element(by.id('home-switch-search-enabled')).tap();
+    await expect(element(by.type('UISearchBarTextField'))).not.toBeVisible();
+  });
+
+  it('searchBar value should stay in text field after coming back from another screen', async () => {
+    await element(by.id('home-switch-search-enabled')).tap();
+
+    await element(by.type('UISearchBarTextField')).replaceText('Item 2');
+    await element(by.id('home-button-open-second')).tap();
+
+    await element(by.id('BackButton')).tap();
+
+    await expect(element(by.type('UISearchBarTextField'))).toBeVisible();
+    await expect(element(by.type('UISearchBarTextField'))).toHaveText('Item 2');
+  });
+});

FabricExample/e2e/issuesTests/Test726.e2e.ts

@@ -0,0 +1,33 @@
+import { device, expect, element, by } from 'detox';
+import { describeIfiOS } from '../e2e-utils';
+
+// issue related to iOS
+describeIfiOS('Test726', () => {
+  beforeAll(async () => {
+    await device.reloadReactNative();
+  });
+
+  it('Test726 should exist', async () => {
+    await waitFor(element(by.id('root-screen-tests-Test726')))
+      .toBeVisible()
+      .whileElement(by.id('root-screen-examples-scrollview'))
+      .scroll(600, 'down', NaN, 0.85);
+
+    await expect(element(by.id('root-screen-tests-Test726'))).toBeVisible();
+    await element(by.id('root-screen-tests-Test726')).tap();
+  });
+
+  it('swiping back should not cause the freeze', async () => {
+    await expect(element(by.id('test-screen-button-push-me'))).toBeVisible();
+    await element(by.id('test-screen-button-push-me')).tap();
+
+    await expect(element(by.id('test-screen-2-text'))).toBeVisible();
+    await element(by.id('test-screen-2-view')).swipe('right', 'slow', 0.9, 0.0);
+
+    // Check that the app is still responsive by navigating to TestScreen2 again
+    await expect(element(by.id('test-screen-button-push-me'))).toBeVisible();
+    await element(by.id('test-screen-button-push-me')).tap();
+
+    await expect(element(by.id('test-screen-2-text'))).toBeVisible();
+  });
+});

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

@@ -10,7 +10,7 @@ import com.facebook.react.bridge.ReactApplicationContext
 import java.lang.ref.WeakReference
 
 object InsetsObserverProxy : OnApplyWindowInsetsListener, LifecycleEventListener {
-    private val listeners: ArrayList<OnApplyWindowInsetsListener> = arrayListOf()
+    private val listeners: HashSet<OnApplyWindowInsetsListener> = hashSetOf()
     private var eventSourceView: WeakReference<View> = WeakReference(null)
 
     // Please note semantics of this property. This is not `isRegistered`, because somebody, could unregister

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

@@ -31,6 +31,7 @@ import com.swmansion.rnscreens.bottomsheet.useSingleDetent
 import com.swmansion.rnscreens.bottomsheet.usesFormSheetPresentation
 import com.swmansion.rnscreens.events.HeaderHeightChangeEvent
 import com.swmansion.rnscreens.events.SheetDetentChangedEvent
+import com.swmansion.rnscreens.ext.asScreenStackFragment
 import com.swmansion.rnscreens.ext.parentAsViewGroup
 
 @SuppressLint("ViewConstructor") // Only we construct this view, it is never inflated.
@@ -541,6 +542,22 @@ class Screen(
         }
     }
 
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+
+        // Insets handler for formSheet is added onResume but it is often too late if we use input
+        // with autofocus - onResume is called after finishing animator animation.
+        // onAttachedToWindow is called before onApplyWindowInsets so we use it to set the handler
+        // earlier. More details: https://github.com/software-mansion/react-native-screens/pull/2911
+        if (usesFormSheetPresentation()) {
+            fragment?.asScreenStackFragment()?.sheetDelegate?.let {
+                InsetsObserverProxy.addOnApplyWindowInsetsListener(
+                    it,
+                )
+            }
+        }
+    }
+
     private fun dispatchSheetDetentChanged(
         detentIndex: Int,
         isStable: Boolean,

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

@@ -75,7 +75,7 @@ class ScreenStackFragment :
 
     private var dimmingDelegate: DimmingViewManager? = null
 
-    private var sheetDelegate: SheetDelegate? = null
+    internal var sheetDelegate: SheetDelegate? = null
 
     @SuppressLint("ValidFragment")
     constructor(screenView: Screen) : super(screenView)

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

@@ -181,23 +181,13 @@ class SheetDelegate(
             }
 
             is KeyboardVisible -> {
-                val newMaxHeight =
-                    if (behavior.maxHeight - keyboardState.height > 1) {
-                        behavior.maxHeight - keyboardState.height
-                    } else {
-                        behavior.maxHeight
-                    }
                 when (screen.sheetDetents.count()) {
                     1 ->
-                        behavior.apply {
-                            useSingleDetent(height = newMaxHeight)
-                        }
-
+                        behavior
                     2 ->
                         behavior.apply {
                             useTwoDetents(
                                 state = BottomSheetBehavior.STATE_EXPANDED,
-                                secondHeight = newMaxHeight,
                             )
                         }
 
@@ -206,7 +196,6 @@ class SheetDelegate(
                             useThreeDetents(
                                 state = BottomSheetBehavior.STATE_EXPANDED,
                             )
-                            maxHeight = newMaxHeight
                         }
 
                     else -> throw IllegalStateException(

android/src/main/java/com/swmansion/rnscreens/ext/FragmentExt.kt

@@ -0,0 +1,6 @@
+package com.swmansion.rnscreens.ext
+
+import androidx.fragment.app.Fragment
+import com.swmansion.rnscreens.ScreenStackFragment
+
+internal fun Fragment.asScreenStackFragment() = this as ScreenStackFragment

apps/Example.tsx

@@ -5,11 +5,8 @@ import {
   I18nManager,
   Platform,
   useColorScheme,
-  View,
 } from 'react-native';
 import {
-  DarkTheme,
-  DefaultTheme,
   NavigationContainer,
   NavigationIndependentTree,
   useTheme,
@@ -38,6 +35,7 @@ import { GestureDetectorProvider } from 'react-native-screens/gesture-handler';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 import * as Tests from './src/tests';
+import { ScreensDarkTheme, ScreensLightTheme } from './src/shared/styling/adapter/react-navigation';
 
 function isPlatformReady(name: keyof typeof SCREENS) {
   if (Platform.isTV) {
@@ -153,29 +151,29 @@ const examples = screens.filter(name => SCREENS[name].type === 'example');
 const playgrounds = screens.filter(name => SCREENS[name].type === 'playground');
 const tests = isTestSectionEnabled()
   ? screens
-      .filter(name => SCREENS[name].type === 'test')
-      .sort((name1, name2) => {
-        const testNumber1 = Number(name1.substring(4));
-        const testNumber2 = Number(name2.substring(4));
+    .filter(name => SCREENS[name].type === 'test')
+    .sort((name1, name2) => {
+      const testNumber1 = Number(name1.substring(4));
+      const testNumber2 = Number(name2.substring(4));
 
-        if (Number.isNaN(testNumber1) && Number.isNaN(testNumber2)) {
-          return 0;
-        } else if (Number.isNaN(testNumber1)) {
-          return 1;
-        } else if (Number.isNaN(testNumber2)) {
-          return -1;
-        } else {
-          return testNumber1 - testNumber2;
-        }
-      })
+      if (Number.isNaN(testNumber1) && Number.isNaN(testNumber2)) {
+        return 0;
+      } else if (Number.isNaN(testNumber1)) {
+        return 1;
+      } else if (Number.isNaN(testNumber2)) {
+        return -1;
+      } else {
+        return testNumber1 - testNumber2;
+      }
+    })
   : [];
 
 type RootStackParamList = {
   Main: undefined;
   Tests: undefined;
 } & {
-  [P in keyof typeof SCREENS]: undefined;
-};
+    [P in keyof typeof SCREENS]: undefined;
+  };
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -258,15 +256,14 @@ const ExampleApp = (): React.JSX.Element => {
     <GestureHandlerRootView style={{ flex: 1 }}>
       <GestureDetectorProvider>
         <ThemeToggle.Provider value={{ toggleTheme }}>
-          <NavigationContainer theme={isDark ? DarkTheme : DefaultTheme}>
+          <NavigationContainer theme={isDark ? ScreensDarkTheme : ScreensLightTheme}>
             <Stack.Navigator
               screenOptions={{ statusBarStyle: isDark ? 'light' : 'dark' }}>
               <Stack.Screen
                 name="Main"
                 options={{
-                  title: `${
-                    Platform.isTV ? '📺' : '📱'
-                  } React Native Screens Examples`,
+                  title: `${Platform.isTV ? '📺' : '📱'
+                    } React Native Screens Examples`,
                 }}
                 component={MainScreen}
               />

apps/src/shared/Alert.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { Text, StyleSheet, Dimensions, View, Pressable } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import useThemeColorPallette from './styling/adapter/react-navigation/useColorPallette';
 
 export const Alert = (): React.JSX.Element => {
   const navigation = useNavigation();
+  const { colors } = useThemeColorPallette();
+
   const backgrounds = [
-    'darkviolet',
-    'slateblue',
-    'mediumseagreen',
-    'orange',
-    'indianred',
+    colors.BlueLight80,
+    colors.YellowDark80,
+    colors.PurpleLight80,
+    colors.BlueDark80,
+    colors.YellowLight80,
   ];
   const bgColor = backgrounds[Math.floor(Math.random() * backgrounds.length)];
 

apps/src/shared/Dialog.tsx

@@ -8,6 +8,7 @@ import {
   SafeAreaView,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import Colors from './styling/Colors';
 
 export const Dialog = (): React.JSX.Element => {
   const navigation = useNavigation();
@@ -35,7 +36,7 @@ const styles = StyleSheet.create({
   },
   wrapper: {
     width: Dimensions.get('screen').width - 40,
-    backgroundColor: 'white',
+    backgroundColor: Colors.background,
     shadowColor: 'black',
     shadowOffset: {
       width: 0,
@@ -57,7 +58,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   button: {
-    backgroundColor: 'dodgerblue',
+    backgroundColor: Colors.BlueLight80,
     height: 40,
     borderRadius: 8,
     justifyContent: 'center',