React-native-gifted-chat: "Type message.."Input is behind keyboard

Created on 9 Jun 2018 · 5Comments · Source: FaridSafi/react-native-gifted-chat

Issue Description

"Type message.."Input is behind keyboard
you cant see what your typing until u remove keyboard.

Steps to Reproduce / Code Snippets

I opened the project with expo and tried to type

Expected Results

Input Textbox should be above keyboard on focus so you can see what you are typing.
[FILL THIS OUT]

Additional Information

Nodejs version: [FILL THIS OUT]
React version: [FILL THIS OUT]
React Native version: [FILL THIS OUT]
react-native-gifted-chat version: [FILL THIS OUT]
Platform(s) (iOS, Android, or both?): [FILL THIS OUT]

Source

alfizo

👍4

Most helpful comment

After investigation i learned this issue only happens with expo.
I found a fix on a previous post #461

import React, { Component } from 'react';
import { View, Platform } from 'react-native';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import { GiftedChat } from 'react-native-gifted-chat';

export default class Chat extends Component {
  render() {
    const giftedChatMessages = [
      ...
    ];
    return (
      <View style={{flex: 1}}>
        <GiftedChat
          messages={giftedChatMessages}
          onSend={newMessages => onSend(newMessages[0].text)}
          user={{
              _id: 1,
          }}
          renderAvatar={() => null}
        />
        {Platform.OS === 'android' ? <KeyboardSpacer /> : null }
      </View>   
    )
  }
}

alfizo on 15 Jun 2018

👍11 ❤4 🎉3

All 5 comments

After investigation i learned this issue only happens with expo.
I found a fix on a previous post #461

import React, { Component } from 'react';
import { View, Platform } from 'react-native';
import KeyboardSpacer from 'react-native-keyboard-spacer';
import { GiftedChat } from 'react-native-gifted-chat';

export default class Chat extends Component {
  render() {
    const giftedChatMessages = [
      ...
    ];
    return (
      <View style={{flex: 1}}>
        <GiftedChat
          messages={giftedChatMessages}
          onSend={newMessages => onSend(newMessages[0].text)}
          user={{
              _id: 1,
          }}
          renderAvatar={() => null}
        />
        {Platform.OS === 'android' ? <KeyboardSpacer /> : null }
      </View>   
    )
  }
}

alfizo on 15 Jun 2018

👍11 ❤4 🎉3

Thanks.