[$2000] Flickering is seen when entering first character

[kavimuru]

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

---

Action Performed:

1. Open any workspace
2. Click on Manage members
3. Click on Invite button
4. Clear the personal message & write a single character and you'll notice the flickering

Alternative steps:

1. Open the app
2. Go to Setting
3. Go to Security
4. Click on close account
5. Write a single character in the message box and you'll notice the flickering

Expected Result:

No flickering should happen

Actual Result:

The first character will flicker

Workaround:

unknown

Platforms:

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

• Android / native

Version Number: 1.2.64-2
Reproducible in staging?: y
Reproducible in production?: y
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
Notes/Photos/Videos:

flicker.1.mp4

Record_2023-02-02-16-42-18_4f9154176b47c00da84e32064abf1c48.mp4

Expensify/Expensify Issue URL:
Issue reported by: @daraksha-dk
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1674823661904079

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01068656221cc9737e
• Upwork Job ID: 1627704099913342976
• Last Price Increase: 2024-09-17

Issue Owner

Current Issue Owner: @

[MelvinBot]

Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[MelvinBot]

@johncschuster Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@johncschuster Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

[johncschuster]

@daraksha-dk I tried reproducing this behavior on a Google Pixel 7 (via browserstack) and was unable to get the first character to flicker. Can you help me dial in the reproduction steps a bit more?

[johncschuster]

from @daraksha-dk (thank you!)

I can reproduce this consistently on Pixel 3a and 4a.
Here are the steps & a video for the same.
Open the app
Go to Setting
Go to Security
Click on close account
Write a single character

[johncschuster]

Ok, I've reproduced the behavior using a Pixel 3a (v. 1.2.73-1). To me, it seems more like the first letter is "jumping" ever so slightly, but I do agree that the first letter is behaving differently than all following letters in the input field.

2023-02-17_09-47-48.mp4

[MelvinBot]

Triggered auto assignment to @techievivek (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[MelvinBot]

@johncschuster @techievivek this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[techievivek]

Will look into it by today.

[techievivek]

I can reproduce this on my OnePlus 7T, and this can be worked externally.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01068656221cc9737e

[johncschuster]

Raised in Slack

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-08-30 10:09:17 UTC.

Proposal

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

Flickering is seen when entering first character

What is the root cause of that problem?

Flickering is seen when entering first character caused by styles.verticalAlignTop which will be enabled this style if we use the autoGrowHeight property enabled to true

App/src/components/TextInput/BaseTextInput/index.native.tsx

Lines 353 to 355 in 9e82ed8

	...(autoGrowHeight
	? [StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, typeof maxAutoGrowHeight === 'number' ? maxAutoGrowHeight : 0), styles.verticalAlignTop]
	: []),

In the first input inside the Close account page we see flickering when entering first character because in the first input we enabled the autoGrowHeight property to true

App/src/pages/settings/Security/CloseAccountPage.tsx

Lines 101 to 110 in 9e82ed8

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.REASON_FOR_LEAVING}
	autoGrowHeight
	maxAutoGrowHeight={variables.textInputAutoGrowMaxHeight}
	label={translate('closeAccountPage.enterMessageHere')}
	aria-label={translate('closeAccountPage.enterMessageHere')}
	role={CONST.ROLE.PRESENTATION}
	containerStyles={[styles.mt5]}
	/>

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

Adding {lineHeight: undefined} fixed the issue to the InputComponent because as we can see inside the Close account page the second input doesn't have any issue with fickering because the multiline property return false because we didn't enabled multiline or autoGrowHeight property

App/src/pages/settings/Security/CloseAccountPage.tsx

Lines 114 to 124 in b912e17

	<InputWrapper
	InputComponent={TextInput}
	inputID={INPUT_IDS.PHONE_OR_EMAIL}
	autoCapitalize="none"
	label={translate('closeAccountPage.enterDefaultContact')}
	aria-label={translate('closeAccountPage.enterDefaultContact')}
	role={CONST.ROLE.PRESENTATION}
	containerStyles={[styles.mt5]}
	autoCorrect={false}
	inputMode={userEmailOrPhone && Str.isValidEmail(userEmailOrPhone) ? CONST.INPUT_MODE.EMAIL : CONST.INPUT_MODE.TEXT}
	/>

App/src/components/TextInput/BaseTextInput/index.native.tsx

Line 86 in 9e82ed8

const isMultiline = multiline || autoGrowHeight;

So inside the input component we're setting the lineHeight to undefined if the input is not multiline meaning it is not enabled by using multiline or autoGrowHeight property

App/src/components/TextInput/BaseTextInput/index.native.tsx

Line 350 in 9e82ed8

!isMultiline && {height, lineHeight: undefined},

Result

Before	After (lineHeight undefined)
Screen.Recording.2024-08-30.at.03.07.30.mov	Screen.Recording.2024-08-30.at.03.06.14.mov

What alternative solutions did you explore? (Optional)

[s77rt]

@NJ-2020 Thanks for the proposal

Flickering is seen when entering first character caused by styles.verticalAlignTop

This is not the case, you can still experience the flickering without that style if you increase the line height enough

Screen.Recording.2024-08-30.at.11.47.40.PM.mov

[NJ-2020]

@s77rt After looking into it, I found that the issue comes from the lineHeight, so if we increase the lineHeight i.e to 50, the cursor input initially will start from the default value meaning the default that already defined from the react-native or from the android but not from 50, but when we start typing for the first character, the cursor height increase until the value we set which is 50, which will cause the flickering issue

We can fix it by adding this '\u200b' (zero width space character) as a default value instead of empty string but this value will still show as an empty string, so the cursor height will show at the correct value which is 50, so when initializing the input value, we can pass this value instead of empty string and when the user removes all the value we can set it again to '\u200b'`

Or we can fix it by removing the lineHeight

App/src/styles/index.ts

Line 1216 in 117b961

lineHeight: variables.lineHeightXLarge,

[s77rt]

@NJ-2020 Let's avoid going with the empty string approach, at least for the JS implementation. If this is a bug in Android itself I could see a reason to go with that but at the Native implementation level.

Removing the lineHeight is not something we want.

[s77rt]

Not overdue. Looking for proposals

[NJ-2020]

@s77rt After looking into it again, I found that the issue only causing in Android and not on IOS

Screen.Recording.2024-09-03.at.05.57.30.mov

We can fix it by doing this:
We can change the lineHeight property here

App/src/styles/index.ts

Line 1216 in 117b961

lineHeight: variables.lineHeightXLarge,

to:

lineHeight: getPlatform() !== CONST.PLATFORM.ANDROID ? variables.lineHeightXLarge: undefined

So we will set the lineHeight property if its not an Android platform
Then we will add the lineHeight to android folder directly meaning we can change the styles.xml file inside android/app/src/main/res/values/styles.xml by adding this code:

<style name="EditTextStyle" parent="@android:style/Widget.EditText">
    <item name="android:lineHeight">20sp</item>
</style>

And invoke the EditTextStyle inside the BaseAppTheme style

<item name="editTextStyle">@style/App_EditTextStyle</item>

App/android/app/src/main/res/values/styles.xml

Lines 7 to 15 in 0e9f918

	<style name="BaseAppTheme" parent="Theme.AppCompat.NoActionBar">
	<item name="android:colorEdgeEffect">@color/gray4</item>
	<item name="android:statusBarColor">@android:color/transparent</item>
	<item name="colorAccent">@color/accent</item>
	<item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
	<item name="popupTheme">@style/AppTheme.Popup</item>
	<item name="android:spinnerDropDownItemStyle">@style/TextViewSpinnerDropDownItem</item>
	<item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
	</style>

So the cursor height will not increasing like Web platform but we will still have space for each line (lineHeight)

Result

Screen.Recording.2024-09-03.at.04.39.02.mov

I've tried increasing the cursor height to match as the lineHeight by using textCursorDrawable and it works, but i still see the flickering issue meaning the cursor height increases but i still see flickering issue

[s77rt]

@NJ-2020 The suggested solution is a workaround. We are looking to fix the root cause so everyone can benefit from the fix (fix the bug upstream - RN)

[johncschuster]

No update – waiting on an upstream fix.

@s77rt, do you know if there's a PR already out there for the upstream fix? This issue has gotten a bit long in the tooth, and it's a bit challenging to make sense of where we're at.

[s77rt]

@johncschuster There was facebook/react-native#37998 but it's not closed for being stalled for too long. We are basically looking for someone else to continue from that PR or implement a similar solution. Please remove the "hold" from the title.

[techievivek]

Not overdue, looking for proposals here.

[melvin-bot]

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

[johncschuster]

Posted in Slack that we're looking for proposals

[techievivek]

Not overdue, we are still looking for proposals here. @johncschuster should we update the reward amount here to get more eyes?

[melvin-bot]

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

[s77rt]

Still looking for proposals

[johncschuster]

Bumped my post in Slack for proposals