Keyboard covers input when inside a react navigation bottom tab navigator

Issue Description

The problem is when Gifted Chat is inside of a bottom tab navigator from react-navigation when I first focus the message box the keyboard covers the text input. Once I type the first letter the text input comes into view with the correct positioning.

This only happens when the GiftedChat component is inside a bottom tab navigator. Everything works fine when the chat component is inside ONLY a stack navigator. It breaks again if inside a stack navigator nested inside a tab navigator.

Steps to Reproduce / Code Snippets

import { View } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

function ThreadScreen() {
  return (
    <View style={{ flex: 1, backgroundColor: 'red' }}>
      <GiftedChat
        messages={[]}
        user={{
          _id: 1,
        }}
        onSend={() => {}}
      />
    </View>
  );
}

const Navigator = createAppContainer(
  createBottomTabNavigator({
    Thread: {
      screen: ThreadScreen,
    },
  })
);

function App() {
  return <Navigator />;
}

export default App;

Expected Results

The input should not be covered by keyboard on focus.

Additional Information

• Nodejs version: 8.16.1
• React version: 16.9.0
• React Native version: 0.61.1
• react-native-gifted-chat version: 0.10.1
• Platform(s) (iOS, Android, or both?): iOS

[woodcockjosh]

/reopen

[partiellkorrekt]

I am measuring the height of the Bottom TabBar in the following way:

Add hooks to the render-function:

const [bottomOffset, setBottomOffset] = useState(0)
const wrapper = useRef<View>()
const handleLayout = useCallback(() => {
  wrapper.current && wrapper.current.measureInWindow((_x: number, y: number, _width: number, height: number): void => {
    const nextBottomOffset = Dimensions.get('window').height - y - height
    setBottomOffset(nextBottomOffset)
  })
}, [])

And then wrap GiftedChat like this:

<View style={{ flex: 1 }} onLayout={handleLayout} ref={wrapper}>
  <GiftedChat
    bottomOffset={bottomOffset}
    {...chatProps}
  />
</View>