MM-9548 - Scroll to top when iOS status bar is pressed

[emilioicai]

Summary

React Native ScrollViews (including FlatLists) are flipped upside down when the prop inverted is set to true. This is the root of many bugs one of them affecting PostList: tapping on the status bar in iOS should scroll the Flatlist up to the top.

The solution proposed is to detect natively if the ScrollView is inverted, on such case, prevent it from scrolling it to the beginning of the ScrollView (as a non-inverted ScrollView would do) and force a scroll to the end of it.

I've been careful not to force the scroll if the user explicitly selected not to do it or if it's happening in a nested ScrollView, as it's default in iOS.

Ticket Link

Fixes mattermost/mattermost#13220
Jira Ticket: https://mattermost.atlassian.net/browse/MM-9548

Checklist

• Has UI changes
• Includes text changes and localization file updates

Device Information

This PR was tested on: iPhone XS (iOS 13.1.3), iPhone 8 (iOS 13.1.3)

Screenshots

[emilioicai]

Related facebook/react-native#21126
Related facebook/react-native#27574

[chuttam]

As a patch, this looks good to me.

The diff for the single react-native+0.61.2.path is getting a bit difficult to tease out individual change sets. It seems like patch-package doesn't have a way to allow manual organizing of the single patch file contents. Should we consider creating a separate patch file for each identifiable thing/feature/bug? We run all patches in make post-install anyway.

[migbot]

LGTM!

[migbot]

As a patch, this looks good to me.

The diff for the single react-native+0.61.2.path is getting a bit difficult to tease out individual change sets. It seems like patch-package doesn't have a way to allow manual organizing of the single patch file contents. Should we consider creating a separate patch file for each identifiable thing/feature/bug? We run all patches in make post-install anyway.

Yep, we could do something like:

{package}+{version}+{short_description}.patch

patch-package will throw a warning but will still apply the patches:

Warning: patch-package detected a patch file version mismatch

  Don't worry! This is probably fine. The patch was still applied
  successfully. Here's the deets:

  Patch file created for

    react-native@0.61.2+test2

  applied to

    react-native@0.61.2
  
  At path
  
    node_modules/react-native

[enahum]

🎉

[saturninoabril]

Tested and looks good to me, thanks @emilioicai!

[mattermod]

This issue has been automatically labelled "stale" because it hasn't had recent activity.
A core team member will check in on the status of the PR to help with questions.
Thank you for your contribution!

/cc @jasonblais @hanzei

[adamjclarkson]

Ok, have tested on my iPhone X, iOS 13.3. Working great. My one question is about this caveat in original summary:

I've been careful not to force the scroll if the user explicitly selected not to do it or if it's happening in a nested ScrollView, as it's default in iOS.

@emilioicai is there a way for me to test this? How would a user explicitly have this turned off?

[emilioicai]

@adamjclarkson sorry, by user I meant developer, I sent this PR also to React Native’s repo and copied the description. Developers can disable scrolling to top through a specific parameter.

[adamjclarkson]

Works perfectly. Thanks @emilioicai

[migbot]

Thanks @emilioicai!