'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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|