'React native keyboard covering input

I have pages with inputs aligned to the bottom of the page, when the keyboard pops up it covers the inputs. To solve this I am using, KeyboardAwareScrollView

However, I now get the the grey box scrolling off the screen when the keyboard pops up. How can I keep the content all on one screen and only scrollable for smaller screens?

  <KeyboardAwareScrollView
  scrollEnabled={true}
  enableOnAndroid={true}
  enableAutomaticScroll={true}
  contentContainerStyle={{
    height: "100%",
  }}
  extraHeight={0}
>
  <View style={styles.topContainer}>
    <MessageBox>
      <SubHeader title={driverDialogText} left smaller />
    </MessageBox>
  </View>

  <View style={styles.bottomContainer}>
    <MessageBox backgroundColor={colors.PRIMARY} right>
      ...content
    </MessageBox>
  </View>
</KeyboardAwareScrollView>

enter image description here

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source