fix: Fixes #211 After opening the keyboard the android UI shrinks

storybookjs · Jul 13, 2021 · e37f3ec · e37f3ec
1 parent 69c176a
commit e37f3ec
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 59 deletions.
diff --git a/...eact-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx b/...eact-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
@@ -1,13 +1,5 @@
-import React, { ReactNode, useRef, useEffect } from 'react';
-import {
-  Platform,
-  Keyboard,
-  Dimensions,
-  View,
-  LayoutChangeEvent,
-  KeyboardEvent,
-  StyleSheet,
-} from 'react-native';
+import React, { ReactNode } from 'react';
+import { View, LayoutChangeEvent, StyleSheet } from 'react-native';
 
 export interface PreviewDimens {
   width: number;
@@ -20,62 +12,18 @@ type Props = {
   children: ReactNode;
 };
 
-const useIsKeyboardOpen = (previewWidth: number) => {
-  const keyboardOpen = useRef(false);
-  useEffect(() => {
-    const keyboardDidShowHandler = (e: KeyboardEvent) => {
-      if (Platform.OS === 'android') {
-        // There is bug in RN android that keyboardDidShow event is called when you go from portrait to landscape.
-        // To make sure that this is keyboard event we check screen width
-        if (previewWidth === e.endCoordinates.width) {
-          keyboardOpen.current = true;
-        }
-      }
-    };
-
-    const keyboardDidHideHandler = () => {
-      if (keyboardOpen.current) {
-        keyboardOpen.current = false;
-      }
-    };
-
-    // When rotating screen from portrait to landscape with keyboard open on android it calls keyboardDidShow, but doesn't call
-    // keyboardDidHide. To avoid issues we set keyboardOpen to false immediately on keyboardChange.
-    const removeKeyboardOnOrientationChange = () => {
-      if (Platform.OS === 'android') {
-        keyboardOpen.current = false;
-      }
-    };
-
-    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShowHandler);
-    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHideHandler);
-    Dimensions.addEventListener('change', removeKeyboardOnOrientationChange);
-    return () => {
-      keyboardDidShowListener.remove();
-      keyboardDidHideListener.remove();
-      Dimensions.removeEventListener('change', removeKeyboardOnOrientationChange);
-    };
-  }, [previewWidth]);
-
-  return keyboardOpen.current;
-};
-
 // Android changes screen size when keyboard opens.
 // To avoid issues we use absolute positioned element with predefined screen size
 const AbsolutePositionedKeyboardAwareView = ({
   onLayout,
   previewDimensions: { width, height },
   children,
 }: Props) => {
-  const keyboardOpen = useIsKeyboardOpen(width);
-
   const onLayoutHandler = ({ nativeEvent }: LayoutChangeEvent) => {
-    if (!keyboardOpen) {
-      onLayout({
-        height: nativeEvent.layout.height,
-        width: nativeEvent.layout.width,
-      });
-    }
+    onLayout({
+      height: nativeEvent.layout.height,
+      width: nativeEvent.layout.width,
+    });
   };
 
   return (

diff --git a/examples/native/ios/Podfile.lock b/examples/native/ios/Podfile.lock
@@ -459,7 +459,7 @@ SPEC CHECKSUMS:
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
   DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
   FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
-  FBReactNativeSpec: 60baaee9d10a9d225389062decbbf2b0bd6420ce
+  FBReactNativeSpec: ba3bc03e12cb0bea22d69a8a9458eaf3e92521a8
   Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
   Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c