CODEWITHSUNDEEP
react-native
Jouke
Jouke

Reputation: 469

KeyboardAvoidingView padding bug

There is to little padding being used by the KeyboardAvoidingView of react-native. Which results in my keyboard moving over the inputfield: enter image description here

My current solution
I made an attempt to fix this problem using keyboardVerticalOffset.
This is the render function of the view from the image, which is using the KeyboardAvoidView:

render() {
    return (
      <KeyboardAvoidingView
        behavior="padding"
        key={this.state.keyboardRandomKey}
        keyboardVerticalOffset={50}
      >
        @@ all the other stuff of the design is here @@
      </KeyboardAvoidingView>
    );
  }
}

The problem
This image shows the problem I'm having after implementing the previous shown code. The red arrow is showing the unexpected behavior.
As you can see extra space is being added but it's a grey area. This has to be transparent. Somehow I can't get this to work. I have used keyboardVerticalOffset previously with a minus value on a different project and that worked fine. enter image description here

Any ideas are well appreciated

Upvotes: 6

Views: 3807

Answers (1)

Jouke
Jouke

Reputation: 469

I added a hide & show listener to keyboard

 componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      this.keyboardDidShowListener,
    );
  }

I made a state value keyboardOpen and set this to true if the keyboard is open.

keyboardDidShowListener = e => {
    this.setState({
      keyboardOpen: true,
      keyboardHeight: e.endCoordinates.height,
    });
  };

I set the value to false if the keyboard hides

keyboardHideListener = () => {
    this.setState({
      keyboardAvoidingViewKey: new Date().getTime(),
      keyboardOpen: false,
    });
  };

In reacts return i check if the keyboard is open and re-render some elements accordingly with marginBottom: 0

if (this.state.keyboardOpen) {
      return (
        <View style={{ marginBottom: 0 }}>
          <RoundTab title="Sign In" onPress={() => this.signIn()} />
        </View>
      );

Result
enter image description here
Also adding a view with a certain height after the TextInput is an easy fix to add some padding and fix the issue

Upvotes: 3

Related Questions