Skip to content

add tabbar height props instead of default #495

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -201,7 +203,8 @@ The available config options are:
keyboardOpeningTime: number,
viewIsInsideTabBar: boolean,
refPropName: string,
extractNativeRef: Function
extractNativeRef: Function,
tabBarHeight: number,
}
```

Expand Down
22 changes: 13 additions & 9 deletions lib/KeyboardAwareHOC.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ const keyboardAwareHOCTypeEvents = supportedKeyboardEvents.reduce(

export type KeyboardAwareHOCProps = {
viewIsInsideTabBar?: boolean,
tabBarHeight: number,
resetScrollToCoords?: {
x: number,
y: number
Expand Down Expand Up @@ -99,6 +100,7 @@ export type KeyboardAwareHOCOptions = ?{
enableResetScrollToCoords: boolean,
keyboardOpeningTime: number,
viewIsInsideTabBar: boolean,
tabBarHeight: number,
refPropName: string,
extractNativeRef: Function
}
Expand All @@ -120,20 +122,18 @@ 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"
refPropName: 'ref',
// 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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -193,6 +194,7 @@ function KeyboardAwareHOC(
enableResetScrollToCoords: hocOptions.enableResetScrollToCoords,
keyboardOpeningTime: hocOptions.keyboardOpeningTime,
viewIsInsideTabBar: hocOptions.viewIsInsideTabBar,
tabBarHeight: hocOptions.tabBarHeight,
enableOnAndroid: hocOptions.enableOnAndroid
}

Expand All @@ -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 }
}
Expand Down Expand Up @@ -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 })
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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
Expand Down