[HOLD for payment 2024-09-26] Dev- Console warning whenever type in composer on Android and iOS Dev

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number:
Reproducible in staging?: Issue occurs in dev
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1724876364667229

Action Performed:

1. Open Any chat and type something in composer

Expected Result:

No warnings or error message

Actual Result:

There's a warning

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @miljakljajic (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.

[MelvinBot]

This has been labelled "Needs Reproduction". Follow the steps here: https://stackoverflowteams.com/c/expensify/questions/16989

[bernhardoj]

Proposal

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

Console warning on every type on composer.

What is the root cause of that problem?

Based on the error message and the reanimated doc, we are trying to change the object current property after it's copied to a worklet function.

In our case, we are trying to set the ref here,

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 312 to 316 in e77f204

	ReportActionComposeFocusManager.composerRef.current = el;
	textInputRef.current = el;
	if (typeof animatedRef === 'function') {
	animatedRef(el);
	}

and we also use it inside the clear function which is a worklet.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 607 to 611 in e77f204

	const clear = useCallback(() => {
	'worklet';
	forceClearInput(animatedRef, textInputRef);
	}, [animatedRef]);

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

The doc suggested using useSharedValue and if we look at the ReportActionCompose, we did that.

App/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

Lines 378 to 386 in e77f204

	// Note: using JS refs is not well supported in reanimated, thus we need to store the function in a shared value
	// useSharedValue on web doesn't support functions, so we need to wrap it in an object.
	const composerRefShared = useSharedValue<{
	clear: (() => void) | undefined;
	}>({clear: undefined});
	const handleSendMessage = useCallback(() => {
	'worklet';
	const clearComposer = composerRefShared.value.clear;

So, there are 2 options. Follow the pattern in ReportActionCompose by making a shared value to store the clear function and pass it to forceClearInput.

OR

No need to pass textInputRef to forceClearInput

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 607 to 611 in e77f204

	const clear = useCallback(() => {
	'worklet';
	forceClearInput(animatedRef, textInputRef);
	}, [animatedRef]);

and just use animatedRef.

App/src/libs/ComponentUtils/index.ts

Lines 13 to 17 in e77f204

	function forceClearInput(_: AnimatedRef<Component>, textInputRef: React.RefObject<TextInput>) {
	'worklet';
	textInputRef.current?.clear();
	}

animatedRef.current?.clear();

[perunt]

@bernhardoj we already store clear as a sharedValue. So in this case, the only option is to use animatedRef directly, as you pointed out in your second solution.
Since we attach the same ref from the composer to animatedRef, there should be no difference which one we use for clearing it.
It's important to note that for native platforms, useAnimatedRef would point to the regular .clear() function, which is not what we want.

@ishpaul777 , can I create an issue for the remaining errors that I'm encountering in the composer? I'm keen on making our new RN75 update more stable, as these issues somewhat block me from delivering this feature.

so we can use

function forceClearInput(animatedInputRef: AnimatedRef<Component>) {
    'worklet';

    const input = animatedInputRef.current;
    if (input && 'clear' in input && typeof input.clear === 'function') {
        input.clear();
    }
}

instead of

function forceClearInput(_: AnimatedRef<Component>, textInputRef: React.RefObject<TextInput>) {
    'worklet';

    textInputRef.current?.clear();
}

[ishpaul777]

@ishpaul777 , can I create an issue for the remaining errors that I'm encountering in the composer? I'm keen on making our new RN75 update more stable, as these issues somewhat block me from delivering #42143.

Asked for the process for agency members to crete GH issues, will let you know once i got a reply

[mallenexpensify]

@perunt plz follow the steps in the agency dev process doc. We wanna make sure there's 👀 before PRs are created.

For updates or fixes, first create a GitHub issue. Best practice is to post the issue link and details in #expensify-open-source, and cross-post in relevant rooms. If the issue is specific to a project, and relevant to a broader audience, share it in the room with the most visibility for that project (and skip posting in #expensify-open-source). Do not create PRs without an issue being created and reviewed, even for minor changes.

[m-natarajan]

@miljakljajic Can you please assign this to @perunt as per this comment

[perunt]

posted it to #expensify-open-source
https://expensify.slack.com/archives/C01GTK53T8Q/p1725283671428529

[melvin-bot]

@miljakljajic Huh... This is 4 days overdue. Who can take care of this?

[perunt]

I discussed this in Slack, and there is no other idea so far.
I'll raise a PR with my fix

[melvin-bot]

Triggered auto assignment to @srikarparsi, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

Triggered auto assignment to @stephanieelliott (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.

[miljakljajic]

Heading out on parental leave so assigning to another BZ team member. Thank you @stephanieelliott

[perunt]

The PR with the fix has been merged, link

[stephanieelliott]

PR was deployed to prod on 9/19 but it looks like the automation didn't work. Updating manually to add payment date

[mananjadhav]

I don't have any offending PR for this one. There is no regression test as well as it's only dev related console.warn.

@stephanieelliott This is ready for payout.

[melvin-bot]

Skipping the payment summary for this issue since all the assignees are employees or vendors. If this is incorrect, please manually add the payment summary SO.

[mananjadhav]

I had helped with the PR Review, so I am eligible for a payout here.

[stephanieelliott]

Summarizing payment on this issue:

• Contributor: @perunt no payment due (agency)
• Contributor+: @mananjadhav $250 please request on ND

No Upwork job for this

[garrettmknight]

$250 approved fro @mananjadhav