Tab bar sometimes is pushed up by the keyboard.

[ruskid]

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

[ackdav]

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

[ruskid]

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

[ackdav]

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

[ruskid]

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.

[ackdav]

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

[arneson]

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

[ruskid]

I didn't test iOS

[ackdav]

Yup, only appeared on android

[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

[ruskid]

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

[ruskid]

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

[ackdav]

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.

[arneson]

Oh ok. https://github.com/aksonov/react-native-tabs/pull/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.

[ackdav]

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

[ruskid]

@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

[LMestre14]

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"

[tobycox]

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?

[damvanhuong]

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 - // https://github.com/facebook/react-native/issues/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 }) }

[abhishkekalia]

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

[samkaraca]

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