Compare commits

...

2 Commits

Author SHA1 Message Date
Satyajit Sahoo
1406eb83ed chore: publish
- @react-navigation/stack@5.12.8
2020-11-21 05:32:53 +01:00
Satyajit Sahoo
3e069b718d fix: force dismiss keyboard if there was no gesture
closes #9078
2020-11-21 05:32:00 +01:00
6 changed files with 70 additions and 35 deletions

View File

@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
## [5.12.8](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.7...@react-navigation/stack@5.12.8) (2020-11-21)
### Bug Fixes
* force dismiss keyboard if there was no gesture ([3e069b7](https://github.com/react-navigation/react-navigation/commit/3e069b718d60f5381957f2d3838ee04ee9384779)), closes [#9078](https://github.com/react-navigation/react-navigation/issues/9078)
## [5.12.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@5.12.6...@react-navigation/stack@5.12.7) (2020-11-20)
**Note:** Version bump only for package @react-navigation/stack

View File

@@ -1,7 +1,7 @@
{
"name": "@react-navigation/stack",
"description": "Stack navigator component for iOS and Android with animated transitions and gestures",
"version": "5.12.7",
"version": "5.12.8",
"keywords": [
"react-native-component",
"react-component",

View File

@@ -1,15 +1,17 @@
import * as React from 'react';
import { TextInput, Platform, Keyboard } from 'react-native';
import { TextInput, Keyboard, HostComponent } from 'react-native';
type Props = {
enabled: boolean;
children: (props: {
onPageChangeStart: () => void;
onPageChangeConfirm: () => void;
onPageChangeConfirm: (force: boolean) => void;
onPageChangeCancel: () => void;
}) => React.ReactNode;
};
type InputRef = React.ElementRef<HostComponent<unknown>> | undefined;
export default class KeyboardManager extends React.Component<Props> {
componentWillUnmount() {
this.clearKeyboardTimeout();
@@ -17,7 +19,7 @@ export default class KeyboardManager extends React.Component<Props> {
// Numeric id of the previously focused text input
// When a gesture didn't change the tab, we can restore the focused input with this
private previouslyFocusedTextInput: any | null = null;
private previouslyFocusedTextInput: InputRef = undefined;
private startTimestamp: number = 0;
private keyboardTimeout: any;
@@ -35,7 +37,8 @@ export default class KeyboardManager extends React.Component<Props> {
this.clearKeyboardTimeout();
const input: any = TextInput.State.currentlyFocusedInput
// @ts-expect-error: blurTextInput accepts both number and ref, but types say only ref
const input: InputRef = TextInput.State.currentlyFocusedInput
? TextInput.State.currentlyFocusedInput()
: TextInput.State.currentlyFocusedField();
@@ -49,25 +52,30 @@ export default class KeyboardManager extends React.Component<Props> {
this.startTimestamp = Date.now();
};
private handlePageChangeConfirm = () => {
private handlePageChangeConfirm = (force: boolean) => {
if (!this.props.enabled) {
return;
}
this.clearKeyboardTimeout();
const input = this.previouslyFocusedTextInput;
if (force) {
// Always dismiss input, even if we don't have a ref to it
// We might not have the ref if onPageChangeStart was never called
// This can happen if page change was not from a gesture
Keyboard.dismiss();
} else {
const input = this.previouslyFocusedTextInput;
if (input) {
if (Platform.OS === 'android') {
Keyboard.dismiss();
} else {
if (input) {
// Dismiss the keyboard only if an input was a focused before
// This makes sure we don't dismiss input on going back and focusing an input
TextInput.State.blurTextInput(input);
}
}
// Cleanup the ID on successful page change
this.previouslyFocusedTextInput = null;
this.previouslyFocusedTextInput = undefined;
};
private handlePageChangeCancel = () => {
@@ -91,11 +99,11 @@ export default class KeyboardManager extends React.Component<Props> {
if (Date.now() - this.startTimestamp < 100) {
this.keyboardTimeout = setTimeout(() => {
TextInput.State.focusTextInput(input);
this.previouslyFocusedTextInput = null;
this.previouslyFocusedTextInput = undefined;
}, 100);
} else {
TextInput.State.focusTextInput(input);
this.previouslyFocusedTextInput = null;
this.previouslyFocusedTextInput = undefined;
}
}
};

View File

@@ -41,7 +41,7 @@ type Props = ViewProps & {
gestureDirection: GestureDirection;
onOpen: () => void;
onClose: () => void;
onTransitionStart?: (props: { closing: boolean }) => void;
onTransition?: (props: { closing: boolean; gesture: boolean }) => void;
onGestureBegin?: () => void;
onGestureCanceled?: () => void;
onGestureEnd?: () => void;
@@ -178,7 +178,7 @@ export default class Card extends React.Component<Props> {
transitionSpec,
onOpen,
onClose,
onTransitionStart,
onTransition,
} = this.props;
const toValue = this.getAnimateToValue({
@@ -198,7 +198,7 @@ export default class Card extends React.Component<Props> {
clearTimeout(this.pendingGestureCallback);
onTransitionStart?.({ closing });
onTransition?.({ closing, gesture: velocity !== undefined });
animation(gesture, {
...spec.config,
velocity,

View File

@@ -46,7 +46,7 @@ type Props = TransitionPreset & {
) => void;
onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
onPageChangeStart?: () => void;
onPageChangeConfirm?: () => void;
onPageChangeConfirm?: (force: boolean) => void;
onPageChangeCancel?: () => void;
onGestureStart?: (props: { route: Route<string> }) => void;
onGestureEnd?: (props: { route: Route<string> }) => void;
@@ -116,42 +116,58 @@ function CardContainer({
scene,
transitionSpec,
}: Props) {
React.useEffect(() => {
onPageChangeConfirm?.();
}, [active, onPageChangeConfirm]);
const handleOpen = () => {
onTransitionEnd?.({ route: scene.route }, false);
onOpenRoute({ route: scene.route });
const { route } = scene;
onTransitionEnd?.({ route }, false);
onOpenRoute({ route });
};
const handleClose = () => {
onTransitionEnd?.({ route: scene.route }, true);
onCloseRoute({ route: scene.route });
const { route } = scene;
onTransitionEnd?.({ route }, true);
onCloseRoute({ route });
};
const handleGestureBegin = () => {
const { route } = scene;
onPageChangeStart?.();
onGestureStart?.({ route: scene.route });
onGestureStart?.({ route });
};
const handleGestureCanceled = () => {
const { route } = scene;
onPageChangeCancel?.();
onGestureCancel?.({ route: scene.route });
onGestureCancel?.({ route });
};
const handleGestureEnd = () => {
onGestureEnd?.({ route: scene.route });
const { route } = scene;
onGestureEnd?.({ route });
};
const handleTransitionStart = ({ closing }: { closing: boolean }) => {
if (active && closing) {
onPageChangeConfirm?.();
const handleTransition = ({
closing,
gesture,
}: {
closing: boolean;
gesture: boolean;
}) => {
const { route } = scene;
if (!gesture) {
onPageChangeConfirm?.(true);
} else if (active && closing) {
onPageChangeConfirm?.(false);
} else {
onPageChangeCancel?.();
}
onTransitionStart?.({ route: scene.route }, closing);
onTransitionStart?.({ route }, closing);
};
const insets = {
@@ -201,7 +217,7 @@ function CardContainer({
overlay={cardOverlay}
overlayEnabled={cardOverlayEnabled}
shadowEnabled={cardShadowEnabled}
onTransitionStart={handleTransitionStart}
onTransition={handleTransition}
onGestureBegin={handleGestureBegin}
onGestureCanceled={handleGestureCanceled}
onGestureEnd={handleGestureEnd}

View File

@@ -65,7 +65,7 @@ type Props = {
) => void;
onTransitionEnd: (props: { route: Route<string> }, closing: boolean) => void;
onPageChangeStart?: () => void;
onPageChangeConfirm?: () => void;
onPageChangeConfirm?: (force: boolean) => void;
onPageChangeCancel?: () => void;
onGestureStart?: (props: { route: Route<string> }) => void;
onGestureEnd?: (props: { route: Route<string> }) => void;