KeyboardAvoidingView Shrinks My TextInputs No Matter What

Question

No matter what I do, KeyboardAvoidingView shrinks my TextInputs as much as it can instead of adding padding to the content above them and pushing them off the screen.

All I want is the normal behavior where my content is padded off the screen and nothing shrinks as is seen in the simplest tutorials using this component. I've tried all the behaviors, and all kinds of permutations of view hierarchies. No matter what I do, it will shrink the inputs.

<KeyboardAvoidingView style={Styles.containerView} behavior={'padding'}>
<View style={Styles.topContainerView}>
    <Image style={Styles.subLogo} source={require('../../../assets/images/app-icon.png')} />
    <View style={{justifyContent: 'center', marginVertical: 10}}>
        <Text style={Styles.subtext}>{subtext}</Text>
    </View>
        <TextInput 
            style={Styles.textInput} 
            onChangeText={(text) => this.setState({firstName: text})}
            value={this.state.firstName}
            />
        <TextInput
            style={Styles.textInput} 
            onChangeText={(text) => this.setState({lastName: text})}
            value={this.state.lastName}
            placeholderText={'Last Name'}
            />
    <TextInput 
        style={Styles.textInput} 
        onChangeText={(text) => this.setState({email: text})}
        value={this.state.email}
        placeholderText={'Enter Email'}
        />
    <TextInput 
        style={Styles.textInput} 
        onChangeText={(text) => this.setState({password: text})}
        value={this.state.password}
        placeholderText={'Enter Password'}
        secureTextEntry={true}
        />

        <TextInput 
            style={Styles.textInput} 
            onChangeText={(text) => this.setState({confirmPassword: text})}
            value={this.state.confirmPassword}
            placeholderText={'Confirm Password'}
            secureTextEntry={true}
            />
</View>
<View style={Styles.bottomContainerView}>
    <Button buttonStyle={Styles.continueButton} text={"Continue"} onPress={continueAction} />
    <TouchableOpacity style={Styles.cancelContainer} onPress={this.goBack}>
        <Text style={Styles.cancelText}>{'Cancel'}</Text>
    </TouchableOpacity>
</View> 
</KeyboardAvoidingView>

In my code above, the Image element and subtext below it will not budge. No padding will be added to them nor will they shrink. Instead, the TextInputs will all shrink.

I just want them to be pushed off the screen instead of the inputs shrinking.

I have also tried adding a ScrollView within the KeyboardAvoidingView that contains all the elements, and even given a hard-coded height to the inputs.

Answer 1

When working with RN 0.63.1 and Android 9, I encountered the same issue. Upon reading GitHub issues, using KeyboardAvoidingView was discouraged and instead setting this in my AndroidManifest.xml fixed it.

Default:

<activity
  ...
  android:windowSoftInputMode="adjustResize"
>

Change it to:

<activity
  ...
  android:windowSoftInputMode="adjustPan"
>

I found setting this makes the padding work but it is still too close to the keyboard. I used KeyboardAvoidingView to add some padding between keyboard and text input.