diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index db89a91ab9ee70..e26d6771c47209 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -65,6 +65,7 @@ class KeyboardAvoidingView extends React.Component { _subscriptions: Array = []; viewRef: {current: React.ElementRef | null, ...}; _initialFrameHeight: number = 0; + _bottom: number = 0; constructor(props: Props) { super(props); @@ -129,20 +130,32 @@ class KeyboardAvoidingView extends React.Component { } }; + // Avoid unnecessary renders if the KeyboardAvoidingView is disabled. + _setBottom = (value: number) => { + const enabled = this.props.enabled ?? true; + this._bottom = value; + if (enabled) { + this.setState({bottom: value}); + } + }; + _updateBottomIfNecessary = async () => { if (this._keyboardEvent == null) { - this.setState({bottom: 0}); + this._setBottom(0); return; } const {duration, easing, endCoordinates} = this._keyboardEvent; const height = await this._relativeKeyboardHeight(endCoordinates); - if (this.state.bottom === height) { + if (this._bottom === height) { return; } - if (duration && easing) { + this._setBottom(height); + + const enabled = this.props.enabled ?? true; + if (enabled && duration && easing) { LayoutAnimation.configureNext({ // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m duration: duration > 10 ? duration : 10, @@ -152,9 +165,15 @@ class KeyboardAvoidingView extends React.Component { }, }); } - this.setState({bottom: height}); }; + componentDidUpdate(_: Props, prevState: State): void { + const enabled = this.props.enabled ?? true; + if (enabled && this._bottom !== prevState.bottom) { + this.setState({bottom: this._bottom}); + } + } + componentDidMount(): void { if (Platform.OS === 'ios') { this._subscriptions = [