KeyboardAvoidingView is pushing up content with excessive padding in react native

Viewed 13958

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?

enter image description here

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>
1 Answers
Related