reactjskeyboardchatnative

Input in react native gifted chat is covered by keyboard


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>
)}

Solution

  • 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>