Keyboard pushes Navigation Bar off the screen

[jayesbe]

I am trying to create a layout with a text input at the bottom and a header at the top (chat window)

When the keyboard is not displayed, the layout looks as expected.

The scene is similar to this

<View style={{flex: 1}}>
     <View style={[position: 'absolute', top: 0, left: 0, right: 0, height: 50]}>

     </View>
     <View style={[position: 'absolute', bottom: 0, left: 0, right: 0, height: 50]}>
         <TextInput />
     </View>
<View>

When the TextInput gains focus and the keyboard is displayed, the TextInput sits right on top of the keyboard as expected.

However the element positioned at the top is pushed off the screen at the top.

[jayesbe]

It seems this might be a core issue. It looks like If I minimize the app, then bring it back up, it locks the element at the top as expected. When you first run the app it pushes it off the screen. Definitely seems like a bug to me.

[aksonov]

How it is connected with this component?

[jayesbe]

facebook/react-native#6785

@aksonov It is not. I believed it was a scene issue.. the same thing happens with the NavigationBar in the router. I made a ticket on ExNavigator as well (2.x same issue) however upon close inspection I found it must be a core bug so I made the above ticket.

[dongrenguang]

I also meet this question. Finally, I resolve it by defining the height of each scene, such as:

<Navigator ... sceneStyle={{height: **}} />

And, I also use a third party module https://github.com/jaysoo/react-native-extra-dimensions-android to get the real height.

[jayesbe]

@dongrenguang Did you set sceneStyle height to window dimensions ?

ie

const { width, height } = Dimensions.get('window')
const sceneStyle = { height: height } 

?

[pavloko]

+1 one here. I'm about to try the solution proposed above.

[philjoseph]

+1 for me as well. Checking the workaround

[krailler]

+1 here

[irsyadilham]

+1 gonna try it