diff --git a/README.md b/README.md index e15f8dd..16a4f95 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 03f46af..a27d890 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,10 @@ function KeyboardAwareHOC( this.callbacks = {} this.position = { x: 0, y: 0 } this.defaultResetScrollToCoords = null + + 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 +250,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 }) @@ -386,7 +390,7 @@ 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() @@ -453,7 +457,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