React-native-gifted-chat: keyboard gets dismissed on Send without sending the message

[nikitph]

Issue Description

keyboard gets dismissed on Send without sending the message

Steps to Reproduce / Code Snippets

Expected Results

keyboard persists and message gets sent

Additional Information

• React Native version: 0.38
• react-native-gifted-chat version: latest
• Platform(s) (iOS, Android, or both?): ios

[kfiroo]

Hey @nikitph
Latest version of gifted-chat does not support RN < 0.40.0
You can try v0.0.10 and see if that works for you

[nikitph]

@kfiroo thanks.. i went down to 0.0.10 still same result

// @flow

import React from 'react'
import { ScrollView, Text, KeyboardAvoidingView,View } from 'react-native'
import { connect } from 'react-redux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
import { Metrics } from '../Themes'
// external libs
import Icon from 'react-native-vector-icons/FontAwesome'
import Animatable from 'react-native-animatable'
import { Actions as NavigationActions } from 'react-native-router-flux'

// Styles
import styles from './Styles/ItemChatScreenStyle'

// I18n
import I18n from 'react-native-i18n'
import {GiftedChat} from 'react-native-gifted-chat';


class ItemChatScreen extends React.Component {
  constructor(props: Object) {
    super(props);
    console.tron.log(props);
    this.state = {
      item_data: props.data,
      messages: []
    };
    this.onSend = this.onSend.bind(this);
  }

  componentWillMount() {
    this.setState({
      messages: [
        {
          _id: 1,
          text: this.props.data.price,
          createdAt: new Date(Date.UTC(2016, 7, 30, 17, 20, 0)),
          user: {
            _id: 2,
            name: 'React Native',
            avatar: 'https://facebook.github.io/react/img/logo_og.png',
          },
        },
      ],
    });
  }

  onSend(messages = []) {
    this.setState((previousState) => {
      return {
        messages: GiftedChat.append(previousState.messages, messages),
      };
    });
  }

  render () {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.containertwo}>
          <GiftedChat
            messages={this.state.messages}
            onSend={this.onSend}
            user={{_id: 1}}
          />
        </View>
      </ScrollView>
    )
  }

}

const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ItemChatScreen)

[rsage28]

Was this issue ever resolved? I'm currently seeing it on

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

It was working as intended for me before, but it suddenly started having this issue. I've tried reinstalling the package, and restarting the packager and resetting the cache. I'm also running this with Expo (also latest version).

import React, { Component } from "react";
import { View, StatusBar } from "react-native";
import {
  Button,
  Text,
  Container,
  Card,
  CardItem,
  Body,
  Content,
  Header,
  Left,
  Right,
  Icon,
  Title,
  Input,
  InputGroup,
  Item,
  Tab,
  Tabs,
  Footer,
  FooterTab,
  Label
} from "native-base";
import { GiftedChat } from "react-native-gifted-chat";

export default class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {messages: []};
  }

  onSend(messages = []) {
    this.setState((previousState) => {
      return {
        messages: GiftedChat.append(previousState.messages, messages),
      };
    });
  }

  render() {
    return (
      <Container>
        <GiftedChat 
          messages={this.state.messages}
          onSend={this.onSend.bind(this)}
          user={{
            _id: 1
          }}
          keyboardShouldPersistTaps="always"
        />
      </Container>
    );
  }
}

[volkovpishet]

Did anyone solve this issue? Or is there any workaround?

[rsage28]

So the issue arises from GiftedChat being a child element from what I can tell. It being a child element of anything at all seems to cause issues, and it needs to essentially be the only thing rendered on screen at any time.

The Chat component was being used in another screen with native base Tabs, and it didn't like being a child element there, even though it wasn't a child of anything in the Chat component. However, I switched to using react-navigation TabNavigator, which renders the components differently, not making it a child element. I also removed the element around GiftedChat.

I don't know what causes this issue to occur, or how to solve it entirely, but that's the workaround I came up with. Hopefully that helps.

[jeaye]

Getting some official comments on this would be superb. I'm also running into it and, if @rsage28 is right, having to raise it out of the views its in would be a real pain. No other screens, nor components, nor libraries we use have this requirement.

[SergeyNedayvoda]

In my case issue was caused by native-base <Content /> component which uses <ScrollView>

<Content>
  <GiftedChat ... />
</Content>

So the my fix - use keyboardShouldPersistTaps prop with Content

<Content keyboardShouldPersistTaps='always'>
  <GiftedChat ... />
</Content>

[nikitph]

still happening with latest RN vers

[jeaye]

Yeah, for me as well.

[eggybot]

This happen to me on latest RN 0.49 , any solution?
thanks,

[nikitph]

From a different thread: gifted chat needs to be a top level component to
function Correctly or at best a child of a view with flex :1 . Hope it helps
On Tue, Oct 24, 2017 at 1:02 AM Eggy [e-mail] wrote:

This happen to me on latest RN 0.49 , any solution?
thanks,

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FaridSafi/react-native-gifted-chat/issues/358#issuecomment-338907865,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AExqB7elvwYPtXD1O_3S077F8Mba1kEZks5svZmvgaJpZM4Ly-mt
.

[gianpaj]

Does this work for you folks?

How do I get the keyboard to disappear if the user taps on the list of messages, so they can all be read more easily, and the keyboard stays open if a message is sent via the 'Send' button or the Return Key ('Send')

They keyboard is disappearing after the function onSubmitEditing() is triggered:

(only tested in iOS)

  renderComposer(props: any) {
    return (
      <Composer
        {...props}
        textInputProps={{
          returnKeyType: 'send',
          multiline: false,
          onSubmitEditing: event => {
            props.onSend({ text: event.nativeEvent.text.trim() }, true);
          },
        }}
      />
    );
  }

  render() {
    return (
        <View style={st.container} keyboardShouldPersistTaps="always">
          <GiftedChat
            messages={messages}
            onSend={m => this.onSend(m)}
            placeholder="Type a message"
            user={{
              _id: 1,
              name: 'bot',
            }}
            // onPressAvatar={() => alert('code me like those french girls 🎨')}
            renderComposer={this.renderComposer}
            // keyboardShouldPersistTaps="handled"
            showUserAvatar
          />
        </View>
    );
  }

[bgbraga]

Same error here.
I tried view with flex: 1 solution but it doesn't works for me.
My GiftedChat is created inside an native base Tab component.

  <View style={{flex: 1}} keyboardShouldPersistTaps="always">
    <GiftedChat

[bgbraga]

I'm using RN 0.51.0. Any help is welcome.
That keyboard behavior is very annoying.

[xtebs]

Same problem here. RN 0.51 & Expo. keyboardShouldPersistTaps doesn't solve it, both on parent element or GiftedChat itself.

[srinusonly]

Any update on this? Did anyone have a solution?

[mikenichols]

I recently ran into this problem when running a GiftedChat inside a storybook example. Apparently, one of StoryScreen, Story, or UseCase was adding a ScrollView that I couldn't add the keyboardShouldPersistTaps="always" prop to. My solution was to simply remove those components and render the GiftedChat directly.

So the comment above that says

gifted chat needs to be a top level component

is partially correct. If GiftedChat has any parent component that is a ScrollView/FlatList, then that parent component must have the keyboardShouldPersistTaps set to override the default behavior. Otherwise, it will require two taps to send a message.

I also found this article that explains the problem as well as a related keyboard dismiss issue.

[Hanspagh]

I had GiftedChat in a ViewPager, setting keyboardShouldPersistTaps fixed this

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[alexpchin]

This is caused by GiftedChat being a child of another Component that is preventing the normal behaviour. Naughty culprits include ScrollableTabView and other Components that use a ScrollView...