react-native-gifted-chat: onPress prop not working for Android

Issue Description

onPress prop not working for Android. Press a message bubble and attached function does not run.

Steps to Reproduce / Code Snippets

            <GiftedChat
              messages={this.formatMessagesFromRedux()}
              onSend={messages => this.onSend(messages)}
              onLongPress={(context, message) =>
                this.onLongPressMsg(context, message)
              }
              onPress={(context, message) => {
                Alert.alert('Bubble pressed');
              }}
              user={{name: this.props.myNameText, _id: this.props.myUserId}}
              renderBubble={this.renderBubble}
              showUserAvatar={true}
              renderAvatar={props => {
                const avatarProps = props.currentMessage;
                if (avatarProps.user.avatar) {
                  return (
                    <Avatar
                      rounded
                      source={{uri: avatarProps.user.avatar}}
                      size="large"
                    />
                  );
                }
                return null;
              }}
            />

Expected Results

Alert is triggered

Additional Information

Nodejs version: 10.16
React version: 16.13.1
React Native version: 0.63.3
react-native-gifted-chat version: 0.16.3
Platform(s) (iOS, Android, or both?): Android (havent checked ios)
TypeScript version: n/a

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18

Commits related to this issue

Merge pull request #2196 from FaridSafi/fix/GH-2008 fix(types): include bubble on press — committed to FaridSafi/react-native-gifted-chat by Johan-dutoit 2 years ago

Most upvoted comments

Well i have solved this issue it took me almost an hour guys but we did it ’ so the solution is quite simple

go to GiftedChat.d.ts at ‘‘node_modules\react-native-gifted-chat\lib\GiftedChat.d.ts’’ ### add onPress event

Now at the same file under declaration of giftedChat at line no. 114 under static default props add the onPress event
Now under static prop types below add the onPress EVENT

Now we are ended with this file now open the bubble.js file at “node_modules\react-native-gifted-chat\lib\Bubble.js”

    this.onPress = () => {
     const { currentMessage } = this.props;
     if (this.props.onPress) {
         this.props.onPress(this.context, this.props.currentMessage);
     }
     else if (currentMessage && currentMessage.text) {
         const { optionTitles } = this.props;
         const options = optionTitles && optionTitles.length > 0
             ? optionTitles.slice(0, 2)
             : DEFAULT_OPTION_TITLES;
         const cancelButtonIndex = options.length - 1;
         this.context.actionSheet().showActionSheetWithOptions({
             options,
             cancelButtonIndex,
         }, (buttonIndex) => {
             switch (buttonIndex) {
                 case 0:
                     Clipboard.setString(currentMessage.text);
                     break;
                 default:
                     break;
             }
         });
     }
     
 };

Add the above code in the constructor at bubble.js below this.onLongPre… like this way
then add in touchable without feedback like this way
onPress= {this.onPress}
Then under Bubble.defuault Props add
```
  onPress: null,
```
this way
Then under Bubble.PropTypes add onPress
```
   onPress: PropTypes.func,
```
this way

Now guys lets move to another file Bubble.d.ts at ‘‘node_modules\react-native-gifted-chat\lib\Bubble.d.ts’’

Add onPress underStatic defualt props
```
     onPress: null;
```
this way
now under static PropTypes add

    onPress: PropTypes.Requireable<(...args: any[]) => any>;

this way
Now add
```
  onPress: () => void
```
this way
Also not forget to add onPress under exporting interface

onPress?(context?: any, message?: any): void;

this way

Now lets move to another file Bubble.js.flow this is the last file in which we have to list a change in order to fix this issue

add the

   onPress?: (context?: any, message?: any) => void,

this way

Yogesh-Dubey-Ayesavi on Dec 28, 2021

It might be an issue with 16.3, try install the latest beta.

Johan-dutoit on Apr 29, 2022

No its not that either. Wish the authour would fix this…guess hes given up supporting the library. Does anyone know another similar library thats still being supported?

jamesdmurphy51 on Dec 20, 2021

I have a fix for this.

If you have something like what I have below, then it will work

The modification adds: touchableProps={{ disabled: true }} which will disable the <TouchableWithoutFeedback>...</TouchableWithoutFeedback> and so your nested <TouchableOpacity> will work. Hope this helps!

<Bubble
  {...props}
  usernameStyle={{ color: colors.messageBackground }}
  textStyle={{ left: styles.bubbleText, right: styles.bubbleText }}
  wrapperStyle={{
    left: styles.leftBubbleWrapper,
    right: styles.rightBubbleWrapper,
  }}          
  renderTime={() => null}
  renderMessageText={() => null}
  touchableProps={{ disabled: true }} // <= put this in to fix!
  renderCustomView={(): JSX.Element => (
    <TouchableOpacity onPress={(): void => console.log('Press!!')}>
      <View style={{ width: 100, height: 100 }}>
        <Text>Some sample text</Text>
      </View>
    </TouchableOpacity>
  )}
/>

matfin on May 13, 2021

So, upon further investigation to this, I have found the issue.

If you look inside the file react-native-gifted-chat/lib/Bubble.js in the source code - focusing on lines 275 to 287.

Because the call to render the bubble content sits inside <TouchableWithoutFeedback />, it seems to prevent <TouchableOpacity onPress={(): void => doSomething()} /> from working.

When I commented this out, <TouchableOpacity /> was working as it should in Android again.

matfin on May 13, 2021