Bug when keyboard is showed with createMaterialTopTabNavigator of react-navigation

[AlexisJamin]

Hey,

Here is my code :

export default class FeedFriends extends React.Component {

  constructor() {
    super();
  }

render () {
  return (

    <View style={{flex:1, backgroundColor:'white'}}> 

    
     <KeyboardAccessory>
	  <View style={{ flexDirection: 'row', height: 40 }}>
	    <TextInput
	      style={{ flex: 1, height: 30, borderWidth: 1 }}
	      placeholder='Click me!' />
	  </View>
	</KeyboardAccessory>


    </View>           

    );
  }
}

And here is what I get when I click on the <TextInput/> :

I'm using Expo : v30.0.0
React : v16.3.1
React Native : 0.55.4
Bugs on iPhone 6S and Android Huawei P6 2018

EDIT : I'm also using react-navigation : 2.13.0. And createMaterialTopTabNavigator with TabBarPosition: "bottom".

If I put TabBarPosition: "top", it removes the bug :

Thanks for your help ! :-)

[just4fun]

@AlexisJamin - Thanks for your PR!

It seems that this library was not compatible with createMaterialTopTabNavigator of react-navigation, because if I used the code you attached directly without react-navigation, it works well on iPhone 6S.

Your PR looks good, but it more looks like workaround to bypass the issue.

My suggestion is,

1. Could you use https://snack.expo.io/ to simulate the situation with react-navigation so I can debug with real scenario?
2. Please also use SafeAreaView from react-native or react-navigation to make sure you app will work for new iPhones.

[AlexisJamin]

@just4fun thanks for your reply. Indeed my PR is a workaround. But I don't have the skills sorry to do better at this point.

Here is my snack reproducing the bug : https://snack.expo.io/ByDDZv_yN

Hope it helps ! :-)

[just4fun]

@AlexisJamin - I debugged your demo, the issue is existed indeed.

However, the weird thing it that the e.endCoordinates.height (the height of keyboard) has same value no matter you put the bar of react-navigation in top or bottom, that leads us hard to find the root cause.

Since this library is pretty simple, rather than improve it to integrate with every popular libraries, I'd like to find a common way to handle it easily.

In this case, your PR is not a workaround, it's also an approach for user to customize the height, so I'd like to accept it.

My further suggestions:

1. If you're using v0.1.2, try to upgrade react-navigation to latest version (not sure whether it's caused by old react-navigation)
2. Once I accept you PR, try to use the new version
3. Just notice there is official InputAccessoryView, you can also have a try

Thanks.

[AlexisJamin]

@just4fun thanks for your answer.

I'm using react-navigation (v2.13.0) used by Expo XDE v.30.0.0 (last is v31.0.0 that just came out).

It's not an old version. I think we should really get rid of this bug !

[just4fun]

@AlexisJamin - I mean the latest react-navigation, the latest version is 3.x.

Anyway, I'd like to re-clarify my points.

1. What this library does is very simple, get the height of keyboard, then set to bottom of the accessary, that's all. The only thing we need to care about is that for new iPhone devices, we should reduce 34 which is the height of bottom safe area. This library has already handled it.
2. For the tab-based app, I tried some apps, and I found most of them are implemented in two ways. First, there is no input in the first screen, which means the input will only displayed in stack navigator. Second, if you need to include the input in the first screen, when you focus the input, the bottom tabs will always be hidden manually. In these two ways, I think the issue will not happen. It doesn't say this is not an issue, but just noticed that many apps did in such ways.
3. I know react-navigation is popular, actually I also used it in my iOS app: https://github.com/just4fun/stuhome. To handle different kind integration cases with these popular libraries, I'd like to accept your PR to handle that easily.
4. I didn't try the official InputAccessoryView yet. Once I figure out that component has similar feature, I will mark this library as deprecated. This is like in the old react-native (0.1x), we even have no RefreshControl, so we used 3rd party pull-to-refresh component.