fix(#149): offset not removed when interacting with iOS password inputs

mateusz1913 · Feb 27, 2023 · 0875024 · 0875024
1 parent 31bc3c8
commit 0875024
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 1 deletion.
diff --git a/packages/app/src/navigation/index.tsx b/packages/app/src/navigation/index.tsx
@@ -10,6 +10,7 @@ import { HomeScreen } from '../screens/HomeScreen';
 import { KeyboardTypeExample } from '../screens/KeyboardTypeExample';
 import { ModalExample } from '../screens/ModalExample';
 import { ModalFormSheetExample } from '../screens/ModalFormSheetExample';
+import { PasswordFormExample } from '../screens/PasswordFormExample';
 import { ReanimatedExample } from '../screens/ReanimatedExample';
 import { ScreensNativeModalExample } from '../screens/ScreensNativeModalExample';
 import { StickyFooterExample } from '../screens/StickyFooterExample';
@@ -30,6 +31,7 @@ export const Navigation: React.FC = () => {
     <Stack.Screen name={ROUTES.KeyboardType} component={KeyboardTypeExample} />
     <Stack.Screen name={ROUTES.Modal} component={ModalExample} />
     <Stack.Screen name={ROUTES.ModalFormSheet} component={ModalFormSheetExample} />
+    <Stack.Screen name={ROUTES.PasswordForm} component={PasswordFormExample} />
     <Stack.Screen name={ROUTES.Reanimated} component={ReanimatedExample} />
     <Stack.Screen
       name={ROUTES.ScreensNativeModal}

diff --git a/packages/app/src/navigation/routes.ts b/packages/app/src/navigation/routes.ts
@@ -8,6 +8,7 @@ export const ROUTES = Object.freeze({
   KeyboardType: 'KeyboardType',
   Modal: 'Modal',
   ModalFormSheet: 'ModalFormSheet',
+  PasswordForm: 'PasswordForm',
   Reanimated: 'Reanimated',
   ScreensNativeModal: 'ScreensNativeModal',
   StickyFooter: 'StickyFooter',

diff --git a/packages/app/src/navigation/types.ts b/packages/app/src/navigation/types.ts
@@ -12,6 +12,7 @@ export type RootStackParamList = {
   [ROUTES.KeyboardType]: undefined;
   [ROUTES.Modal]: undefined;
   [ROUTES.ModalFormSheet]: undefined;
+  [ROUTES.PasswordForm]: undefined;
   [ROUTES.Reanimated]: undefined;
   [ROUTES.ScreensNativeModal]: undefined;
   [ROUTES.StickyFooter]: undefined;

diff --git a/packages/app/src/screens/HomeScreen.tsx b/packages/app/src/screens/HomeScreen.tsx
@@ -40,6 +40,11 @@ const DATA: Array<Example> = [
     label: 'Form',
     route: ROUTES.Form,
   },
+  {
+    description: 'Check how to make classic username & password form\'s text fields always displayed above the keyboard',
+    label: 'PasswordForm',
+    route: ROUTES.PasswordForm,
+  },
   {
     description: 'Check how AvoidSoftInput module works with different keyboard types',
     label: 'Keyboard type',
@@ -68,7 +73,7 @@ const DATA: Array<Example> = [
   },
   {
     description: 'Learn how to handle seperate parts of a form - text field in scroll component and CTA button with fixed position at the bottom of the screen',
-    label: 'Sticky footer', 
+    label: 'Sticky footer',
     route: ROUTES.StickyFooter,
   },
   {

diff --git a/packages/app/src/screens/PasswordFormExample.tsx b/packages/app/src/screens/PasswordFormExample.tsx
@@ -0,0 +1,81 @@
+import { useFocusEffect } from '@react-navigation/native';
+import * as React from 'react';
+import { Image, ScrollView, StyleSheet, View } from 'react-native';
+import { AvoidSoftInput } from 'react-native-avoid-softinput';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import Button from '../components/Button';
+import SingleInput from '../components/SingleInput';
+import { styles as commonStyles } from '../consts/styles';
+
+const icon = require('../../assets/AppIconTransparent.png');
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const NOOP = () => {};
+
+export const PasswordFormExample: React.FC = () => {
+  const onFocusEffect = React.useCallback(() => {
+    AvoidSoftInput.setShouldMimicIOSBehavior(true);
+    AvoidSoftInput.setEnabled(true);
+    return () => {
+      AvoidSoftInput.setEnabled(false);
+      AvoidSoftInput.setShouldMimicIOSBehavior(false);
+    };
+  }, []);
+
+  useFocusEffect(onFocusEffect);
+
+  return <SafeAreaView edges={[ 'bottom', 'left', 'right' ]} style={commonStyles.screenContainer}>
+    <ScrollView
+      bounces={false}
+      contentContainerStyle={commonStyles.scrollContainer}
+      contentInsetAdjustmentBehavior="always"
+      overScrollMode="always"
+      showsVerticalScrollIndicator={true}
+      style={commonStyles.stretch}>
+      <View style={styles.logoContainer}>
+        <Image
+          resizeMode="contain"
+          source={icon}
+          style={styles.logo}
+        />
+      </View>
+      <View style={styles.formContainer}>
+        <SingleInput placeholder="Username input" />
+        <SingleInput textContentType="password" placeholder="Password input" secureTextEntry />
+      </View>
+      <View style={styles.submitButtonContainer}>
+        <Button
+          onPress={NOOP}
+          title="Submit"
+        />
+      </View>
+    </ScrollView>
+  </SafeAreaView>;
+};
+
+const styles = StyleSheet.create({
+  formContainer: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  logo: {
+    height: 200,
+    width: 200,
+  },
+  logoContainer: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    flex: 1,
+    justifyContent: 'center',
+    paddingVertical: 100,
+  },
+  submitButtonContainer: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    marginTop: 100,
+  },
+});
diff --git a/packages/react-native-avoid-softinput/ios/AvoidSoftInputAnimationHandler.swift b/packages/react-native-avoid-softinput/ios/AvoidSoftInputAnimationHandler.swift
@@ -220,6 +220,7 @@ public class AvoidSoftInputAnimationHandler: AvoidSoftInputAnimatorDelegate {
                         initialOffset: self.bottomOffset,
                         addedOffset: newBottomOffset - self.bottomOffset
                     )
+                    self.softInputVisible = true
                     self.hideAnimator.cleanup()
                 },
                 onAnimate: {
@@ -305,6 +306,7 @@ public class AvoidSoftInputAnimationHandler: AvoidSoftInputAnimatorDelegate {
                         initialOffset: 0,
                         addedOffset: self.bottomOffset
                     )
+                    self.softInputVisible = true
                     self.hideAnimator.cleanup()
                 },
                 onAnimate: {
@@ -455,6 +457,7 @@ public class AvoidSoftInputAnimationHandler: AvoidSoftInputAnimatorDelegate {
                         initialOffset: self.bottomOffset,
                         addedOffset: newBottomOffset - self.bottomOffset
                     )
+                    self.softInputVisible = true
                     self.hideAnimator.cleanup()
                 },
                 onAnimate: {
@@ -560,6 +563,7 @@ public class AvoidSoftInputAnimationHandler: AvoidSoftInputAnimatorDelegate {
                 easing: easingOption,
                 onStart: {
                     self.showAnimator.beginAnimation(initialOffset: 0, addedOffset: self.bottomOffset)
+                    self.softInputVisible = true
                     self.hideAnimator.cleanup()
                 },
                 onAnimate: {