Input in react native gifted chat is covered by keyboard - reactjs

Question

I'm facing a problem with the Android version.
I'm using gifted chat for my application chat. But the text input is covered by the keyboard so I can't see what I'm typing.
I'm using react-native version 0.51. I already followed couples of solutions but it still not working.
I tried this solution that uses keyboardAvoidingView and also added KeyboardSpacer and its also not working.
Any advice would be very great.
Here's my render component code
render() {
console.log(this.state);
return (
<View style={{flex: 1}}>
<GiftedChat
messages={this.state.messages}
onSend={Fire.shared.send}
loadEarlier={this.state.loadEarlier}
isLoadingEarlier={this.state.isLoadingEarlier}
user={{
name: this.props.profile.name,
_id: this.props.profile.user_id,
avatar: this.props.profile.profile_image
}}
renderUsernameOnMessage={true}
renderActions={this.renderCustomActions}
renderAvatar={this.renderAvatar}
renderBubble={this.renderBubble}
renderSend={this.renderSend}
renderSystemMessage={this.renderSystemMessage}
renderCustomView={this.renderCustomView}
renderFooter={this.renderFooter}
keyboardShouldPersistTaps={'always'}
/>
<KeyboardSpacer/>
</View>
)}

Answer 1

Looks like this is a common issue with React Native Gifted Chat and Expo on Android devices.
You could use the react-native-keyboard-spacer package to keep the content visible after opening the keyboard:
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>
)
}
}

Answer 2

I have also same issue. I solved it using adding android:windowSoftInputMode="adjustResize" in AndroidManifest.xml file as below :
<application
android:name=".MainApplication"
android:label="#string/app_name"
...
...
>
<activity
android:name=".MainActivity"
...
...
android:windowSoftInputMode="adjustResize" <!-- add here -->
>
...
</activity>
...
</application>

Answer 3

What about this:
import { KeyboardAvoidingView } from 'react-native';
<View style={{ flex: 1 }}>
<GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: 1,
}}
/>
{Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />}
</View>;