[iOS] Text Input Out of Position

Issue Description

On iOS when the keyboard is visible, the text input is shifted up. It goes up halfway where there are no messages and to the top when there are messages.

(Android works fine.)

On in initial render. Looks good.

Typing the first message. There’s a gap between the keyboard and the text input.

After send of first message. The gap remains until the keyboard is dismissed.

Typing second message. The gap is enlarged such that the text input is at the top.

Steps to Reproduce / Code Snippets

My code. As you can see, it’s dead simple.

class Discuss extends Component {
  state = {
    messages: [],
  };
  onSend(messages = []) {
    this.setState(state => ({
      messages: GiftedChat.append(state.messages, messages),
    }));
    setTimeout(() => {
      const response = getFakeResonse();
      this.setState(state => ({
        messages: GiftedChat.append(state.messages, response),
      }));
    }, 3000);
  }
  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={(messages) => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    );
  }
}

Expected Results

The text input should remain just above the keyboard.

Additional Information

• React Native version: 0.48.4
• react-native-gifted-chat version: 0.2.7
• Platform(s) (iOS, Android, or both?): iOS only

[leonel-lordford]

I’m having similar issue but in my case TextInput remains behind keyboard, I’m testing using Expo and my environment is react-native 0.48.4 and react-native-gifted-chat 0.2.9… see attachments…

[phil-flyclops]

Nice solution can be found on this ticket - https://github.com/FaridSafi/react-native-gifted-chat/issues/874