Clean up IOUAmount page

[thienlnam]

Details

1. Removes the ActivityIndicator
2. Autofocuses on input on web
3. Remember the amount entered when we return to the page from later steps

Fixed Issues

Fixes https://github.com/Expensify/Expensify/issues/163041

Tests / QA

1. Go to someone's chat and click the + button and hit 'Request Money'

2. (On Web/Desktop), make sure the amount field is focused on (entering any text automatically adds it and the cursor is blinking)
   

3. (On Web/Desktop) Enter any amount and hit the 'Enter' button on your keyboard. Make sure that it takes you to the next screen.

4. (Other platforms) Enter in any amount and hit next

5. Go back and ensure that you still see the amount you entered before

Tested On

• Web
• Mobile Web
• Desktop
• iOS
• Android

Screenshots

Web

Mobile Web

Desktop

iOS

Android

[thienlnam]

Got a request in the original issue to add a feature: https://github.com//Expensify/issues/163041#issuecomment-834285328

Putting on hold while I take care of that

[thienlnam]

Alright, ready to be reviewed! @stitesExpensify

[thienlnam]

Brandon is OOO today, and since it's a daily I'm going to trigger auto-assigner again

[Jag96]

I think we should avoid the setTimeout call if possible

[Jag96]

Looking good, just one comment and one question!

[thienlnam]

Thanks for the comments, updated! I was also able to find a cleaner way to handle the focus cc @Jag96 @jasperhuangg

[jasperhuangg]

Looks good!

[thienlnam]

Fixed merge conflicts!

[Jag96]

Getting a crash on iOS because document doesn't exist in the mobile context:

[thienlnam]

Removed the accidental podfile change 👍

[tgolen]

Hm, I don't know where I said this before, I swear I said it, but can't find it now :(

I'm not a fan of these files being split into index/index.native like they are currently. This will be the first time that an entire page is split between platforms, and it really creates a lot of repeated code. I think a solution should be found that only abstracts the absolute least amount of logic in the platform-specific files as possible. This will decrease the cost to maintain these files in the future as it's not very clear what logic is different between the two files.

[thienlnam]

I agree with you on all those points, the only logic difference in the files was the keydown event handler for Web/Desktop, which was having document is undefined errors on mobile. I thought the way to handle that would be to split them into different files but it actually turns out there is a KeyboardShortcut component that handles precisely this problem so thanks for bringing that up 👍

[tgolen]

Ah, that looks great! Thank you

[Jag96]

I'm seeing another crash on iOS after step 4 Enter in any amount and hit next. Do you see the same @thienlnam?

TypeError: undefined is not an object (evaluating 'option.participantsList.length')
This error is located at:
    in OptionRow
    in OptionRow (at OptionsList.js:160)

[thienlnam]

@Jag96 I'm seeing those same errors but they're happening on prod and unrelated to these changes #2969. Just updated back to those block comments

[thienlnam]

Going to self merge since we got 2 approvals