From 755a7722073ce6a230ce42528d0eeb6c6961cea8 Mon Sep 17 00:00:00 2001 From: Cong Nguyen <> Date: Wed, 14 Jul 2021 17:45:57 +0700 Subject: [PATCH 1/4] add tabbar height props instead of default --- README.md | 5 ++++- lib/KeyboardAwareHOC.js | 29 +++++++++++++++++------------ 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index e15f8dd6..16a4f950 100644 --- a/README.md +++ b/README.md @@ -147,6 +147,8 @@ All the `ScrollView`/`FlatList` props will be passed. | `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 | +| `tabBarHeight` | `number` | tabBarHeight if viewIsInsideTabBar. Default isIphoneX screen 83 - normal is 49 | + ### Methods @@ -201,7 +203,8 @@ The available config options are: keyboardOpeningTime: number, viewIsInsideTabBar: boolean, refPropName: string, - extractNativeRef: Function + extractNativeRef: Function, + tabBarHeight: number, } ``` diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 3d94b824..216f14d3 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -44,6 +44,7 @@ const keyboardAwareHOCTypeEvents = supportedKeyboardEvents.reduce( export type KeyboardAwareHOCProps = { viewIsInsideTabBar?: boolean, + tabBarHeight: number, resetScrollToCoords?: { x: number, y: number @@ -99,6 +100,7 @@ export type KeyboardAwareHOCOptions = ?{ enableResetScrollToCoords: boolean, keyboardOpeningTime: number, viewIsInsideTabBar: boolean, + tabBarHeight: number, refPropName: string, extractNativeRef: Function } @@ -120,7 +122,7 @@ const ScrollIntoViewDefaultOptions: KeyboardAwareHOCOptions = { enableResetScrollToCoords: true, keyboardOpeningTime: _KAM_KEYBOARD_OPENING_TIME, viewIsInsideTabBar: false, - + tabBarHeight: undefined, // The ref prop name that will be passed to the wrapped component to obtain a ref // If your ScrollView is already wrapped, maybe the wrapper permit to get a ref // For example, with glamorous-native ScrollView, you should use "innerRef" @@ -128,12 +130,10 @@ const ScrollIntoViewDefaultOptions: KeyboardAwareHOCOptions = { // Sometimes the ref you get is a ref to a wrapped view (ex: Animated.ScrollView) // We need access to the imperative API of a real native ScrollView so we need extraction logic extractNativeRef: (ref: Object) => { - // getNode() permit to support Animated.ScrollView automatically, but is deprecated since RN 0.62 + // getNode() permit to support Animated.ScrollView automatically // see https://github.com/facebook/react-native/issues/19650 // see https://stackoverflow.com/questions/42051368/scrollto-is-undefined-on-animated-scrollview/48786374 - // see https://github.com/facebook/react-native/commit/66e72bb4e00aafbcb9f450ed5db261d98f99f82a - const shouldCallGetNode = !Platform.constants || (Platform.constants.reactNativeVersion.major === 0 && Platform.constants.reactNativeVersion.minor < 62) - if (ref.getNode && shouldCallGetNode) { + if (ref.getNode) { return ref.getNode() } else { return ref @@ -165,6 +165,7 @@ function KeyboardAwareHOC( static propTypes = { viewIsInsideTabBar: PropTypes.bool, + tabBarHeight: PropTypes.number, resetScrollToCoords: PropTypes.shape({ x: PropTypes.number.isRequired, y: PropTypes.number.isRequired @@ -193,6 +194,7 @@ function KeyboardAwareHOC( enableResetScrollToCoords: hocOptions.enableResetScrollToCoords, keyboardOpeningTime: hocOptions.keyboardOpeningTime, viewIsInsideTabBar: hocOptions.viewIsInsideTabBar, + tabBarHeight: hocOptions.tabBarHeight, enableOnAndroid: hocOptions.enableOnAndroid } @@ -203,8 +205,11 @@ function KeyboardAwareHOC( this.callbacks = {} this.position = { x: 0, y: 0 } this.defaultResetScrollToCoords = null + + console.log('tabBarHeight====', props.tabBarHeight) + const tabBarHeight: number = props.tabBarHeight || _KAM_DEFAULT_TAB_BAR_HEIGHT const keyboardSpace: number = props.viewIsInsideTabBar - ? _KAM_DEFAULT_TAB_BAR_HEIGHT + ? tabBarHeight : 0 this.state = { keyboardSpace } } @@ -246,7 +251,7 @@ function KeyboardAwareHOC( componentDidUpdate(prevProps: KeyboardAwareHOCProps) { if (this.props.viewIsInsideTabBar !== prevProps.viewIsInsideTabBar) { const keyboardSpace: number = this.props.viewIsInsideTabBar - ? _KAM_DEFAULT_TAB_BAR_HEIGHT + ? (this.props.tabBarHeight || _KAM_DEFAULT_TAB_BAR_HEIGHT) : 0 if (this.state.keyboardSpace !== keyboardSpace) { this.setState({ keyboardSpace }) @@ -368,10 +373,10 @@ function KeyboardAwareHOC( let keyboardSpace: number = frames.endCoordinates.height + this.props.extraScrollHeight if (this.props.viewIsInsideTabBar) { - keyboardSpace -= _KAM_DEFAULT_TAB_BAR_HEIGHT + keyboardSpace -= (this.props.tabBarHeight ||_KAM_DEFAULT_TAB_BAR_HEIGHT) } this.setState({ keyboardSpace }) - const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField() + const currentlyFocusedField = TextInput.State.currentlyFocusedField() const responder = this.getScrollResponder() if (!currentlyFocusedField || !responder) { return @@ -435,7 +440,7 @@ function KeyboardAwareHOC( _resetKeyboardSpace = () => { const keyboardSpace: number = this.props.viewIsInsideTabBar - ? _KAM_DEFAULT_TAB_BAR_HEIGHT + ? (this.props.tabBarHeight || _KAM_DEFAULT_TAB_BAR_HEIGHT) : 0 this.setState({ keyboardSpace }) // Reset scroll position after keyboard dismissal @@ -494,7 +499,7 @@ function KeyboardAwareHOC( } update = () => { - const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField() + const currentlyFocusedField = TextInput.State.currentlyFocusedField() const responder = this.getScrollResponder() if (!currentlyFocusedField || !responder) { @@ -548,7 +553,7 @@ function KeyboardAwareHOC( // listenToKeyboardEvents(ScrollView); // listenToKeyboardEvents(options)(Comp); const listenToKeyboardEvents = (configOrComp: any) => { - if (typeof configOrComp === 'object' && !configOrComp.displayName) { + if (typeof configOrComp === 'object') { return (Comp: Function) => KeyboardAwareHOC(Comp, configOrComp) } else { return KeyboardAwareHOC(configOrComp) From 20591be5139b2a106baaae38d131e53ce2b1f217 Mon Sep 17 00:00:00 2001 From: Cong Nguyen <> Date: Wed, 14 Jul 2021 18:09:12 +0700 Subject: [PATCH 2/4] - reverse to same master --- lib/KeyboardAwareHOC.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 216f14d3..55020f4d 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -376,7 +376,9 @@ function KeyboardAwareHOC( keyboardSpace -= (this.props.tabBarHeight ||_KAM_DEFAULT_TAB_BAR_HEIGHT) } this.setState({ keyboardSpace }) - const currentlyFocusedField = TextInput.State.currentlyFocusedField() + const currentlyFocusedField = TextInput.State.currentlyFocusedInput + ? findNodeHandle(TextInput.State.currentlyFocusedInput()) + : TextInput.State.currentlyFocusedField() const responder = this.getScrollResponder() if (!currentlyFocusedField || !responder) { return @@ -499,7 +501,9 @@ function KeyboardAwareHOC( } update = () => { - const currentlyFocusedField = TextInput.State.currentlyFocusedField() + TextInput.State.currentlyFocusedInput + ? findNodeHandle(TextInput.State.currentlyFocusedInput()) + : TextInput.State.currentlyFocusedField() const responder = this.getScrollResponder() if (!currentlyFocusedField || !responder) { @@ -553,7 +557,7 @@ function KeyboardAwareHOC( // listenToKeyboardEvents(ScrollView); // listenToKeyboardEvents(options)(Comp); const listenToKeyboardEvents = (configOrComp: any) => { - if (typeof configOrComp === 'object') { + if (typeof configOrComp === 'object' && !configOrComp.displayName) { return (Comp: Function) => KeyboardAwareHOC(Comp, configOrComp) } else { return KeyboardAwareHOC(configOrComp) From 291c87438f31835ad97da84161b344790148a449 Mon Sep 17 00:00:00 2001 From: Cong Nguyen <> Date: Wed, 14 Jul 2021 18:12:24 +0700 Subject: [PATCH 3/4] - minor, same format master code --- lib/KeyboardAwareHOC.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 55020f4d..78a123f9 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -376,9 +376,7 @@ function KeyboardAwareHOC( keyboardSpace -= (this.props.tabBarHeight ||_KAM_DEFAULT_TAB_BAR_HEIGHT) } this.setState({ keyboardSpace }) - const currentlyFocusedField = TextInput.State.currentlyFocusedInput - ? findNodeHandle(TextInput.State.currentlyFocusedInput()) - : TextInput.State.currentlyFocusedField() + const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField() const responder = this.getScrollResponder() if (!currentlyFocusedField || !responder) { return @@ -501,9 +499,7 @@ function KeyboardAwareHOC( } update = () => { - TextInput.State.currentlyFocusedInput - ? findNodeHandle(TextInput.State.currentlyFocusedInput()) - : TextInput.State.currentlyFocusedField() + const currentlyFocusedField = TextInput.State.currentlyFocusedInput ? findNodeHandle(TextInput.State.currentlyFocusedInput()) : TextInput.State.currentlyFocusedField() const responder = this.getScrollResponder() if (!currentlyFocusedField || !responder) { From 77fc8df1f1713e2bf9de07b0c9a6b294d8e0282f Mon Sep 17 00:00:00 2001 From: Cong Nguyen <> Date: Thu, 15 Jul 2021 14:40:28 +0700 Subject: [PATCH 4/4] - remove log --- lib/KeyboardAwareHOC.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/KeyboardAwareHOC.js b/lib/KeyboardAwareHOC.js index 78a123f9..e3ad8592 100644 --- a/lib/KeyboardAwareHOC.js +++ b/lib/KeyboardAwareHOC.js @@ -206,7 +206,6 @@ function KeyboardAwareHOC( this.position = { x: 0, y: 0 } this.defaultResetScrollToCoords = null - console.log('tabBarHeight====', props.tabBarHeight) const tabBarHeight: number = props.tabBarHeight || _KAM_DEFAULT_TAB_BAR_HEIGHT const keyboardSpace: number = props.viewIsInsideTabBar ? tabBarHeight