Skip to content

Commit 276bbc8

Browse files
ammarahm-edammarahm-ed
committed
fix changing orientation
1 parent ba938ce commit 276bbc8

File tree

4 files changed

+126
-108
lines changed

4 files changed

+126
-108
lines changed

‎app/examples/gestures.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function Gestures() {
1212
<View
1313
style={{
1414
paddingHorizontal: 12,
15-
height: 400,
15+
height: 200,
1616
alignItems: 'center',
1717
justifyContent: 'center',
1818
}}>

‎app/examples/input.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react';
2-
import {Text, View} from 'react-native';
3-
import ActionSheet, {useSheetRef} from 'react-native-actions-sheet';
4-
import {TextInput} from 'react-native-gesture-handler';
2+
import { View } from 'react-native';
3+
import ActionSheet from 'react-native-actions-sheet';
4+
import { TextInput } from 'react-native-gesture-handler';
55

66
function Input() {
7+
78
return (
89
<ActionSheet gestureEnabled>
910
<View
1011
style={{
1112
paddingHorizontal: 12,
12-
height: 400,
13+
height: 200,
1314
alignItems: 'center',
1415
justifyContent: 'center',
1516
gap: 10,
@@ -19,6 +20,7 @@ function Input() {
1920
color: 'black',
2021
fontSize: 30,
2122
}}
23+
autoFocus
2224
placeholderTextColor="#a9a9a9"
2325
placeholder="Type something..."
2426
/>

‎src/hooks/useKeyboard.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export function useKeyboard(enabled: boolean) {
3434
const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
3535
const handleKeyboardDidShow: KeyboardEventListener = React.useCallback(e => {
3636
if (pauseKeyboardHandler.current) return;
37-
setShown(true);
3837
setCoordinates({start: e.startCoordinates, end: e.endCoordinates});
3938
setKeyboardHeight(e.endCoordinates.height);
39+
setShown(true);
4040
}, []);
4141
const handleKeyboardDidHide: KeyboardEventListener = React.useCallback(e => {
4242
setShown(false);
@@ -76,5 +76,9 @@ export function useKeyboard(enabled: boolean) {
7676
coordinates: !enabled || !shown ? emptyCoordinates : coordinates,
7777
keyboardHeight: !enabled || !shown ? 0 : keyboardHeight,
7878
pauseKeyboardHandler,
79+
reset: () => {
80+
setShown(false);
81+
setKeyboardHeight(0);
82+
},
7983
};
8084
}

‎src/index.tsx‎

Lines changed: 114 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Dimensions,
1616
Easing,
1717
GestureResponderEvent,
18+
Keyboard,
1819
LayoutChangeEvent,
1920
LayoutRectangle,
2021
Modal,
@@ -146,7 +147,6 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
146147
const lock = useRef(false);
147148
const panViewRef = useRef<View>(null);
148149
const rootViewContainerRef = useRef<View>(null);
149-
const isOrientationChanging = useRef(false);
150150
const gestureBoundaries = useRef<{
151151
[name: string]: LayoutRectangle & {
152152
scrollOffset?: number;
@@ -155,9 +155,10 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
155155
const hiding = useRef(false);
156156
const payloadRef = useRef(payload);
157157
const sheetPayload = useSheetPayload();
158-
// const initialWindowHeight = useRef(Dimensions.get('screen').height);
159158
const panHandlerRef = useRef();
159+
const closing = useRef(false);
160160
const draggableNodes = useRef<NodesRef>([]);
161+
const sheetLayoutRef = useRef<LayoutRectangle>();
161162
const [dimensions, setDimensions] = useState<{
162163
width: number;
163164
height: number;
@@ -174,6 +175,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
174175
sub?: {unsubscribe: () => void};
175176
firstEventFired?: boolean;
176177
layouTimer?: NodeJS.Timeout;
178+
resizing?: boolean;
177179
}>({});
178180

179181
if (safeAreaInsets) {
@@ -223,10 +225,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
223225
const routerRef = useRef(router);
224226
payloadRef.current = payload;
225227
routerRef.current = router;
226-
227-
const keyboard = useKeyboard(
228-
keyboardHandlerEnabled && visible && dimensions.height !== 0,
229-
);
228+
const keyboard = useKeyboard(keyboardHandlerEnabled);
230229
const prevSnapIndex = useRef<number>(initialSnapIndex);
231230
const draggableNodesContext: DraggableNodes = React.useMemo(
232231
() => ({
@@ -374,13 +373,94 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
374373
// eslint-disable-next-line react-hooks/exhaustive-deps
375374
}, [props?.id, keyboard.keyboardShown, keyboard.keyboardHeight]);
376375

376+
const onSheetLayout = React.useCallback(
377+
(event: LayoutChangeEvent) => {
378+
sheetLayoutRef.current = {...event.nativeEvent.layout};
379+
if (rootViewLayoutEventValues.current.resizing) return;
380+
if (closing.current) return;
381+
const rootViewHeight = dimensionsRef.current?.height;
382+
383+
actionSheetHeight.current =
384+
event.nativeEvent.layout.height > dimensionsRef.current.height
385+
? dimensionsRef.current.height
386+
: event.nativeEvent.layout.height;
387+
minTranslateValue.current =
388+
rootViewHeight -
389+
(actionSheetHeight.current + safeAreaPaddings.current.bottom);
390+
391+
if (initialValue.current < 0) {
392+
animations.translateY.setValue(rootViewHeight * 1.1);
393+
}
394+
const nextInitialValue =
395+
actionSheetHeight.current +
396+
minTranslateValue.current -
397+
(actionSheetHeight.current * snapPoints[currentSnapIndex.current]) /
398+
100;
399+
400+
initialValue.current =
401+
(keyboard.keyboardShown || keyboardWasVisible.current) &&
402+
initialValue.current <= nextInitialValue &&
403+
initialValue.current >= minTranslateValue.current
404+
? initialValue.current
405+
: nextInitialValue;
406+
407+
const sheetBottomEdgePosition =
408+
initialValue.current +
409+
(actionSheetHeight.current * snapPoints[currentSnapIndex.current]) /
410+
100;
411+
412+
const sheetPositionWithKeyboard =
413+
sheetBottomEdgePosition -
414+
(dimensionsRef.current?.height - keyboard.keyboardHeight);
415+
416+
initialValue.current =
417+
sheetPositionWithKeyboard > 0
418+
? initialValue.current - sheetPositionWithKeyboard
419+
: initialValue.current;
420+
421+
if (keyboard.keyboardShown) {
422+
minTranslateValue.current =
423+
minTranslateValue.current -
424+
(keyboard.keyboardHeight + safeAreaPaddings.current.bottom);
425+
426+
keyboardWasVisible.current = true;
427+
prevKeyboardHeight.current = keyboard.keyboardHeight;
428+
} else {
429+
keyboardWasVisible.current = false;
430+
}
431+
opacityAnimation(1);
432+
setTimeout(() => {
433+
returnAnimation();
434+
}, 1);
435+
436+
if (initialValue.current > 100) {
437+
if (lock.current) return;
438+
animations.underlayTranslateY.setValue(100);
439+
}
440+
if (Platform.OS === 'web') {
441+
document.body.style.overflowY = 'hidden';
442+
document.documentElement.style.overflowY = 'hidden';
443+
}
444+
},
445+
[
446+
snapPoints,
447+
keyboard.keyboardShown,
448+
keyboard.keyboardHeight,
449+
opacityAnimation,
450+
animations.translateY,
451+
animations.underlayTranslateY,
452+
returnAnimation,
453+
],
454+
);
455+
377456
const onRootViewLayout = React.useCallback(
378457
(event: LayoutChangeEvent) => {
379-
if (isOrientationChanging.current) return;
380458
if (keyboard.keyboardShown && !isModal) {
381459
return;
382460
}
383461

462+
rootViewLayoutEventValues.current.resizing = true;
463+
384464
let rootViewHeight = event.nativeEvent.layout.height;
385465
let rootViewWidth = event.nativeEvent.layout.width;
386466

@@ -402,9 +482,19 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
402482
dimensionsRef.current = {
403483
width: width,
404484
height: height,
405-
portrait: width > height,
485+
portrait: width < height,
406486
};
407-
setDimensions(dimensionsRef.current);
487+
488+
setDimensions({...dimensionsRef.current});
489+
rootViewLayoutEventValues.current.resizing = false;
490+
491+
if (sheetLayoutRef.current) {
492+
onSheetLayout({
493+
nativeEvent: {
494+
layout: sheetLayoutRef.current,
495+
},
496+
} as any);
497+
}
408498
},
409499
);
410500

@@ -430,7 +520,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
430520
rootViewLayoutEventValues.current.firstEventFired = true;
431521
}
432522
},
433-
[keyboard.keyboardShown, isModal, internalEventManager],
523+
[keyboard.keyboardShown, isModal, internalEventManager, onSheetLayout],
434524
);
435525

436526
const hideSheet = React.useCallback(
@@ -444,6 +534,8 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
444534
onBeforeClose?.((data || payloadRef.current || data) as never);
445535
setTimeout(() => {
446536
if (closable) {
537+
closing.current = true;
538+
Keyboard.dismiss();
447539
animationListeners.current.translateY &&
448540
animations.translateY.removeListener(
449541
animationListeners.current.translateY,
@@ -473,6 +565,10 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
473565
hiding.current = false;
474566
}
475567
currentSnapIndex.current = initialSnapIndex;
568+
closing.current = false;
569+
setTimeout(() => {
570+
keyboard.reset();
571+
});
476572
} else {
477573
animations.opacity.setValue(1);
478574
returnAnimation();
@@ -486,7 +582,14 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
486582
}
487583
},
488584
// eslint-disable-next-line react-hooks/exhaustive-deps
489-
[closable, hideAnimation, props.onClose, returnAnimation, setVisible],
585+
[
586+
closable,
587+
hideAnimation,
588+
props.onClose,
589+
returnAnimation,
590+
setVisible,
591+
keyboard,
592+
],
490593
);
491594

492595
const onHardwareBackPress = React.useCallback(() => {
@@ -1099,97 +1202,6 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
10991202
}
11001203
};
11011204

1102-
const onSheetLayout = React.useCallback(
1103-
(event: LayoutChangeEvent) => {
1104-
if (isOrientationChanging.current) return;
1105-
1106-
const rootViewHeight = dimensionsRef.current?.height;
1107-
const windowDimensions = Dimensions.get('window');
1108-
const orientationChanged =
1109-
dimensionsRef.current.portrait !==
1110-
windowDimensions.width < windowDimensions.height;
1111-
1112-
if (orientationChanged) isOrientationChanging.current = true;
1113-
1114-
actionSheetHeight.current =
1115-
event.nativeEvent.layout.height > dimensionsRef.current.height
1116-
? dimensionsRef.current.height
1117-
: event.nativeEvent.layout.height;
1118-
minTranslateValue.current =
1119-
rootViewHeight -
1120-
(actionSheetHeight.current + safeAreaPaddings.current.bottom);
1121-
1122-
if (initialValue.current < 0) {
1123-
animations.translateY.setValue(rootViewHeight * 1.1);
1124-
}
1125-
const nextInitialValue =
1126-
actionSheetHeight.current +
1127-
minTranslateValue.current -
1128-
(actionSheetHeight.current * snapPoints[currentSnapIndex.current]) /
1129-
100;
1130-
1131-
initialValue.current =
1132-
(keyboard.keyboardShown || keyboardWasVisible.current) &&
1133-
initialValue.current <= nextInitialValue &&
1134-
initialValue.current >= minTranslateValue.current
1135-
? initialValue.current
1136-
: nextInitialValue;
1137-
1138-
const sheetBottomEdgePosition =
1139-
initialValue.current +
1140-
(actionSheetHeight.current * snapPoints[currentSnapIndex.current]) /
1141-
100;
1142-
1143-
const sheetPositionWithKeyboard =
1144-
sheetBottomEdgePosition -
1145-
(dimensionsRef.current?.height - keyboard.keyboardHeight);
1146-
1147-
initialValue.current =
1148-
sheetPositionWithKeyboard > 0
1149-
? initialValue.current - sheetPositionWithKeyboard
1150-
: initialValue.current;
1151-
1152-
if (keyboard.keyboardShown) {
1153-
minTranslateValue.current =
1154-
minTranslateValue.current -
1155-
(keyboard.keyboardHeight + safeAreaPaddings.current.bottom);
1156-
1157-
keyboardWasVisible.current = true;
1158-
prevKeyboardHeight.current = keyboard.keyboardHeight;
1159-
} else {
1160-
keyboardWasVisible.current = false;
1161-
}
1162-
opacityAnimation(1);
1163-
setTimeout(() => {
1164-
returnAnimation();
1165-
}, 1);
1166-
1167-
if (isOrientationChanging.current) {
1168-
setTimeout(() => {
1169-
isOrientationChanging.current = false;
1170-
}, 300);
1171-
}
1172-
1173-
if (initialValue.current > 100) {
1174-
if (lock.current) return;
1175-
animations.underlayTranslateY.setValue(100);
1176-
}
1177-
if (Platform.OS === 'web') {
1178-
document.body.style.overflowY = 'hidden';
1179-
document.documentElement.style.overflowY = 'hidden';
1180-
}
1181-
},
1182-
[
1183-
snapPoints,
1184-
keyboard.keyboardShown,
1185-
keyboard.keyboardHeight,
1186-
opacityAnimation,
1187-
animations.translateY,
1188-
animations.underlayTranslateY,
1189-
returnAnimation,
1190-
],
1191-
);
1192-
11931205
const getRef = useCallback(
11941206
(): ActionSheetRef => ({
11951207
show: (snapIndex?: number) => {

0 commit comments

Comments
 (0)