Header gets pushed up on Android when keyboard first appears

Issue Description

I’m using react-native-keyboard-aware-scroll-view so have to set windowSoftInputMode to adjustPan. So I adopted the method of using KeyboardAvoidingView as described in the readme. Here is my code for the screen:

      <View style={styles.container}>
        <Header
          title={selectedConversation.conversation_name}
          onGoBack={this.onGoBack}
        />
        <GiftedChat
          messages={this.getMappedMessages()}
          onSend={this.onSend}
          user={this.getUser()}
          inverted={false}
          loadEarlier={!isFetchCompleted(conversationsFetchState)}
          isLoadingEarlier={!isFetchCompleted(conversationsFetchState)}
          renderLoadEarlier={() => (
            <View style={styles.activityIndicatorContainer}>
              <ActivityIndicator size="large" color={colors.gray} />
            </View>
          )}
        />
        {Platform.OS === 'android' && (
          <KeyboardAvoidingView behavior="padding" />
        )}
      </View>

However, the header gets pushed up when the keyboard first appears, but as soon as I type it displays normally again.

Here is a screen recording:

How can I fix this?

[JuulCrooymans]

For people that are using expo. I fixed it by changing "softwareKeyboardLayoutMode": "pan" to "softwareKeyboardLayoutMode": "resize" in app.json

[mehimanshupatil]

Has any one found fix for this