Skip to content

Commit ad4450a

Browse files
koenpuntfacebook-github-bot
authored andcommitted
prevent scheduling unnecessary layoutanimation
Summary: when a hardware keyboard is connected, the virtual keyboard can be hidden (this can easily be demonstrated in the simulator), which means the height of the keyboard is 0. When in this case a `LayoutAnimation` is scheduled, the `KeyboardAvoidingView` won't be affected, but the next layout change will be animated, which can have unintended side-effects. This can also trigger the `Overriding previous layout animation with new one before the first began` warning. <details> <summary>Screenshot</summary> ![image](https://user-images.githubusercontent.com/351038/33261130-22cf2e0c-d362-11e7-8629-0cc70cda67d8.png) </details> Open the `KeyboardAvoidingView` example in the `RNTester` project, import `LayoutAnimation` and add something rendered conditionally to the content of the `Modal`, e.g.; ```jsx {this.state.behavior === 'position' && <Text>We're using position now</Text> } ``` Then update the `onSegmentChange` handler with a `LayoutAnimation`; ```js onSegmentChange = (segment: String) => { LayoutAnimation.easeInEaseOut(); this.setState({behavior: segment.toLowerCase()}); }; ``` Now open the example in the simulator and play with the "Toggle Software Keyboard" option; ![image](https://user-images.githubusercontent.com/351038/33262149-9ba182fa-d365-11e7-9491-890928656f5d.png) Now when you focus the input, no keyboard should appear, and when you then press an option of the segmented control, you should get the beforementioned warning. After this change this warning will no longer appear, but the component still behaves the same as before. [IOS] [BUGFIX] [KeyboardAvoidingView] - prevent scheduling unnecessary `LayoutAnimation` Closes #16984 Differential Revision: D6472300 Pulled By: shergin fbshipit-source-id: c4041dfdd846cdc88b2e9d281517ed79da99dfe7
1 parent 5b83dbe commit ad4450a

File tree

1 file changed

+4
-0
lines changed

1 file changed

+4
-0
lines changed

Libraries/Components/Keyboard/KeyboardAvoidingView.js

+4
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@ const KeyboardAvoidingView = createReactClass({
107107
const {duration, easing, endCoordinates} = event;
108108
const height = this._relativeKeyboardHeight(endCoordinates);
109109

110+
if (this.state.bottom === height) {
111+
return;
112+
}
113+
110114
if (duration && easing) {
111115
LayoutAnimation.configureNext({
112116
duration: duration,

0 commit comments

Comments
 (0)