[$250] Android -Hybrid app - Contact method - Number fields on new contact method are not clickable

[lanitochka17]

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: 9.0.52-0 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: N/A* Issue reported by: Applause - Internal Team

Action Performed:

1. Open hybrid app
2. Go to settings> Profile> Contact Method> New contact method> Enter email address> Tap Add
3. Tap on the fields when validation number should be added

Expected Result:

Number fields should be clickable

Actual Result:

Nothing happens when click on validation number fields

Workaround:

Unknown

Platforms:

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

• [x] Android: Standalone
• [x] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/user-attachments/assets/14a0b6ae-90e1-49ca-ac2c-609464cff6a3

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021850651069603129216
• Upwork Job ID: 1850651069603129216
• Last Price Increase: 2024-10-27

Issue Owner

Current Issue Owner: @c3024

[melvin-bot[bot]]

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

[VictoriaExpensify]

Hmm I couldn't recreate the issue exactly as explained, but I could if I added an extra step here:

• Open hybrid app
• Go to settings> Profile> Contact Method> New contact method> Enter email address> Tap Add
• Navigate away from the New Expensify app to get the magic code from emails_
• Tap on the fields when validation number should be added

https://github.com/user-attachments/assets/900aed88-f868-4874-ad82-a965e5c43653

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[rohit9625]

Hello, I think this is not a bug, it is a feature because many apps have that behavior. Correct me please if I'm wrong.

[melvin-bot[bot]]

📣 @rohit9625! 📣 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:

1. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[rohit9625]

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

[melvin-bot[bot]]

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

[devaniumesh]

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

[melvin-bot[bot]]

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

[devaniumesh]

This is not a bug, You can directly press any number from keyboard or paste code. It is not clickable because you need to enter number step by step.Like,Input number in First field then input in second field and so on... it will move automatically to next field as you enter number.

You can mark it as fixed. Thanks

[c3024]

Thanks for your inputs.

User can switch to different positions in the magic code input that appears when logging in. We would want the same behaviour here also when adding a contact method. So, I think we should fix this.

https://github.com/user-attachments/assets/cd160a7d-a6f5-4691-8855-0643ace8962a

[rohit9625]

Sorry, I thought it's not a bug. You're right even on the website the at the OTP screen after the add contact method, the user can tap and edit individua field.

Thank you for the clarification :)

[melvin-bot[bot]]

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

[c3024]

Waiting for proposals!

[rohit9625]

I want to submit a proposal but facing difficulties setting up the local development environment. This is the error I am facing:

Do you have any idea about this?

[melvin-bot[bot]]

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

[c3024]

These steps usually work to fix that issue.

• 	Remove node_modules and run npm ci
  

• 	Remove the dist folder
  

• 	Run rm -rf $TMPDIR/metro-cache to clear the metro caches
  

• 	Run the npm run clean
  

[rohit9625]

Thank you @c3024 for replying.

I fixed that issues somehow by installing correct cMake version. However I tried running the app using npm run android but no output was showing. So I tried running the app using Metro but it says ambiguous tasks for installDebug and installDevelopmentDebug.

After that I directly tried gradlew build and it seems working fine. But my memory gets full eventually and pc gets stuck even though I have this only command running on a 8GB i3 11th gen laptop. 70% ram was free before running the command.

Is there any other way to run the app? I am using Fedora Linux.

[melvin-bot[bot]]

@VictoriaExpensify @c3024 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot[bot]]

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

[c3024]

Even on M1 chips Android build takes all the CPU and requires a lot of SSD swap on 8 GB machines. I think a more powerful machine than i3/8 GB is required for running Expensify Android build.

[wildan-m]

Proposal

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

On Android, number fields on the new contact method are not clickable.

What is the root cause of that problem?

We use react native gesture handler in MagicCodeInput and use it in react-native-modal.

On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy.

https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation#usage-with-modals-on-android

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

We can wrap the MagicCodeInput or ValidateCodeForm with gestureHandlerRootHOC src/components/ValidateCodeActionModal/ValidateCodeForm/index.android.tsx

import { gestureHandlerRootHOC } from 'react-native-gesture-handler';

......

export default gestureHandlerRootHOC(ValidateCodeForm);

If there is similar cases, we can implement the same pattern

Branch for this solution

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot[bot]]

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

[c3024]

Checking. Will update!

[melvin-bot[bot]]

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

[huult]

Proposal

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

Contact method - Number fields on new contact method are not clickable

What is the root cause of that problem?

Currently, we use GestureDetector in MagicCodeInput:

https://github.com/Expensify/App/blob/ab40264dff9a6c21372617c8744b1013c22dd2d2/src/components/MagicCodeInput.tsx#L375

However, MagicCodeInput is imported into ValidateCodeActionModal:

https://github.com/Expensify/App/blob/cc4c17269ae0f9ff238554fcc8797770aa14dcdb/src/components/ValidateCodeActionModal/ValidateCodeForm/BaseValidateCodeForm.tsx#L199

https://github.com/Expensify/App/blob/0dca2ad798c816c5cd3053cffd3b154a530a94a5/src/components/ValidateCodeActionModal/index.tsx#L77

and On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy.

Document what I mentioned for this

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

To resolve this issue, we should wrap the modal content with GestureHandlerRootView in ValidateCodeActionModal to ensure RNGH works on the modal, similar to how other modals require GestureHandlerRootView. Some thing like that:

//src/components/ValidateCodeActionModal/index.tsx#L77
+        <GestureHandlerRootView>
            <ValidateCodeForm
                validateCodeAction={validateCodeAction}
                validatePendingAction={validatePendingAction}
                validateError={validateError}
                handleSubmitForm={handleSubmitForm}
                sendValidateCode={sendValidateCode}
                clearError={clearError}
                buttonStyles={[themeStyles.justifyContentEnd, themeStyles.flex1, safePaddingBottomStyle]}
                ref={validateCodeFormRef}
                hasMagicCodeBeenSent={hasMagicCodeBeenSent}
                isLoading={isLoading}
            />
+      </GestureHandlerRootView>

Test branch

POC

https://github.com/user-attachments/assets/e96ba8ac-a089-41ed-9901-a92b3ddb4a59

What alternative solutions did you explore? (Optional)

Alternatively, if we want to wrap GestureHandlerRootView in a common modal, we can wrap it in BaseModal. However, this might sometimes be redundant.

//src/components/Modal/BaseModal.tsx#L277
+        <GestureHandlerRootView>
            <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
+        </GestureHandlerRootView>

[wildan-m]

Note for C+:

gestureHandlerRootHOC is essentially GestureHandlerRootView and using gestureHandlerRootHOC is officially suggested.

https://github.com/software-mansion/react-native-gesture-handler/blob/2eae15cca474752fc463e454e22fce5cf4710eb8/src/components/gestureHandlerRootHOC.tsx#L12

[c3024]

Thanks for your proposals.

@wildan-m 's proposal here addressed the root cause and suggested the fix. Solutions in the proposals by both the contributors are equivalent.

So, we can go with @wildan-m 's proposal.

🎀 👀 🎀 C+ reviewed.

[melvin-bot[bot]]

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