From 111c4dd9e8a9075c680b34d46f0558b5a6debae7 Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Mon, 26 Jun 2023 18:31:32 +0200 Subject: [PATCH 1/3] improve-KeyboardAvoidingView --- .../Keyboard/KeyboardAvoidingView.js | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index db89a91ab9ee70..6418c763db31ef 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,31 @@ class KeyboardAvoidingView extends React.Component { } }; + // Avoid unnecessary renders if the KeyboardAvoidingView is disabled. + _setBottom = (value: number) => { + const {enabled = true} = this.props; + 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); + + 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 +164,15 @@ class KeyboardAvoidingView extends React.Component { }, }); } - this.setState({bottom: height}); }; + componentDidUpdate(_: Props, prevState: State): void { + const {enabled = true} = this.props; + if (enabled && this._bottom !== prevState.bottom) { + this.setState({bottom: this._bottom}); + } + } + componentDidMount(): void { if (Platform.OS === 'ios') { this._subscriptions = [ From 7d6a2457c80d1bc9c2a425209b0fcc1481bc6fee Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Tue, 27 Jun 2023 19:20:05 +0200 Subject: [PATCH 2/3] fix conditions checking if the KeyboardAvoidingView is enabled --- .../Libraries/Components/Keyboard/KeyboardAvoidingView.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index 6418c763db31ef..d405cbf700c91f 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -134,7 +134,7 @@ class KeyboardAvoidingView extends React.Component { _setBottom = (value: number) => { const {enabled = true} = this.props; this._bottom = value; - if (enabled) { + if (enabled === true) { this.setState({bottom: value}); } }; @@ -154,7 +154,8 @@ class KeyboardAvoidingView extends React.Component { this._setBottom(height); - if (enabled && duration && easing) { + const {enabled = true} = this.props; + if (enabled === true && duration && easing) { LayoutAnimation.configureNext({ // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m duration: duration > 10 ? duration : 10, @@ -168,7 +169,7 @@ class KeyboardAvoidingView extends React.Component { componentDidUpdate(_: Props, prevState: State): void { const {enabled = true} = this.props; - if (enabled && this._bottom !== prevState.bottom) { + if (enabled === true && this._bottom !== prevState.bottom) { this.setState({bottom: this._bottom}); } } From f0eaf67b395303d6f1b768150cd386458407d9eb Mon Sep 17 00:00:00 2001 From: Adam Grzybowski Date: Thu, 29 Jun 2023 11:39:02 +0200 Subject: [PATCH 3/3] change styling --- .../Components/Keyboard/KeyboardAvoidingView.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index d405cbf700c91f..e26d6771c47209 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -132,9 +132,9 @@ class KeyboardAvoidingView extends React.Component { // Avoid unnecessary renders if the KeyboardAvoidingView is disabled. _setBottom = (value: number) => { - const {enabled = true} = this.props; + const enabled = this.props.enabled ?? true; this._bottom = value; - if (enabled === true) { + if (enabled) { this.setState({bottom: value}); } }; @@ -154,8 +154,8 @@ class KeyboardAvoidingView extends React.Component { this._setBottom(height); - const {enabled = true} = this.props; - if (enabled === true && duration && easing) { + 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, @@ -168,8 +168,8 @@ class KeyboardAvoidingView extends React.Component { }; componentDidUpdate(_: Props, prevState: State): void { - const {enabled = true} = this.props; - if (enabled === true && this._bottom !== prevState.bottom) { + const enabled = this.props.enabled ?? true; + if (enabled && this._bottom !== prevState.bottom) { this.setState({bottom: this._bottom}); } }