0

I am using <KeyboardAvoidingView/> to try to create a messaging interface in React Native wherein upon entering the text field, the field raises up so the user can see what they're typing. I have the following syntax...

<Gradient
colorOne={COLORS.gradientColor1}
colorTwo={COLORS.gradientColor2}
style={{width: maxWidth * 1.00, height: '100%'}}
>
  <KeyboardAvoidingView
  behavior="padding"
  enabled
  style={{flexGrow:1}}
  >
    {renderHeader()}
    {MainRender()}
  </KeyboardAvoidingView>
</Gradient>

However, in execution, the following occurs... enter image description here

enter image description here

1 Answers1

0

You can try install react-native-keyboard-aware-scroll-view package and use it in your code like this:

 <KeyboardAwareScrollView 
   enableAutomaticScroll={false}  
   bounces={false} 
   enableOnAndroid         
   keyboardShouldPersistTaps='handled'>
    {content}
 </KeyboardAwareScrollView>

Hope this will help you.

Nightcrawler
  • 943
  • 1
  • 11
  • 32
  • I was actually using this package before and it worked better but still not well. It created a weird gap between my keyboard and the page, and then I could scroll that gap to be bigger to the point where the whole screen was just my keyboard and a grey screen –  Oct 31 '22 at 16:51