Tab bar sometimes is pushed up by the keyboard.

[Victor Demin]

When I focus on the input the tab bar is moved up instead of staying behind the keyboard.

[David]

I asked this a few days ago on stackoverflow: http://stackoverflow.com/questions/39344140/react-native-how-to-control-what-keyboard-pushes-up

[Victor Demin]

Did it work for you?

I am trying this code without success

import React, { Component } from 'react'
import { KeyboardAvoidingView } from 'react-native'
import { TabBar } from 'react-native-router-flux'

class NavigationTabBar extends Component {
  render () {
    return (
      <KeyboardAvoidingView behavior='position'>
        <TabBar {...this.props} />
      </KeyboardAvoidingView>
    )
  }
}

export default NavigationTabBar

[David]

not really no - havent had the time to try. he linked this one though: https://github.com/zubricky/react-native-android-keyboard-adjust

maybe that helps

[Victor Demin]

By looking the example it seems like Adjust is working globally on screen. While the main need is to apply it only for the tabbar.

[David]

@ruskid if you get it to work please let me know..

[Simon Arneson]

@ruskid @derdav3 Are you guys having issues on Android, iOS or Both?

[Victor Demin]

I didn't test iOS

[David]

Yup, only appeared on android

[Simon Arneson]

Are you using npm to handle the package? Try to depend immediately on this repo, the author merged my pull request regarding this a while back but I am unsure if he released a new version on npm. @derdav3 @ruskid

[Victor Demin]

Yep, i am using 1.0.9 will try this repo and write an update!

[Victor Demin]

Ok just tried this master version. TabBar still is pushed, but it's wierdly cut in a half like this.

[David]

yeah same here - it isn't fixed. If I have autoFocus on the TextInput the Tab isn't pushed. but if the component is already mounted (e.g. switching to another app and back) the Tabs get pushed.

[Simon Arneson]

Oh ok. #37
This was the PR that I wrote. As you can see I basically set the height of the tab bar to 0 when the keyboard is up. The only way to know if the keyboard is up or not is to listen for keyboard-events and it might be that these may not always be caught.I set up these listeners in componentWillMount(), try troubleshooting if these events are properly fired.

[David]

seems like the height is not 0 - something like 0.5.. I'll give it a try..

[Victor Demin]

@scanniza
I guess I know what happens here, height is not enaugh for my case:
my tabBarStyle had paddingTop, paddingBottom and top border.

I am not a big fun of how it's coupled with router flux's TabBar, it would be nice to have a prop to replace Tabs for fixes. It is difficult to debug/test it.

Why did you decide to use hidden class instead of state?

if(this.state.keyboardUp) return null or <View></View>

I didn't test it, just wondering if this is better approach

[Luís Mestre]

I've came here because I had the same problem, not only with this specific problem with tabbar of router flux, but because in the past week I had the same problem with a pseudo tabbar I created, and it did the same, at the time the solution I came up with was instead of using flex: 1 making the height of the view = to the height window. The solution that derdav3 put on stackoverflow solves the problem!

Go to your android manifest, and set android:windowSoftInputMode="adjustPan"

[Toby Cox]

Does this library just need a new release made @aksonov ?
I notice that react-native-router-flux pulls in an old version of this library that does not have the keyboard listener code in it.

If you made a new release and updated react-native-router-flux it might fix the issue for most people?

[Dam Van Huong]

Try this code.It worked for me

componentWillMount() {
// Using keyboardWillShow/Hide looks 1,000 times better, but doesn't work on
// Android
// TODO: Revisit this if Android begins to support -
// facebook/react-native#3468
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow)
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide)
}

componentWillUnmount() {
if (this.keyboardDidShowListener)
this.keyboardDidShowListener.remove()
if (this.keyboardDidHideListener)
this.keyboardDidHideListener.remove()
}

keyboardDidShow = (e) => {
console.log('keyboardDidShow')
NavigationActions.refresh({ hideTabBar: true })
}

keyboardDidHide = (e) => {
console.log('keyboardDidHide')
NavigationActions.refresh({ hideTabBar: false })
}

[abhishekkalia]

in AndroidManifest.xml
android:windowSoftInputMode="adjustResize" replace android:windowSoftInputMode="adjustPan"

[Hikmet]

Do what is @abhishkekalia saying then reinstall app to your device .