Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jul 13, 2021
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 6 additions & 58 deletions ...eact-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion examples/native/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ SPEC CHECKSUMS:
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
DoubleConversion: cf9b38bf0b2d048436d9a82ad2abe1404f11e7de
FBLazyVector: 7b423f9e248eae65987838148c36eec1dbfe0b53
FBReactNativeSpec: 60baaee9d10a9d225389062decbbf2b0bd6420ce
FBReactNativeSpec: ba3bc03e12cb0bea22d69a8a9458eaf3e92521a8
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there is a bug with react native 64.1 where this hash is different on every machine, it's probably better not to commit these changes for now (FBReactNativeSpec). Maybe we should add the podfile lock to the ignore?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this isn't really a blocker I merged anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the heads-up, wasn't aware of this! 👍

I've been under the impression that version controlling Podfile.lock is a good idea (https://stackoverflow.com/questions/44028199/why-should-you-include-podfile-lock-under-version-control), but not sure how important it is in a React Native project 🤔 .

In any case, definitely no reason to commit the FBReactNativeSpec hash changes if it always changes from machine to machine at the moment - will keep that in mind!

Flipper: d3da1aa199aad94455ae725e9f3aa43f3ec17021
Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
Flipper-Folly: 755929a4f851b2fb2c347d533a23f191b008554c
Expand Down