KeyboardAvoidingView not Working Properly

react native keyboardavoidingview not working android
keyboardavoidingview not working expo
react native keyboardavoidingview not working ios
keyboardavoidingview> </safeareaview
keyboardavoidingview not working with scrollview
react-navigation'; <keyboardavoidingview
expo keyboardavoidingview
keyboardverticaloffset react native
KeyboardAvoidingView not Working Properly

I am trying to use the KeyboardAvoidingView with behavior="padding".

For some reason, when I'm trying to enter any text in TextInput, there's a space below the TextInput. Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here?

  render() {
    return (

      <KeyboardAvoidingView  style={{ flex: 1}}  behavior="padding">
      < View
          style={{
            flex: 1,

          backgroundColor: "#FFFFFF",

        }}
      >

        <ScrollView
          contentContainerStyle={{ justifyContent: "flex-end", flex: 1 }}>
                <ChatInfo />
              </ScrollView>


          <View style={styles.container}>
          <TextInput
            style={styles.input}
            underlineColorAndroid="transparent"
            autoCapitalize="none"
            onChangeText={text => this.setState({ text: text })}
            value={this.state.text}
          />

          <TouchableOpacity
            style={styles.submitButton}
            onPress={this.submitName}
          >
            <Text style={styles.submitButtonText}> SEND </Text>
          </TouchableOpacity>
        </View>

      </ View>
      </KeyboardAvoidingView>
    );
  }
}

export default connect()(ChatScreen);

const styles = StyleSheet.create({
  input: {
    margin: 2,
    paddingLeft: 15,
    flex: 1,
    height: 40,
    padding: 10,
    fontSize: 14,
    fontWeight: "400"
  },

      container: {
        borderTopWidth: 1,
        minWidth: "100%",
        borderColor: "#cccccc",
        height: 44,
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor: "#fff"

      },

  submitButtonText: {
    color: "#0a9ffc",
    fontSize: 14,
    fontWeight: "500"
  },

  submitButton: {
    backgroundColor: "#fff",
    padding: 10,
    margin: 2,
    height: 40,
    alignItems: "center",
    justifyContent: "center"
  }
});

If you are using react-navigation, this is affected by the header of the react-navigation. The height of the header is vary on different mobile screen. So you have to get the height of the header and pass into the keyboardVerticalOffset props.

import { Header } from 'react-navigation';

<KeyboardAvoidingView
  keyboardVerticalOffset = {Header.HEIGHT + 20} // adjust the value here if you need more padding
  style = {{ flex: 1 }}
  behavior = "padding" >

  <ScrollView>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
    <TextInput/>
  </ScrollView> 

</KeyboardAvoidingView>

KeyboardAvoidingView not Working Properly, If you are using react-navigation, this is affected by the header of the react-​navigation. The height of the header is vary on different mobile  I am trying to use the KeyboardAvoidingView with behavior="padding". When I am trying to enter any text in TextInput, the TextInput field is not moving up. I have added a small view in the end which is moving up but the the view above it. I have also with KeyboardAvoidingView height property with offset. It was working few components like 2

This is a known issue with KeyboardAvoidingView and Android. There are multiple ways to address this issue.

React Native documentation says:

Android may behave better when given no behavior prop at all, whereas iOS is the opposite.

So, if you are working only with Android you may remove behavior prop and it should work straight away. For best results add android:windowSoftInputMode="adjustResize" to your Manifest.

Alternatively you can give an offset value that works for you something like this: KeyboardAvoidingView keyboardVerticalOffset={-500} behavior="padding"

For ios do the same thing conditionally:

behavior= {(Platform.OS === 'ios')? "padding" : null}

keyboardVerticalOffset={Platform.select({ios: 0, android: 500})}

React Native KeyboardAvoidingView not working properly, Not sure what the problem is. Is the keyboard height not being properly calculated? Additional Information. React Native version: 0.43.2; Platform:  I am using react-native-paper for Text Input and using KeyboardAvoidingView to remove keyboard issues and put Input fields above the KeyBoard, And this is working for other TextInput fields as expected not with the password fields, But When I remove secureTextEntry={true} this works fine on android, but this is not the solution as this line is mandatory in Password fields.

WARNING

This appears to be only a partial solution, although it works initially, if the android phone is locked on the screen with the keyboard avoiding layout, when you unlock you end up with the extra padding above the keyboard again.

tl;dr

Remove android:windowSoftInputMode="adjustResize" from the AndroidManifest.xml

Before
...
<activity
  android:name=".MainActivity"
  android:label="@string/app_name"  
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
  android:windowSoftInputMode="adjustResize"
  >
...
After
...
<activity
  android:name=".MainActivity"
  android:label="@string/app_name"  
  android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
  >
...
Why

If I understand the issue correctly, I have been dealing with the same thing. By having android:windowSoftInputMode="adjustResize" in the manifest, the android system will try to do the same job as the KeyboardAvoidingView. This results in extra spacing being added above the keyboard on Android only.

If working on both platforms you are going to have to deal with this on iOS every time you are working with keyboard input, so best to remove the android specific behaviour by android:windowSoftInputMode="adjustResize" from the manifest and using the KeyboardAvoidingView every time.

iOS KeyboardAvoidingView not Entirely Avoiding Keyboard · Issue , KeyboardAvoidingView doesn't work when behavior is padding on ios #22207 but if I recall correctly behavior="padding" basically works by varying the I am closing this issue because it does not contain the necessary  Currently when remove secureTextEntry={true} it works fine like when I press next button on keyboard it will go to password textInput field from State textInput field and also password textInput field scroll up and works perfectly, but when I added secureTextEntry={true} which is mandatory this is not working for password fields, working fine on

The KeyboardAvoidingView must be a ScrollView child, not the other way around. This way it behaves normal(normal for what purpose I am using it). Try it and let me know how it went.

<ScrollView>
    <KeyboardAvoidingView styles={styles.container} behavior='padding'>

    </KeyboardAvoidingView>
</ScrollView>

KeyboardAvoidingView doesn't work when behavior is padding on , KeyboardAvoidingView not Working Properly I am trying to use the KeyboardAvoidingView with behavior="padding". For some reason, When I am trying to enter  The KeyboardAvoidingView component in which the whole screen UI is wrapped but It was not working as expected but I did manage to find the workaround.

I think this is because the behavior props value, so I think adding this line in the keyboardavoidview will help

<KeyboardAvoidingView
    style = {{ flex: 1 }}
    behavior={Platform.OS === "ios" ? "padding" : null}>
</KeyboardAvoidingView>

KeyboardAvoidingView not Working Properly, I have a problem using keyboard avoiding view. If you close your eyes before running a build command it has a 25% higher chance of building successfully. I created the following sign up screen component with KeyboardAvoidingView: const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingHorizontal: 10, Stack Overflow Products

KeyBoard Avoiding View not workingANy : reactnative, KeyboardAvoidingView works on EXPO but not on APK? that might not be set correctly to adjustResize in the AndroidManifest.xml during the  The official documentation recommends not using any props for Android, however you can get around this by using the little trick below: When using ‘KeyboardAvoidingView’, our first choice is always padding (particularly if you don’t have many components in the screen, so remember to always test with smaller screens).

KeyboardAvoidingView not working on compiled app?, When you're working with React Native apps, a common problem is that I found that the keyboard avoiding view doesn't quite work with the  KeyboardAvoidingView does NOT handle TextInputs at all (separately or not). The whole purpose of KeyboardAvoidingView is reacting on software keyboard appearance events and adjusting own layout accordingly. It can change own position, size, and padding (the most common use case). KeyboardAvoidingView does NOT change ScrollView padding (aka insets).

How to make your React Native app respond gracefully when the , Not sure what the problem is. Is the keyboard height not being properly calculated? Additional Information. React Native version: 0.43.2; Platform: iOS  Reproduction Steps and Sample Code. Not really doing anything fancy here, this is actually even simpler code which results in the following screen shots. (The tab bar at the bottom of the app doesn't and isn't supposed to move with the rest of the view. It's intentionally obscured by the keyboard).

Comments
  • Try removing paddingBottom: this.keyboardHeight and add flex: 1 to keyboardavoidingview styles.
  • still not working@HSBP
  • Use KeyboardAwareScrollView (github.com/APSL/react-native-keyboard-aware-scroll-view) instead of ScrollView. Also you can try removing flex: 1 for TextInput style.
  • @CharanTeja Did you able to solve the problem? Can you add code of <ChatInfo />. I have tried removing some of your code. Its working.
  • For me keyboardVerticalOffset={Header.HEIGHT + 64} was the sweet spot. Thanks!
  • Just for clarify: I was still having some issues where just the TextInput goes up with keyboard (if I have a for example a Button or a Text it doesn't go up). To fix that, I wrapped the TextInput and the Button (or anything else) into a View.
  • thank you 🙏this work for me but still it does not working with padding behavior i set it to position and work like a charm.
  • thank you!! days trying to solve this and finally you provide me the working way!!
  • It seems you need to access Header from a new package now import { Header } from "react-navigation-stack";
  • Platform now has a select() method, so you can do something like this as well: behavior={Platform.select({android: undefined, ios: 'padding'})}
  • In my case, I was only able to get this working with behavior set to padding on both platforms. Setting it to null on Android didn't have any effect.