feat(iOS): modal detents

[hurali97]

Summary

As proposed in this discussion, this PR introduces feature for iOS 15+ detents with fabric support. Kudos to @barthap for his wonderful gist which introduces the feature for paper. Additional work was done to introduce this feature for fabric.

We have three values for detents and the usage is like below:

<Modal 
  detent="mediumResizable" // medium, large, mediumResizable
  presentationStyle="formSheet" // can also try pageSheet
/>

Down the road when adding support for fabric, it occurred to me that onRequestClose is not implemented, which prevents the dismiss of formSheet or PageSheet when we drag it down. So, added the support for onRequestClose as well. I am not sure why this was left out for fabric, if it was intentional, it might worth a discussion.

Since we don't have detents for android AFAIK, an empty method setDetent implemented in ReactModalHostManager to confirm to the generated interface.

Thanks to @nandorojo for his POC with the above gist and a nice tweet showcasing the demo 🚀

Changelog

[iOS] [Added] - iOS 15 detents to Modal

Test Plan

This feature is tested on rn-tester with both old and new arch, below is the output:

https://user-images.githubusercontent.com/47336142/193402450-c9da9835-9ac4-48aa-a703-6a34d08572f5.mp4

Code for rn-tester is not committed to not bloat the PR. I may address it following the design principles of rn-tester in a couple of days, once this PR is merged.

TODO

• Update documentation for detent on react-native website
• Update code to implement detent in rn-tester

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,062,509	+426
android	hermes	armeabi-v7a	6,466,999	+290
android	hermes	x86	7,376,950	+272
android	hermes	x86_64	7,345,932	+458
android	jsc	arm64-v8a	8,919,615	+514
android	jsc	armeabi-v7a	7,685,963	+377
android	jsc	x86	8,869,166	+361
android	jsc	x86_64	9,460,069	+545

Base commit: 745f3ee8c571560406629bc7af3cf4914ef1b211 Branch: main

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 745f3ee8c571560406629bc7af3cf4914ef1b211 Branch: main

[nandorojo]

Thoughts on calling the prop detent without the word modal? Seems a bit obvious that the modal is part of it.

[hurali97]

Thoughts on calling the prop detent without the word modal? Seems a bit obvious that the modal is part of it.

Hmm. I tend to agree with keeping the prop name to detent, to match the parity with other props such as presentationStyle, animationType, etc. I will try to incorporate these changes asap. Thanks for the comment 🌟

[cipolleschi]

Could you also rebase the PR on main? The ios errors should have been fixed now.

[hurali97]

@cipolleschi Thanks for the reviews, these are now incorporated. Would be great if you could re-review 🚀

I am not sure why CI fails on test_windows.

[cipolleschi]

that's just a flaky test, unfortunately

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[nandorojo]

Awesome seeing this approved so quickly, thanks @hurali97 & @cipolleschi!

[hurali97]

@cipolleschi Can you see what caused the Facebook Internal - Linter to fail? 🙂

[cipolleschi]

There are some linting errors in the internal CI. The Clang format we use internally is slightly different from the Open Source one (we are working on their alignment but is not as easy as it looks, unfortunately). Don't worry too much about them: as soon as the PR is ok, I'll reimport it, fix the linting problems and land it! ;)

[hurali97]

There are some linting errors in the internal CI. The Clang format we use internally is slightly different from the Open Source one (we are working on their alignment but is not as easy as it looks, unfortunately). Don't worry too much about them: as soon as the PR is ok, I'll reimport it, fix the linting problems and land it! ;)

Perfect. I have added a few comments regarding your suggestions, would be great if you could discuss them.

[facebook-github-bot]

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[cipolleschi]

I'm going to run the internal formatter on the diff and then we can land it. Thank you so much for the effort and the PR!

[pull-bot]

PR build artifact for 4ce436c6f571b5b442b599b83836d5096db58f38 is ready. To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.