App [Hold for 40548] [$500] iOS - Chat - Send button is not responding after viewing avatar in full screen

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Version Number: 1.4.64-2 Reproducible in staging?: y Reproducible in production?: y Issue reported by: Applause - Internal Team

Action Performed:

Launch New Expensify app.
Go to 1:1 DM.
Tap on the chat header.
Tap on the avatar.
Return to main chat.
Send a message.

Expected Result:

The message is sent after tapping on the send button.

Actual Result:

The send button is not responding after viewing avatar in full screen.

Workaround:

n/a

Platforms:

Which of our officially supported platforms is this issue occurring on?

[ ] Android: Native
[ ] Android: mWeb Chrome
[x] iOS: Native
[ ] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/93399543/09df1a14-a8e3-4664-85be-61f6f2f9cb0f

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~012e8723cf045e9a77
Upwork Job ID: 1782791638422151168
Last Price Increase: 2024-06-24

Apr 23 '24 13:04 kbecciv

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Apr 23 '24 13:04 melvin-bot[bot]

We think that this bug might be related to #vip-vsb

Apr 23 '24 13:04 kbecciv

@bfitzexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

Apr 23 '24 13:04 kbecciv

Job added to Upwork: https://www.upwork.com/jobs/~012e8723cf045e9a77

Apr 23 '24 15:04 melvin-bot[bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @abdulrahuman5196 (External)

Apr 23 '24 15:04 melvin-bot[bot]

Would much appreciate if you can share a related branch and pull request so that I can analyze the codebase.

Apr 24 '24 09:04 debski-patrick

📣 @stefan2do! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

Apr 24 '24 09:04 melvin-bot[bot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

https://github.com/Expensify/App/assets/23204263/bff0433c-96bc-4751-b559-797ef27de9b2

"Send" Button does not work, but we can send comment in out of MessageBox.

https://github.com/Expensify/App/assets/23204263/096d4150-fc41-4833-8ee3-20ad7d354b50

What is the root cause of that problem?

The problem comes from Design Style in the button and Rendering from Navigating back.

What changes do you think we should make in order to solve the problem?

We should update this style for Send button to resolve the issue.

###Attached Working file. I am sure I solved the issue.

https://github.com/Expensify/App/assets/23204263/309aa9bf-ff07-4f52-be03-6b0c73229068

Apr 24 '24 12:04 sword1202

Proposal

Updated

Apr 24 '24 13:04 sword1202

Proposal

Please re-state the problem that we are trying to solve in this issue.

Self DM - Chat is not scrolled to the bottom when clicking 'New message'

What is the root cause of that problem?

onEnd(callback) will only be called if the handler was previously in the active state. When the user loads the report, it has an active state, but when the user navigates away and back to the report, it no longer has an active state, so onEnd is not callable. This is the main root cause here.

What changes do you think we should make in order to solve the problem?

You need to remove GestureDetector from here. also The onPress event for PressableWithFeedback needs to be added here.

onPress={handleSendMessage}

You need to update line# 365 here as mention below. To remove setNativeProps() warning message.

runOnUI(() => {
    setNativeProps(animatedRef, {text: ''}); // clears native text input on the UI thread
});

Please import runOnUI as react-native-reanimated like below:

import {runOnJS, runOnUI, setNativeProps, useAnimatedRef} from 'react-native-reanimated';

Video

https://github.com/Expensify/App/assets/43398804/23ffcc52-e5a7-4139-a914-2b8319f65b46

Apr 25 '24 08:04 kaushiktd

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

Apr 25 '24 14:04 melvin-bot[bot]

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~0194d962e1f9098218 Updated. My profile was set to private. I am placing proposal.

Apr 25 '24 14:04 sword1202

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

Apr 25 '24 14:04 melvin-bot[bot]

Proposal

Updated

Apr 25 '24 14:04 sword1202

Contributor details Your Expensify account email: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~0194d962e1f9098218

Apr 25 '24 17:04 sword1202

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

Apr 25 '24 17:04 melvin-bot[bot]

Couple of proposals ready for review @abdulrahuman5196

Apr 25 '24 20:04 bfitzexpensify

Isn't there anybody to check proposal? I sent Slack invites for many times, but not response. Please advise

Apr 29 '24 04:04 sword1202

Sorry for the delay. Checking now.

Apr 29 '24 05:04 abdulrahuman5196

Thank you!

Apr 29 '24 05:04 sword1202

On @sword1202 's proposal here https://github.com/Expensify/App/issues/40797#issuecomment-2074797500, it not working consistenly, once it works, on trying more times it is less likely working. And I am not sure on the root cause as well, since not sure on how style change would be related to button press not working.

Apr 29 '24 11:04 abdulrahuman5196

On @kaushiktd 's proposal here, not sure if its safe to remove the GestureHandler, I am getting the below error if i remove.

But the proposal is working. Could you check on this issue?

Apr 29 '24 11:04 abdulrahuman5196

On my proposal, the root cause mentioned about that error happens on navigation from the Full Avatar screen. It definitely comes from "Send" button, and I added the working video. You can check last video. Thanks

Apr 29 '24 11:04 sword1202

@abdulrahuman5196 I've checked on my end, and there are no warning errors as mentioned by you. However, if you are using GestureHandler with my suggested solution, it will work as well and will not create a regression.

Apr 29 '24 11:04 kaushiktd

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

Apr 30 '24 16:04 melvin-bot[bot]

@abdulrahuman5196 I've checked on my end, and there are no warning errors as mentioned by you. However, if you are using GestureHandler with my suggested solution, it will work as well and will not create a regression.

@kaushiktd Your suggestion is to remove the GestureHandler right? Could you share your code diff if the issue is not happening for you? Its happening for me again.

May 01 '24 15:05 abdulrahuman5196

@abdulrahuman5196 I'll share screen recording soon. Is that fine?

May 01 '24 15:05 kaushiktd

@abdulrahuman5196 My proposal has fixed the issue, and I shared video recording a week. Did you have a chance to look video on my proposal?

May 02 '24 03:05 sword1202

@abdulrahuman5196 Proposal Updated. You can review our code, it will not produce any warning messages. Please find the attached video recording. https://drive.google.com/file/d/1YwT6AbQlWp3uLRMN4TIYB_rZuC1UP3TY/view?usp=sharing

Our updated code:

function SendButton({isDisabled: isDisabledProp, handleSendMessage}: SendButtonProps) {
    const theme = useTheme();
    const styles = useThemeStyles();
    const {translate} = useLocalize();

    return (
        <View
            style={styles.justifyContentEnd}
            // Keep focus on the composer when Send message is clicked.
            onMouseDown={(e) => e.preventDefault()}
        >
            <Tooltip text={translate('common.send')}>
                <PressableWithFeedback
                    onPress={handleSendMessage}
                    style={({pressed, isDisabled}) => [
                        styles.chatItemSubmitButton,
                        isDisabledProp || pressed || isDisabled ? undefined : styles.buttonSuccess,
                        isDisabledProp ? styles.cursorDisabled : undefined,
                    ]}
                    role={CONST.ROLE.BUTTON}
                    accessibilityLabel={translate('common.send')}
                >
                    {({pressed}) => (
                        <Icon
                            src={Expensicons.Send}
                            fill={isDisabledProp || pressed ? theme.icon : theme.textLight}
                        />
                    )}
                </PressableWithFeedback>
            </Tooltip>
        </View>
    );
}

May 02 '24 06:05 kaushiktd

@abdulrahuman5196 I have already attached video which I fixed on 25th Apr. But I could not hear from you.

May 02 '24 06:05 sword1202