1

In my react-native app, I have a keyboardAwareScrollView and Buttons below that.
When keyboard is not shown, ScrollView works fine and Button is always shown at bottom of the screen.

But when Keyboard pops up:

  • on iOS the Button is not displayed on top of keyboard (Expected Case)
  • on Android the Button Floats on top of Keyboard (as show in pic below)

I want the Button at bottom to now show when keyBoard opens up (like in iOS).

    <View style={{flex:1}}>
        <KeyboardAwareScrollView keyboardShouldPersistTaps='handled'>
            ...
            <TextInput /> 
            ...
        </KeyboardAwareScrollView>
        <Button>Save</Button>
    </View>

As given in answer here I tried editing the AndroidManifest.xml file like below.
It fixes the Buttons not floating up above the Keyboard but it causes the KeyboardAwareScrollView to now work like it should (Some items get hidden behind the keyboard)

android:windowSoftInputMode="adjustPan"

and

android:windowSoftInputMode="adjustNothing"

enter image description here

kernelman
  • 992
  • 1
  • 13
  • 28
  • you just didn't enable ios hardware keyboard , otherwise it would be same for both . – nazmul Oct 19 '20 at 04:14
  • How to enable the "hardware keyboard" ... there is only soft keyboard afaik. I tried on physical phone as well (not only on simulator). its works fine on iOS. – kernelman Oct 19 '20 at 06:02

1 Answers1

0

This worked for me,

setting

 android:windowSoftInputMode="adjustResize"

and using KeyboardAvoidingView component from react-native to automatically adjust the views to keyboard

 <KeyboardAvoidingView
   behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
   style={{flex: 1}}>
   <ScrollView
     keyboardShouldPersistTaps="handled">
     ... 
     <TextInput /> 
     ...
   </ScrollView>
   <Button>Save</Button>
 </KeyboardAvoidingView>
imKrishh
  • 762
  • 1
  • 6
  • 11
  • 1
    Hi @imKrishh, your answer worked, but i had to move the – kernelman Oct 20 '20 at 12:53