feat: add prop for hiding keyboard on swipe

TestsExample/App.js

@@ -78,6 +78,7 @@ import Test1259 from './src/Test1259';
 import Test1260 from './src/Test1260';
 import Test1296 from './src/Test1296';
 import Test1299 from './src/Test1299';
+import Test1419 from './src/Test1419';
 
 enableFreeze(true);
 

TestsExample/src/Test1419.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, Text, Button, KeyboardAvoidingView, Platform, TouchableWithoutFeedback, Keyboard, Image, TextInput } from 'react-native';
+import {NavigationContainer, ParamListBase} from '@react-navigation/native';
+import {createNativeStackNavigator, NativeStackNavigationProp} from 'react-native-screens/native-stack';
+
+function First({navigation}: {navigation: NativeStackNavigationProp<ParamListBase>}) {
+  return (
+    <View style={{
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center'
+    }}>
+      <Text>First screen</Text>
+      <Button
+        title={'Navigate'}
+        onPress={() => navigation.navigate('Second')}
+      />
+    </View>
+  );
+}
+
+function Second() {
+  return (
+    <KeyboardAvoidingView
+    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    style={{ flex: 1 }}
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <View style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+          <Image
+            source={require('../assets/backButton.png')}
+            style={{
+              width: 150,
+              height: 150,
+              marginBottom: 30
+            }}
+          />
+          <TextInput
+            placeholder={'Input'}
+            style={{
+              width: 200,
+              height: 40,
+              paddingLeft: 15,
+              paddingRight: 15,
+              borderWidth: 1,
+              borderRadius: 5,
+              borderColor: '#cccccc'
+            }}
+          />
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
+}
+
+const { Navigator, Screen } = createNativeStackNavigator();
+
+export default () => {
+  return (
+    <NavigationContainer>
+        <Navigator screenOptions={{hideKeyboardOnSwipe: true}}>
+        <Screen
+            name={'First'}
+            component={First}
+        />
+        <Screen
+            name={'Second'}
+            component={Second}
+        />
+        </Navigator>
+    </NavigationContainer>
+  );
+}

guides/GUIDE_FOR_LIBRARY_AUTHORS.md

@@ -60,6 +60,11 @@ gestureResponseDistance: {
   bottom: 150,
 }
 ```
+
+###  `hideKeyboardOnSwipe` (iOS only)
+
+Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
+
 ### `homeIndicatorHidden` (iOS only)
 
 Whether the home indicator should be hidden on this screen. Defaults to `false`.

ios/RNSScreen.h

@@ -58,6 +58,7 @@
 @property (nonatomic) BOOL fullScreenSwipeEnabled;
 @property (nonatomic, copy) NSDictionary *gestureResponseDistance;
 @property (nonatomic, retain) NSNumber *transitionDuration;
+@property (nonatomic) BOOL hideKeyboardOnSwipe;
 
 #if !TARGET_OS_TV
 @property (nonatomic) RNSStatusBarStyle statusBarStyle;

ios/RNSScreen.m

@@ -259,6 +259,9 @@ - (void)notifyWillAppear
 
 - (void)notifyWillDisappear
 {
+  if (_hideKeyboardOnSwipe) {
+    [self endEditing:YES];
+  }
   if (self.onWillDisappear) {
     self.onWillDisappear(nil);
   }
@@ -792,6 +795,7 @@ @implementation RNSScreenManager
 RCT_EXPORT_VIEW_PROPERTY(fullScreenSwipeEnabled, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(gestureEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(gestureResponseDistance, NSDictionary)
+RCT_EXPORT_VIEW_PROPERTY(hideKeyboardOnSwipe, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(preventNativeDismiss, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(replaceAnimation, RNSScreenReplaceAnimation)
 RCT_EXPORT_VIEW_PROPERTY(stackPresentation, RNSScreenStackPresentation)

native-stack/README.md

@@ -195,6 +195,10 @@ A Boolean to that lets you opt out of insetting the header. You may want to * se
 
 Boolean indicating whether the navigation bar is translucent.
 
+####  `hideKeyboardOnSwipe` (iOS only)
+
+Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
+
 #### `homeIndicatorHidden` (iOS only)
 
 Whether the home indicator should be hidden on this screen. Defaults to `false`.

src/native-stack/types.tsx

@@ -255,6 +255,12 @@ export type NativeStackNavigationOptions = {
    * @platform ios
    */
   homeIndicatorHidden?: boolean;
+  /**
+   * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
+   *
+   * @platform ios
+   */
+  hideKeyboardOnSwipe?: boolean;
   /**
    * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
    * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.

src/native-stack/views/NativeStackView.tsx

@@ -152,6 +152,7 @@ const RouteView = ({
     gestureEnabled,
     gestureResponseDistance,
     headerShown,
+    hideKeyboardOnSwipe,
     homeIndicatorHidden,
     nativeBackButtonDismissalEnabled = false,
     navigationBarColor,
@@ -219,6 +220,7 @@ const RouteView = ({
       style={StyleSheet.absoluteFill}
       customAnimationOnSwipe={customAnimationOnSwipe}
       fullScreenSwipeEnabled={fullScreenSwipeEnabled}
+      hideKeyboardOnSwipe={hideKeyboardOnSwipe}
       homeIndicatorHidden={homeIndicatorHidden}
       gestureEnabled={isAndroid ? false : gestureEnabled}
       gestureResponseDistance={gestureResponseDistance}

src/types.tsx

@@ -121,6 +121,12 @@ export interface ScreenProps extends ViewProps {
    * @platform ios
    */
   homeIndicatorHidden?: boolean;
+  /**
+   * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
+   *
+   * @platform ios
+   */
+  hideKeyboardOnSwipe?: boolean;
   /**
    * Boolean indicating whether, when the Android default back button is clicked, the `pop` action should be performed on the native side or on the JS side to be able to prevent it.
    * Unfortunately the same behavior is not available on iOS since the behavior of native back button cannot be changed there.