Improve keyboard avoid behavior for section list and Screen component with "fixed" preset variant

[fpena]

trafficstars

Please verify the following:

• [x] yarn test jest tests pass with new tests, if relevant
• [x] yarn lint eslint checks pass with new code, if relevant
• [x] yarn format:check prettier checks pass with new code, if relevant
• [x] README.md (or relevant documentation) has been updated with your changes

Describe your PR

This PR solves an issue with text inputs inside a list (e.g. SectionList, Flatlist, etc). It was first reported here.

Overall behaviour

Here are also videos with examples of variants for Screen.tsx and its preset prop.

preset="fixed" - items at top	preset="fixed" - items at bottom	preset="scroll" - items at top	preset="scroll" - items at bottom

[lindboe]

Tried this out on Android and iOS and it looks great 👍

[fpena]

Is the plan to also use the KeyboardAwareScrollView from react-native-keyboard-controller in Screen.tsx for ScreenWithScrolling? Or is that going to be a separate PR?

@frankcalise Not necessarily. I started by modifying Screen.tsx but stopped because I was naive to the react-native-keyboard-controller behaviour. Then I realized the solution was to add the renderScrollComponent prop in SectionList.

I think a more generic solution is needed for Screen.tsx if we want to support not only SectionList, but also FlashList and FlatList.

Let me know your thoughts!

[frankcalise]

Hmm. I think it's possible Screen (with scrolling) and handling the lists are actually separate since you wouldn't want to nest scrollviews (one being screen, the other coming from the list).

But to that point, yeah maybe something can be done in app/components/ListView for the lists aspect of the fix

[fpena]

Hmm. I think it's possible Screen (with scrolling) and handling the lists are actually separate since you wouldn't want to nest scrollviews (one being screen, the other coming from the list).

But to that point, yeah maybe something can be done in app/components/ListView for the lists aspect of the fix

@frankcalise I uploaded a commit with some improvements to Screen component and added keyboard avoid behavior to its ScrollView

[lindboe]

I'm seeing a weird issue on iOS, I reproduced on both simulator and physical device. It happens whether keyboard is open or not:

1. On demo showroom screen, open hamburger menu
2. Scroll all the way down the hamburger menu and select the last item ("Styling")
3. After screen animates to end, try to scroll up again. it will glitch and keep trying to scroll you back down.

https://github.com/user-attachments/assets/b25808cf-87b7-46df-a507-ddc3d227dfee

[fpena]

This is looking good! Nice work!

What are your thoughts on extending src/components/ListView.tsx similar to the way you did the demo section list?

Does that make sense or only if the list in not embedded in a <Screen /> at this point? Which I would say I typically reach for when letting the list drive the entire screen area.

@frankcalise I did a quick update to ListView to add renderScrollComponent and I'm getting an error related to MobX. I feel the scope of this PR is increasing. Would you mind if I create an extra issue to tackle that? Let me know what do you think!

[frankcalise]

@fpena yeah I agree, we can take care of that separately

[lindboe]

Preliminary impression: the bug no longer occurs, but the scrolling animation after menu selection on my Android device (Galaxy S21) is not smooth, and I think it was before. I want to try it out in release mode to see if it's any better, and again on the older versions to compare.

I can try that out after lunch.

[frankcalise]

preset="fixed" feels good on iOS (sim, haven't tried device just yet) and Android device.

The section list feels good on the iOS sim but not working as great on Android device? (Pixel 4).

As you can see my test for this is bringing the TextInput very low and some portion of behind the tab bar (although it makes no difference, as long as it is in the bottom half of the screen where the keyboard would be upon being shown) to make sure it has to adjust.

https://github.com/user-attachments/assets/61959b67-dc23-41b9-8e5b-e46259be3224

[lindboe]

Okay, I just compared with a plain v10 repro and I don't see a difference. Would be ideal to get this smoother but is fine for now since this list is so big 👍 attaching videos for reference

https://github.com/user-attachments/assets/6012638a-52db-4c94-9ba1-5e0c534d7e04

https://github.com/user-attachments/assets/29880cd4-d878-4e9c-ac5e-20092775dacd

[frankcalise]

Adding a video from a Pixel 7 device as well. Similar to the Pixel 4 video above, except the Login screen also showed some weird side effects (where it didn't, on the smaller screen size)

https://github.com/user-attachments/assets/3b2fc4ca-1138-4308-9cb1-9aad657f24ef

[infinitered-circleci]

:tada: This PR is included in version 10.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: