From 39119bb434659cd2f8efc0c6341bc0c4eb1cd4b4 Mon Sep 17 00:00:00 2001 From: Andrey Tsaplin Date: Thu, 14 Nov 2019 23:07:54 +0300 Subject: [PATCH 1/5] separate option for disabling content inset --- lib/KeyboardAwareHOC.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 4bf0ed0..2aa0e30 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -50,6 +50,7 @@ export type KeyboardAwareHOCProps = { }, enableResetScrollToCoords?: boolean, enableAutomaticScroll?: boolean, + enableContentInset?: boolean, extraHeight?: number, extraScrollHeight?: number, keyboardOpeningTime?: number, @@ -94,6 +95,7 @@ export type KeyboardAwareHOCOptions = ?{ enableOnAndroid: boolean, contentContainerStyle: ?Object, enableAutomaticScroll: boolean, + enableContentInset: boolean, extraHeight: number, extraScrollHeight: number, enableResetScrollToCoords: boolean, @@ -115,6 +117,7 @@ const ScrollIntoViewDefaultOptions: KeyboardAwareHOCOptions = { enableOnAndroid: false, contentContainerStyle: undefined, enableAutomaticScroll: true, + enableContentInset: false, extraHeight: _KAM_EXTRA_HEIGHT, extraScrollHeight: 0, enableResetScrollToCoords: true, @@ -169,6 +172,7 @@ function KeyboardAwareHOC( }), enableResetScrollToCoords: PropTypes.bool, enableAutomaticScroll: PropTypes.bool, + enableContentInset: PropTypes.bool, extraHeight: PropTypes.number, extraScrollHeight: PropTypes.number, keyboardOpeningTime: PropTypes.number, @@ -186,6 +190,7 @@ function KeyboardAwareHOC( // HOC options are used to init default props, so that these options can be overriden with component props static defaultProps = { enableAutomaticScroll: hocOptions.enableAutomaticScroll, + enableContentInset: hocOptions.enableContentInset, extraHeight: hocOptions.extraHeight, extraScrollHeight: hocOptions.extraScrollHeight, enableResetScrollToCoords: hocOptions.enableResetScrollToCoords, @@ -361,14 +366,19 @@ function KeyboardAwareHOC( // Keyboard actions _updateKeyboardSpace = (frames: Object) => { + let keyboardSpace: number = + frames.endCoordinates.height + this.props.extraScrollHeight + if (this.props.viewIsInsideTabBar) { + keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT + } + + // Content inset for keyboard box + if(this.props.enableAutomaticScroll || this.props.enableContentInset) { + this.setState({keyboardSpace}) + } + // Automatically scroll to focused TextInput if (this.props.enableAutomaticScroll) { - let keyboardSpace: number = - frames.endCoordinates.height + this.props.extraScrollHeight - if (this.props.viewIsInsideTabBar) { - keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT - } - this.setState({ keyboardSpace }) const currentlyFocusedField = TextInput.State.currentlyFocusedField() const responder = this.getScrollResponder() if (!currentlyFocusedField || !responder) { From 3c5fc7c07833f705b0d4c4a097a01b911fd71a65 Mon Sep 17 00:00:00 2001 From: Andrey Tsaplin Date: Thu, 14 Nov 2019 23:36:23 +0300 Subject: [PATCH 2/5] insetOnly option --- README.md | 24 +++++++++++++----------- lib/KeyboardAwareHOC.js | 15 ++++++++------- 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index e15f8dd..5a92d2f 100644 --- a/README.md +++ b/README.md @@ -125,6 +125,7 @@ Android Support is not perfect, here is the supported list: | `viewIsInsideTabBar` | Yes | | `resetScrollToCoords` | Yes | | `enableAutomaticScroll` | Yes | +| `enableContentInset` | Yes | | `extraHeight` | Yes | | `extraScrollHeight` | Yes | | `enableResetScrollToCoords` | Yes | @@ -136,17 +137,18 @@ Android Support is not perfect, here is the supported list: All the `ScrollView`/`FlatList` props will be passed. -| **Prop** | **Type** | **Description** | -| --------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- | -| `innerRef` | `Function` | Catch the reference of the component. | -| `viewIsInsideTabBar` | `boolean` | Adds an extra offset that represents the `TabBarIOS` height. | -| `resetScrollToCoords` | `Object: {x: number, y: number}` | Coordinates that will be used to reset the scroll when the keyboard hides. | -| `enableAutomaticScroll` | `boolean` | When focus in `TextInput` will scroll the position, default is enabled. | -| `extraHeight` | `number` | Adds an extra offset when focusing the `TextInput`s. | -| `extraScrollHeight` | `number` | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. | -| `enableResetScrollToCoords` | `boolean` | Lets the user enable or disable automatic resetScrollToCoords. | -| `keyboardOpeningTime` | `number` | Sets the delay time before scrolling to new position, default is 250 | -| `enableOnAndroid` | `boolean` | Enable Android Support | +| **Prop** | **Type** | **Description** | +| --------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `innerRef` | `Function` | Catch the reference of the component. | +| `viewIsInsideTabBar` | `boolean` | Adds an extra offset that represents the `TabBarIOS` height. | +| `resetScrollToCoords` | `Object: {x: number, y: number}` | Coordinates that will be used to reset the scroll when the keyboard hides. | +| `enableAutomaticScroll` | `boolean` | When focus in `TextInput` will scroll the position, default is enabled. | +| `insetOnly` | `boolean` | Only adds content inset for the keyboard and disables autoScroll. iOS will fit TextInput to the screen if it was visible before keyboard open. Default is false. | +| `extraHeight` | `number` | Adds an extra offset when focusing the `TextInput`s. | +| `extraScrollHeight` | `number` | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. | +| `enableResetScrollToCoords` | `boolean` | Lets the user enable or disable automatic resetScrollToCoords. | +| `keyboardOpeningTime` | `number` | Sets the delay time before scrolling to new position, default is 250 | +| `enableOnAndroid` | `boolean` | Enable Android Support | ### Methods diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 2aa0e30..2981cdf 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -50,7 +50,7 @@ export type KeyboardAwareHOCProps = { }, enableResetScrollToCoords?: boolean, enableAutomaticScroll?: boolean, - enableContentInset?: boolean, + insetOnly?: boolean, extraHeight?: number, extraScrollHeight?: number, keyboardOpeningTime?: number, @@ -95,7 +95,7 @@ export type KeyboardAwareHOCOptions = ?{ enableOnAndroid: boolean, contentContainerStyle: ?Object, enableAutomaticScroll: boolean, - enableContentInset: boolean, + insetOnly: boolean, extraHeight: number, extraScrollHeight: number, enableResetScrollToCoords: boolean, @@ -117,7 +117,7 @@ const ScrollIntoViewDefaultOptions: KeyboardAwareHOCOptions = { enableOnAndroid: false, contentContainerStyle: undefined, enableAutomaticScroll: true, - enableContentInset: false, + insetOnly: false, extraHeight: _KAM_EXTRA_HEIGHT, extraScrollHeight: 0, enableResetScrollToCoords: true, @@ -172,7 +172,7 @@ function KeyboardAwareHOC( }), enableResetScrollToCoords: PropTypes.bool, enableAutomaticScroll: PropTypes.bool, - enableContentInset: PropTypes.bool, + insetOnly: PropTypes.bool, extraHeight: PropTypes.number, extraScrollHeight: PropTypes.number, keyboardOpeningTime: PropTypes.number, @@ -190,7 +190,7 @@ function KeyboardAwareHOC( // HOC options are used to init default props, so that these options can be overriden with component props static defaultProps = { enableAutomaticScroll: hocOptions.enableAutomaticScroll, - enableContentInset: hocOptions.enableContentInset, + insetOnly: hocOptions.insetOnly, extraHeight: hocOptions.extraHeight, extraScrollHeight: hocOptions.extraScrollHeight, enableResetScrollToCoords: hocOptions.enableResetScrollToCoords, @@ -372,9 +372,10 @@ function KeyboardAwareHOC( keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT } - // Content inset for keyboard box - if(this.props.enableAutomaticScroll || this.props.enableContentInset) { + // Only content inset for keyboard box + if(this.props.insetOnly) { this.setState({keyboardSpace}) + return; } // Automatically scroll to focused TextInput From 57be85a0b7fcfc36fce4bf6e72bd52375068c28b Mon Sep 17 00:00:00 2001 From: Andrey Tsaplin Date: Thu, 14 Nov 2019 23:45:08 +0300 Subject: [PATCH 3/5] lint fix and version bump --- lib/KeyboardAwareHOC.js | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 2981cdf..0a0e28c 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -373,9 +373,9 @@ function KeyboardAwareHOC( } // Only content inset for keyboard box - if(this.props.insetOnly) { + if (this.props.insetOnly) { this.setState({keyboardSpace}) - return; + return } // Automatically scroll to focused TextInput diff --git a/package.json b/package.json index e5f3045..4c1aa8c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-keyboard-aware-scroll-view", - "version": "0.9.1", + "version": "0.9.2", "description": "A React Native ScrollView component that resizes when the keyboard appears.", "main": "index.js", "types": "index.d.ts", From 48f506724fa0b0268c4865cf092de8954b40f00e Mon Sep 17 00:00:00 2001 From: Andrey Tsaplin Date: Fri, 15 Nov 2019 00:09:40 +0300 Subject: [PATCH 4/5] fixed autoscroll behavior --- lib/KeyboardAwareHOC.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 0a0e28c..313fce4 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -372,14 +372,10 @@ function KeyboardAwareHOC( keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT } - // Only content inset for keyboard box - if (this.props.insetOnly) { - this.setState({keyboardSpace}) - return - } + this.setState({keyboardSpace}) // Automatically scroll to focused TextInput - if (this.props.enableAutomaticScroll) { + if (this.props.enableAutomaticScroll && !this.props.insetOnly) { const currentlyFocusedField = TextInput.State.currentlyFocusedField() const responder = this.getScrollResponder() if (!currentlyFocusedField || !responder) { From 31e7d8fef36d1dfbcb1599b29efb266f5d832e91 Mon Sep 17 00:00:00 2001 From: Andrey Tsaplin Date: Fri, 15 Nov 2019 02:41:17 +0300 Subject: [PATCH 5/5] fixed README --- README.md | 2 +- lib/KeyboardAwareHOC.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 5a92d2f..2d52b45 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ Android Support is not perfect, here is the supported list: | `viewIsInsideTabBar` | Yes | | `resetScrollToCoords` | Yes | | `enableAutomaticScroll` | Yes | -| `enableContentInset` | Yes | +| `insetOnly` | Yes | | `extraHeight` | Yes | | `extraScrollHeight` | Yes | | `enableResetScrollToCoords` | Yes | diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 313fce4..7692e5b 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -371,7 +371,6 @@ function KeyboardAwareHOC( if (this.props.viewIsInsideTabBar) { keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT } - this.setState({keyboardSpace}) // Automatically scroll to focused TextInput