Commit Graph

30 Commits

Author SHA1 Message Date
Nishan Bende c29ec46b0e fix#29319 - ios dismiss modal (#31500)
Summary:
This PR aims to resolve iOS can't dismiss Modal on swipe gesture.
https://github.com/facebook/react-native/issues/29319

When modal presentationStyle is pageSheet, iOS allows to dismiss the modal using swipe gesture. This PR adds support for that feature
## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Added] - Support for onRequestClose for iOS Modal component.

Pull Request resolved: https://github.com/facebook/react-native/pull/31500

Test Plan:
- If onRequestClose updates the visibility state, modal will be closed.

```
<Modal
    visible={visible}
    animationType="slide"
    presentationStyle="pageSheet"
    onRequestClose={dismiss}>
</Modal>
```

https://user-images.githubusercontent.com/23293248/117590263-36cd7f00-b14c-11eb-940c-86e700c0b8e7.mov

## Notes
- In this PR, only support for partial drag is added. i.e. user can't drag the modal up and down completely. I added full user dragging but reverted in this [commit](https://github.com/facebook/react-native/commit/bb65b9a60d54b61652d608661eba876b49be3b17) to support controllable onRequestClose. If someone has any suggestion to have full draggable support + controllable onRequestClose, please let me know.

<!--

 the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->

Reviewed By: p-sun

Differential Revision: D30041625

Pulled By: sammy-SC

fbshipit-source-id: 9675da760bd5c070c4f0e1d30271c8af5c50b998
2021-08-16 11:25:57 -07:00
Paige Sun 7bf78eae5e iOS: 5/7 Use visible prop to dismiss Modal for Paper
Summary:
Changelog: [iOS] Use visible prop to dismiss Modal on old renderer.

Visible prop is used on Fabric so that onDismiss can be passed with the the bridgeless per-component event emitter, rather than the bridge global event emitter. The old renderer still uses the global event emitter.

I needed to use the visible prop for Paper too because in diff 6/7, Modal.js [no longer uses visible prop to return null](https://github.com/facebook/react-native/blob/dc80b2dcb52fadec6a573a9dd1824393f8c29fdc/Libraries/Modal/Modal.js#L221-L222), and Modal.js can't distinguish on whether it's a Fabric or Paper component.

Reviewed By: JoshuaGross

Differential Revision: D28137929

fbshipit-source-id: f6ede0019fbe498a10b822ff09fc135a9fff8ec0
2021-05-02 15:42:49 -07:00
Paige Sun 0932a0d775 iOS: 2/5 Remove use of bridge from Modal by dismissing with visible prop
Summary: Changelog: [Fabric][iOS][Fix] Remove use of bridge from Modal by dismissing Modal with visible prop

Reviewed By: sammy-SC

Differential Revision: D28074326

fbshipit-source-id: 0278bfb031db802b59429c553ac62d83838f4cc9
2021-05-02 15:42:49 -07:00
Paige Sun 3c17922c35 iOS: 1/7 Add missing onDismiss prop in Modal component
Summary:
Changelog: [Internal]

Static ViewConfigs are not yet available in Fabric. ViewConfigs are generated from Paper view managers.

For a prop to pass through from JS to iOS, props in [RCTModalHostViewNativeComponent.js](https://github.com/facebook/react-native/blob/dc80b2dcb52fadec6a573a9dd1824393f8c29fdc/Libraries/Modal/RCTModalHostViewNativeComponent.js) need to match RCT_EXPORT_VIEW_PROPERTY in RCTModalHostViewManager.m.

Reviewed By: sammy-SC

Differential Revision: D27977574

fbshipit-source-id: 9790d93500890a04ffc0fb4d2bcd2de5187f1fc0
2021-05-02 00:19:53 -07:00
Koichi Nagaoka d85d5d2e19 Fix cannot working Modal's onDismiss. (#29882)
Summary:
Fixes: https://github.com/facebook/react-native/issues/29455

Modal's onDismiss is not called on iOS.
This issue occurred the commit https://github.com/facebook/react-native/commit/bd2b7d6c0366b5f19de56b71cb706a0af4b0be43 and was fixed the commit https://github.com/facebook/react-native/commit/27a3248a3b37410b5ee6dda421ae00fa485b525c.
However, the master and stable-0.63 branches do not have this modified commit applied to them.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[iOS] [Fixed] - Modal's onDismiss prop will now be called successfully.

Pull Request resolved: https://github.com/facebook/react-native/pull/29882

Test Plan:
Tested on iOS with this change:

1. Set function Modal's onDismiss prop.
1. Set Modal's visible props is true. (show Modal)
1. Set Modal's visible props is false. (close Modal)
1. The set function in onDismiss is called.

Reviewed By: shergin

Differential Revision: D24648412

Pulled By: hramos

fbshipit-source-id: acf28fef21420117c845d3aed97e47b5dd4e9390
2020-11-13 23:56:09 -08:00
simek 2160377574 remove most of tvOS remnants from the code (#29407)
Summary:
Refs: [0.62 release](https://reactnative.dev/blog/#moving-apple-tv-to-react-native-tvos), https://github.com/facebook/react-native/issues/28706, https://github.com/facebook/react-native/issues/28743, https://github.com/facebook/react-native/issues/29018

This PR removes most of the tvOS remnants in the code. Most of the changes are related to the tvOS platform removal from `.podspec` files, tvOS specific conditionals removal (Obj-C + JS) or tvOS CI/testing pipeline related code.

In addition to the changes listed above I have removed the deprecated `Platform.isTVOS` method. I'm not sure how `Platform.isTV` method is correlated with Android TV devices support which is technically not deprecated in the core so I left this method untouched for now.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

* **[Internal] [Removed]** - remove most of tvOS remnants from the code:
  * `TVEventHandler`, `TVTouchable`, `RCTTVView`, `RCTTVRemoteHandler` and `RCTTVNavigationEventEmitter`
* **[Internal] [Removed]** - remove `TARGET_TV_OS` flag and all the usages
* **[iOS] [Removed]** - remove deprecated `Platform.isTVOS` method
* **[iOS] [Removed]** - remove deprecated and TV related props from View:
  * `isTVSelectable`, `hasTVPreferredFocus` and `tvParallaxProperties`
* **[iOS] [Removed]** - remove `BackHandler` utility implementation

Pull Request resolved: https://github.com/facebook/react-native/pull/29407

Test Plan: Local tests (and iOS CI run) do not yield any errors, but I'm not sure how the CI pipeline would react to those changes. That is the reason why this PR is being posted as Draft. Some tweaks and code adjustment could be required.

Reviewed By: PeteTheHeat

Differential Revision: D22619441

Pulled By: shergin

fbshipit-source-id: 9aaf3840c5e8bd469c2cfcfa7c5b441ef71b30b6
2020-09-28 21:26:41 -07:00
Mi-ZAZ 8933724d7d Update RCTModalHostViewManager.m (#29745)
Summary:
Fix a issue that RCTModalHostView can't be dismissed while being presented

Steps To Reproduce
A native modal presented view controller is being dismissed before the first screen shows.
A RCTModalHostView is presented when the first screen shows.
The RCTModalHostView will be dismissed after an asynchronous callback.
If the callback was called before the completion of the presenting animation, the RCTModalHostView will not be dismissed.

## Changelog

[iOS] [Fixed] - Fix that RCTModalHostView can't be dismissed while being presented

Pull Request resolved: https://github.com/facebook/react-native/pull/29745

Reviewed By: shergin

Differential Revision: D23566487

Pulled By: sammy-SC

fbshipit-source-id: bd95f200b79fa75e2387e402091d58c0f538759c
2020-09-09 06:41:06 -07:00
Valentin Shergin d0871d0a9a Clang format for all React Native files
Summary:
Buckle up, this enables clang-format prettifier for all files in React Native opensource repo.

Changelog: [Internal] Clang-format codemod.

Reviewed By: mdvacca

Differential Revision: D20331210

fbshipit-source-id: 8da0f94700be0c35bfd399e0c48f1706de04f5b1
2020-03-08 23:01:17 -07:00
Valentin Shergin ed11a12a7c Revert D19235758: Implement onRequestClose for iOS 13+ modals
Differential Revision:
D19235758

Original commit changeset: c0f1d946c77c

fbshipit-source-id: c4a9d7876aa8d07ff5b8419f097b02e9c28e2880
2020-02-06 14:45:42 -08:00
Jorge Bernal 8e5fac89bb Implement onRequestClose for iOS 13+ modals (#27618)
Summary:
Starting on iOS 13, a View Controller presented modally will have a "bottom sheet" style unless it's explicitly presented full screen.

Before this, modals on iOS were only being dismissed programatically by setting `visible={false}`. However, now that the dismissal can happen on the OS side, we need a callback to be able to update the state.

This PR reuses the `onRequestClose` prop already available for tvOS and Android, and makes it work on iOS for this use case.

Should fix https://github.com/facebook/react-native/issues/26892

## Changelog

[iOS] [Added] - Add support for onRequestClose prop to Modal on iOS 13+
Pull Request resolved: https://github.com/facebook/react-native/pull/27618

Test Plan:
I tested this using the RNTester app with the Modal example:

1. Select any presentation style other than the full screen ones
2. Tap Present and the modal is presented
3. Swipe down on the presented modal until dismissed
4. Tap Present again and a second modal should be presented

![Screen Recording 2019-12-26 at 14 05 33](https://user-images.githubusercontent.com/8739/71477208-0ac88c80-27e9-11ea-9342-8631426a9b80.gif)

Differential Revision: D19235758

Pulled By: shergin

fbshipit-source-id: c0f1d946c77ce8d1baab209eaef7eb64697851df
2020-02-05 21:42:17 -08:00
Andres Suarez 3b31e69e28 Tidy up license headers [2/n]
Summary: Changelog: [General] [Fixed] - License header cleanup

Reviewed By: yungsters

Differential Revision: D17952694

fbshipit-source-id: 17c87de7ebb271fa2ac8d00af72a4d1addef8bd0
2019-10-16 10:06:34 -07:00
Samuel Susla bd2b7d6c03 Fix onDismiss in Modal
Summary:
# Disclaimer:
I might be missing something as the solution I implemented here seems like something that was considered by original author. If this solution isn't good, I have a plan B.

# Problem:
`onDismiss` prop isn't being called once the modal is dismissed, this diff fixes it.

Also I've noticed that `onDismiss` is meant to only work on iOS, why is that? By landing this diff, it'll be called on Android as well so we need to change the docs (https://facebook.github.io/react-native/docs/modal.html#ondismiss).

## Video that shows the problem
Following code is in playground.js P70222409 which just increments number everytime onDismiss is called

{F166303269}

Reviewed By: shergin

Differential Revision: D16109536

fbshipit-source-id: 3fba56f5671912387b217f03b613dffd89614c9d
2019-07-29 11:19:30 -07:00
zhongwuzw fd7f5bb768 Keep the order of Modals that we can dismiss in sequence (#24961)
Summary:
Fixes https://github.com/facebook/react-native/issues/16037.
We need to keep the order of Modals, if we dismiss Modal randomly(before we use hash table), some Modals may not dismiss successfully.

This PR should based on https://github.com/facebook/react-native/pull/24959.

## Changelog

[iOS] [Fixed] - Keep the order of Modals that we can dismiss in sequence
Pull Request resolved: https://github.com/facebook/react-native/pull/24961

Differential Revision: D15621858

Pulled By: cpojer

fbshipit-source-id: 964729f8f4584995f4e1dd527af4b61534d369ba
2019-06-04 07:12:46 -07:00
zhongwuzw 284c5f0ad0 Using presentingViewController to dismiss Modal (#24959)
Summary:
Fixes https://github.com/facebook/react-native/issues/23463.
Using `presentingViewController` to dismiss Modal VC directly, don't let Modal VC to find `presentingViewController`, then dismiss.

## Changelog

[iOS] [Fixed] - Using presentingViewController to dismiss Modal
Pull Request resolved: https://github.com/facebook/react-native/pull/24959

Differential Revision: D15575571

Pulled By: cpojer

fbshipit-source-id: e275e7c7fef644c06cc8e64dba5b5a5af4129192
2019-05-31 03:01:37 -07:00
Héctor Ramos 1151c096da Update copyright headers to yearless format
Summary: This change drops the year from the copyright headers and the LICENSE file.

Reviewed By: yungsters

Differential Revision: D9727774

fbshipit-source-id: df4fc1e4390733fe774b1a160dd41b4a3d83302a
2018-09-11 15:33:07 -07:00
Sophie Alpert 1490ab12ef Update license headers for MIT license
Summary:
Includes React Native and its dependencies Fresco, Metro, and Yoga. Excludes samples/examples/docs.

find: ^(?:( *)|( *(?:[\*~#]|::))( )? *)?Copyright (?:\(c\) )?(\d{4})\b.+Facebook[\s\S]+?BSD[\s\S]+?(?:this source tree|the same directory)\.$
replace: $1$2$3Copyright (c) $4-present, Facebook, Inc.\n$2\n$1$2$3This source code is licensed under the MIT license found in the\n$1$2$3LICENSE file in the root directory of this source tree.

Reviewed By: TheSavior, yungsters

Differential Revision: D7007050

fbshipit-source-id: 37dd6bf0ffec0923bfc99c260bb330683f35553e
2018-02-16 18:31:53 -08:00
Mehdi Mulani a389ffbd84 Add onDismiss to Modal.js
Summary: Adds an onDismiss so that navigation events can be chained to the dismissing of a modal.

Reviewed By: sahrens

Differential Revision: D5852953

fbshipit-source-id: a86e36fdd5b0b206c2dd9fa248e2a88da22efa31
2017-09-21 15:01:52 -07:00
Douglas Lowder 0d3039f1a0 Fix for Modal behavior when menu button pressed on Apple TV (Issue #15313)
Summary:
**Motivation**

On Apple TV, pressing the menu button destroys the native view that backs the `Modal` component, causing an app using this component to get into a broken state.  This fix implements `onRequestClose` for tvOS to have the same behavior as it does for the Android back button.

**Test plan**

Manually tested this with the `ModalExample` in the `RNTester` app.  See also the test code in issue #15313.
Closes https://github.com/facebook/react-native/pull/15341

Differential Revision: D5651035

Pulled By: shergin

fbshipit-source-id: 54bf66887bbe85940567e63e90b437ac4a8daf9a
2017-08-17 15:22:12 -07:00
Hank Brekke ec68536e08 iOS presentationStyle Modal Appearance
Summary:
When using `<Modal` on larger iOS devices, esp. iPad and iPhone 7 Plus devices, there is no way to use the system functionality for controlling the appearance of modals (`presentationStyle`), which improves the native system's animation and display of smaller content appearing within large horizontal space.

I've added a new picker for selecting a `presentationStyle` within  the RNTester app. See below for the appearance of this change, as well as the relevant changes to the RN documentation.

![may-22-2017 09-49-50](https://cloud.githubusercontent.com/assets/3521186/26315020/6d4b1cb0-3ed5-11e7-8ac8-a996f1ee00f9.gif)
<img width="1051" alt="screen shot 2017-05-22 at 9 50 12 am" src="https://cloud.githubusercontent.com/assets/3521186/26315021/6d4cbf7a-3ed5-11e7-9d13-a5d20c9f3533.png">
Closes https://github.com/facebook/react-native/pull/14102

Differential Revision: D5281990

Pulled By: shergin

fbshipit-source-id: 882d8cb79e7adb0b4437cdf26e5e7ab1fc04f4c1
2017-06-20 19:22:57 -07:00
Valentin Shergin f33f84e75f Deprecating/removing setFrame, setLeftTop, and co.
Summary:
Motivation:
 * `RCTShadowView`'s `frame` property actually represents computed layout of the view. We must not use it as a setter for yoga node styles;
 * Using `frame` and `setLeftTop` in existing way actually works only for view with absolute positioning, so it is super rare and special case;
 * Internally, setting `frame` only make sense to `RootView`, and in that case there we always must not change `origin` we are introducing `setSize` method.

Changes:
 * `[-RCTShadowView setFrame:]` was removed, `frame` property is readonly now;
 * `[-RCTShadowView setLeftTop:]` was removed; no replacement provided;
 * `[-RCTShadowView size]` read-write property was added;
 * `[-RCTUIManager setFrame:forView:]` was deprecated, use (just introduced) `setSize:forView:` instead;
 * `[-RCTUIManager setSize:forView:]` was added.

If you are still need some of removed methods, you are probably doing something wrong. Consider using `setIntrinsicContentSize`-family methods,
`setSize`-family methods, or (in the worst case) accessing `yogaNode` directly.

Reviewed By: javache

Differential Revision: D4491384

fbshipit-source-id: 56dd84567324c5a86e4c870a41c38322dc1224d2
2017-02-01 13:13:27 -08:00
Valentin Shergin 47f18bdb17 Nobody outside RCTTouchHandler should treat it as UIGestureRecognizer subclass
Reviewed By: mmmulani

Differential Revision: D4387821

fbshipit-source-id: 8060772a5de669eeaca159ceac13b995d7518a1b
2017-01-09 00:13:33 -08:00
Mehdi Mulani de3457f31d Allow <Modal /> to be presented in different orientations
Reviewed By: javache

Differential Revision: D3760002

fbshipit-source-id: 01f5c246fb0fc041ec2d63b4ef80de858fb6fdf2
2016-09-07 13:10:11 -07:00
Mehdi Mulani d8b2bab794 Allow <Modal /> to be configured with a custom presentation/dismissal block
Reviewed By: javache, majak

Differential Revision: D3751545

fbshipit-source-id: 4cf420769f7939289c0b0b70ae784328df8e2bbf
2016-08-23 16:58:41 -07:00
Roshan Jossey 915345bd01 Fix memory leak bug in RCTModalHost
Summary:
This PR addresses issue #9265.

Negated the condition that checks if `_hostViews` exists so that `_hostViews` will be allocated only if it doesn't exist
Closes https://github.com/facebook/react-native/pull/9295

Differential Revision: D3686214

fbshipit-source-id: ec0caac99d231786eefad023f3f0ed44a79f687e
2016-08-08 15:58:33 -07:00
Jesse Sessler 2bb1c263db Modal Animation Types
Summary:
Currently the Modal component uses the slide up / down animation for presenting and hiding the Modal with no options. This PR gives users a choice to use a fade in / out animation or the current slide animation (slide is the default). Android and iOS.

![](http://g.recordit.co/nfJSg487Ox.gif)  ![](http://g.recordit.co/QHGDuUFbPy.gif)

I've updated the UIExplorer and documentation.

![image](https://cloud.githubusercontent.com/assets/4265163/14743130/0bd8282c-086e-11e6-93eb-3d344431337d.png)

Thanks!
Closes https://github.com/facebook/react-native/pull/7156

Differential Revision: D3237809

Pulled By: javache

fb-gh-sync-id: 813e56ada8b19990dc5018527dc3a81b2c8b349a
fbshipit-source-id: 813e56ada8b19990dc5018527dc3a81b2c8b349a
2016-04-28 16:00:32 -07:00
Pieter De Baets 2b69ec2589 Provide initial size to Modal
Reviewed By: majak

Differential Revision: D3202211

fb-gh-sync-id: 83a1d3d52df0dc68483639393ab64fd6f1281cb3
fbshipit-source-id: 83a1d3d52df0dc68483639393ab64fd6f1281cb3
2016-04-21 08:57:19 -07:00
Eric Lo 8c25181c44 Add onShow callback for RCTModalHostView
Summary: Added ability to include a callback to the modal. The callback is invoked when the modal is shown.

Reviewed By: javache

Differential Revision: D3005212

fb-gh-sync-id: 12648e17bd1cf831daf65529b87ae8cfdb901c65
shipit-source-id: 12648e17bd1cf831daf65529b87ae8cfdb901c65
2016-03-03 12:43:36 -08:00
Nick Lockwood 060664fd3d Refactored module access to allow for lazy loading
Summary: public

The `bridge.modules` dictionary provides access to all native modules, but this API requires that every module is initialized in advance so that any module can be accessed.

This diff introduces a better API that will allow modules to be initialized lazily as they are needed, and deprecates `bridge.modules` (modules that use it will still work, but should be rewritten to use `bridge.moduleClasses` or `-[bridge moduleForName/Class:` instead.

The rules are now as follows:

* Any module that overrides `init` or `setBridge:` will be initialized on the main thread when the bridge is created
* Any module that implements `constantsToExport:` will be initialized later when the config is exported (the module itself will be initialized on a background queue, but  `constantsToExport:` will still be called on the main thread.
* All other modules will be initialized lazily when a method is first called on them.

These rules may seem slightly arcane, but they have the advantage of not violating any assumptions that may have been made by existing code - any module written under the original assumption that it would be initialized synchronously on the main thread when the bridge is created should still function exactly the same, but modules that avoid overriding `init` or `setBridge:` will now be loaded lazily.

I've rewritten most of the standard modules to take advantage of this new lazy loading, with the following results:

Out of the 65 modules included in UIExplorer:

* 16 are initialized on the main thread when the bridge is created
* A further 8 are initialized when the config is exported to JS
* The remaining 41 will be initialized lazily on-demand

Reviewed By: jspahrsummers

Differential Revision: D2677695

fb-gh-sync-id: 507ae7e9fd6b563e89292c7371767c978e928f33
2015-11-25 04:49:45 -08:00
Alexsander Akers 0f14933948 Enable transparent modal presentation with <Modal />
Summary:
Enable transparent modal backgrounds using `UIModalPresentationCustom` modal presentation style.
2015-08-14 04:47:12 -08:00
Alex Akers 7d19ff3dcb Add <Modal /> component
Summary:
Create Modal component that can be used to present content modally.
2015-07-28 07:21:50 -08:00