React Native - Keep React Navigation Stack Header from moving with KeyboardAvoidingView (Android)

I have a messaging page in my application that is part of a React-Navigation-Stack and has a header with a back button. The messages are contained within KeyboardAvodingView and ScrollView, but when I open the keyboard on android I lose the header. I've played with settings in the AndroidManifest file, currently using android:windowSoftInputMode="adjustPan" but have not been able to fix the issue. I've also seen other people have this issue due to but none of the their solutions solved the issue.

import React, { useState, useEffect, useRef } from 'react'
import { StyleSheet, View, Text, TextInput, ScrollView, KeyboardAvoidingView, Platform, NativeModules, SafeAreaView, Keyboard } from 'react-native'
import Message from './message'


let Messages = props => {
  let { StatusBarManager } = NativeModules
  let scrollViewRef = useRef()

  let [messages, setMessages] = useState([])
  let [keyboardPadding, setKeyboardPadding] = useState(0)
  let [statusBarHeight, setStatusBarHeight] = useState(0)

  useEffect(() => {
    Platform.OS == 'ios' ? StatusBarManager.getHeight((statusBarFrameData) => {
      setStatusBarHeight(statusBarFrameData.height)
    }) : null 
    let keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', keyboardWillShow)
    let keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', keyboardWillHide)

    return () => {
      keyboardWillShowListener.remove()
      keyboardWillHideListener.remove()
    }
  }, [messages, keyboardPadding])


  let keyboardWillShow = (e) => {
    setKeyboardPadding(1)
  }

  let keyboardWillHide = () => {
    setKeyboardPadding(0)
  }

  let scrollStyles = (keyboardPadding) => {
    return { paddingBottom: keyboardPadding }
  }

  let renderMessages = (messages) => {
    return messages.map((data, i) => <Message data={data} key={i}/>)
  } 

  let addMessage = (message) => {
    let messageObj = {
      message: message,
      userId: 2,
      userName: 'Sean'
    }
    setMessages([...messages, messageObj])
  }

  return (
    <SafeAreaView style={styles.container}>
        <KeyboardAvoidingView 
          style={styles.keyboardContainer}
          behavior={Platform.OS == 'ios' ? 'padding' : null}
          keyboardVerticalOffset={statusBarHeight + 44}
        >
          <ScrollView 
            ref={scrollViewRef}
            onContentSizeChange={(contentWidth, contentHeight)=> {scrollViewRef.current.scrollToEnd({animated: true})}}
          >
            <View style={scrollStyles(keyboardPadding)}>
              {renderMessages(messages)}
            </View>
          </ScrollView>
          <View style={styles.textBox}>
            <TextInput 
              style={styles.textInput}
              placeholder='Reply...'
              placeholderTextColor={'rgb(216,216,216)'}
              returnKeyType='done'
              autoCapitalize='none'
              selectionColor='#3490dc'
              multiline={true}
              blurOnSubmit={true}
              onSubmitEditing={(e)=> addMessage(e.nativeEvent.text)}
            />
          </View>  
        </KeyboardAvoidingView>  
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'rgb(0,0,0)'
    },
    keyboardContainer: {
      flex: 1,
      backgroundColor: 'rgb(0,0,0)'
    },
    textInput: {
      color: 'rgb(255,255,255)',
      fontSize: 18,
    },
    textBox: {
      borderColor: '#242F39',
      borderWidth: 1,
      borderRadius: 2, 
      padding: 10,
      paddingLeft: 16,
      backgroundColor: '#0A151F',
    },
})

export default Messages