[0.64.0-rc.1] KeyboardAvoidingView repeatedly resizes when using keyboardVerticalOffset prop

[McAJBen]

Description

Changes to KeyboardAvoidingView in 0.64.0-rc.1 (b08fff6) cause the height of the view to repeatedly change between 2 values when keyboardVerticalOffset > 0. It looks like the view is running a setState every time it is rendered (which is running another setState). I have only confirmed that this happens on Android.

I was able to fix the issue by changing frame.height to this._initialFrameHeight here, but I don't know if that is the correct solution.

react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js

Line 91 in d197e95

return Math.max(frame.y + frame.height - keyboardY, 0);

React Native version:

System:
OS: macOS 11.0.1
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 258.55 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.9 - ~/.nvm/versions/node/v12.16.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
Android SDK:
API Levels: 21, 23, 26, 27, 28, 29, 30
Build Tools: 27.0.0, 27.0.3, 28.0.3, 29.0.1, 29.0.2, 29.0.3, 30.0.0, 30.0.0, 30.0.1
System Images: android-23 | Google APIs ARM EABI v7a, android-23 | Google APIs Intel x86 Atom, android-25 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 12.2/12B45b - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_221 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.1 => 17.0.1
react-native: 0.64.0-rc.1 => 0.64.0-rc.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Use an Android device.
2. Create a KeyboardAvoidingView with a keyboardVerticalOffset that is higher than 0.
3. Select a TextInput to open the keyboard.
4. The Blue background will flash on and off because the KeyboardAvoidingView is constantly resizing.

Expected Results

The KeyboardAvoidingView should stay a constant size once the keyboard is open.

Snack, code example, screenshot, or link to a repository:

function KeyboardResize() {
return (
    <>
        <KeyboardAvoidingView
            keyboardVerticalOffset={200}
            behavior="height"
            enabled={true}
            style={{ flex: 1, flexDirection: "column", backgroundColor: "red"}}
        >
            <View style={{flex: 1}}>
                <TextInput />
            </View>
        </KeyboardAvoidingView>
        <View style={{height: 200, backgroundColor: "blue"}} />
    </>
);
}