KeyboardAvoidingView is pushing up content with excessive padding in react native

Question

I am having trouble getting the KeyboardAvoidingView to work properly. For a similar screen it is working smoothly, however, for another it is pushing up content way too far up on the screen, adding excessive amounts of space in between. Any fix?

code:

<KeyboardAvoidingView behavior="padding" style={styles.container}>
         {this.props.signNameErr &&
            (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>)
          }
      <View style={styles.formContainer}>
        <TextInput
          style={styles.formInput}
          placeholderTextColor="rgba(255,255,255,0.7)"
          underlineColorAndroid='rgba(0,0,0,0)'
          returnKeyType="next"
          autoCorrect={false}
          onChangeText={(full_name)=> this.setState({full_name})}
          value={this.state.fullname}
          placeholder="Enter Full Name"
          />
          {this.props.signEmailErr &&
            (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>)
          }
        <TextInput
          style={styles.formInput}
          placeholderTextColor="rgba(255,255,255,0.7)"
          underlineColorAndroid='rgba(0,0,0,0)'
          returnKeyType="next"
          keyboardType="email-address"
          autoCapitalize="none"
          autoCorrect={false}
          onChangeText={(email)=> this.setState({email})}
          value={this.state.email}
          placeholder="Enter Email"
          keyboardType="email-address"
          />
           {this.props.signPwErr &&
            (<Text style={{color: 'red'}}>{this.props.errMessage}</Text>)
          }
        <TextInput
          style={styles.formInput}
          placeholderTextColor="rgba(255,255,255,0.7)"
          underlineColorAndroid='rgba(0,0,0,0)'
          returnKeyType="next"
          autoCorrect={false}
          onChangeText={(password)=> this.setState({password})}
          secureTextEntry={this.state.togglePW}
          value={this.state.password}
          placeholder="Create Password (Min. 6 Char)"
          />
        <TouchableOpacity style={styles.buttonContainer} onPress={this.handleSignup}>
          <Text style={styles.buttonText}>SIGN UP</Text>
        </TouchableOpacity>
      </View >
      </KeyboardAvoidingView>

Answer 1

You can set the padding, you can even set for android and ios

import {KeyboardAvoidingView,Platform,} from 'react-native';

<KeyboardAvoidingView 
  behavior='padding'
  keyboardVerticalOffset={
  Platform.select({
     ios: () => 0,
     android: () => 200
  })()
}>
   ...content...
</KeyboardAvoidingView>

Just an example, try it out and set how you like. The padding can also be a negative value like -300.