From ad4450ac1364710f052a927ceda7ae353440f682 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Sun, 3 Dec 2017 21:05:45 -0800 Subject: [PATCH] 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.
Screenshot ![image](https://user-images.githubusercontent.com/351038/33261130-22cf2e0c-d362-11e7-8629-0cc70cda67d8.png)
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' && We're using position now } ``` 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 https://github.com/facebook/react-native/pull/16984 Differential Revision: D6472300 Pulled By: shergin fbshipit-source-id: c4041dfdd846cdc88b2e9d281517ed79da99dfe7 --- Libraries/Components/Keyboard/KeyboardAvoidingView.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/Libraries/Components/Keyboard/KeyboardAvoidingView.js index 1f6c4848496d5d..4b308d2728f235 100644 --- a/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -107,6 +107,10 @@ const KeyboardAvoidingView = createReactClass({ const {duration, easing, endCoordinates} = event; const height = this._relativeKeyboardHeight(endCoordinates); + if (this.state.bottom === height) { + return; + } + if (duration && easing) { LayoutAnimation.configureNext({ duration: duration,