Commit Graph

34 Commits

Author SHA1 Message Date
Elie Teyssedou 56a4538b31 Update documentation for Modal's prop animationType
Summary:
I was using Modal component and I didn't knew what was the default for animationType prop. After reading the code, I saw that it was `none`.

I did not tell that the "default" is `slide` if animated is set to `true`, because it is not a default but an implementation of `animated` prop effect and because of the deprecation of `animated`.

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

Differential Revision: D4795765

Pulled By: hramos

fbshipit-source-id: 25d62ac7eeb20fc5557918c3d75709f44f5d4972
2017-03-29 11:31:51 -07:00
Üstün Ergenoglu 3785db2fb1 Add property to force HW acceleration on Android for modal windows
Summary:
When using React Native on Android on top of a game as an overlay, dialog windows sometimes get created with hardware acceleration disabled. This causes the UI to be unresponsive and anything that uses a TextureView stops working. Added a property for the modal view to make sure hardware acceleration flag is enabled when it's set to true.

**Test plan (required)**

set `hardwareAccelerated` property for Modal to force hardware acceleration on dialog windows on Android. Does nothing on iOS.
Closes https://github.com/facebook/react-native/pull/11421

Differential Revision: D4312912

Pulled By: andreicoman11

fbshipit-source-id: 9db6b2eca361421b92b24234b3501b5de0eecea7
2016-12-14 10:28:33 -08:00
Kevin Gozali 4530da87e2 make Modal pass rootTag to AppContainer
Summary:
Following up on fb7fe2d4e8: when <Modal> is used in dev mode, it renders `<AppContainer>` to wrap the children so that the element inspector can show up correctly. In that scenario, we need pass the `rootTag` over the `<AppContainer>` so that the children can read the rootTag correctly. Otherwise, the children of <Modal> will see it as undefined.

With this, AppContainer can then declare `rootTag` as a required prop, as it should have been.

Note that this only affects DEV build because there's no AppContainer wrapping otherwise.

Reviewed By: jingc

Differential Revision: D4204011

fbshipit-source-id: 80edbc8d351d983786e6fc3c68dfa65a71b1ed3c
2016-11-18 01:43:26 -08:00
Neo 6a83ac3af6 update Modal.js to fix #10662
Summary:
further discussion: should there be a `onClose` or `onClosed` to pair with `onShow`? which would make a workaround for #10471 much easier
Closes https://github.com/facebook/react-native/pull/10669

Differential Revision: D4133832

Pulled By: hramos

fbshipit-source-id: 644a5bb6b9da697c81fc96ae4da196ba5b4050cb
2016-11-04 18:43:42 -07:00
Konstantin Raev 6ea26c01de Reverted commit D4027388
Reviewed By: yungsters

Differential Revision: D4027388

fbshipit-source-id: 8e3341b6f393ccf432c1a4e22a7cbf422284a06f
2016-10-16 04:13:42 -07:00
Jan Kassens e58d17e68b React.Element<any> » React.Element<*>
Reviewed By: yungsters

Differential Revision: D4027388

fbshipit-source-id: 5bc178eab1ab72283622b4b7d418f9fd43ec0792
2016-10-15 17:58:38 -07:00
Tim Yung 7263c349c7 RN: Stop Deep Linking `ReactPropTypes`
Reviewed By: sebmarkbage

Differential Revision: D4025448

fbshipit-source-id: 4e9b6ee002a86f638fc57a4bbeb45bf35fabf74c
2016-10-14 18:59:10 -07:00
Tim Yung e8198aed8d Cleanup: Prefer `React.Element` over `React$?Element`
Reviewed By: vjeux

Differential Revision: D4013049

fbshipit-source-id: 18a447fdbc584418d6a51770363bcd221e7fb7dc
2016-10-14 08:59:37 -07:00
Evgrafov Denis 924c9927d0 Update Modal.js
Summary: Closes https://github.com/facebook/react-native/pull/9825

Differential Revision: D4010331

Pulled By: mmmulani

fbshipit-source-id: 81c0a07716d47429dae8f28d08c9b5b13d30bf26
2016-10-12 21:13:45 -07:00
AgtLucas dbc853246d Remove missing link from Modal doc
Summary:
Is okay to remove this link? It seems that we don't have the Navigator Comparison anymore.
Closes https://github.com/facebook/react-native/pull/10186

Differential Revision: D3951863

Pulled By: mmmulani

fbshipit-source-id: 170f4cc9288f84d88c3b607e3a1a85619d9776c8
2016-09-30 11:43:44 -07:00
Andrei Coman 05de4dbb94 Fix inspector on top of Modal
Summary:
Very similar to https://github.com/facebook/react-native/pull/9600.
Does not trigger on DEV, but there are two inspectors: one underneath and one
above the modal. This looks like something we should fix, but the only solution
I've come up with so far was to mangle the event that AppContainer listens to, so that
only the AppContainer in the modal responds to it. This seems pretty ugly, I'd
rather look for something else. Wdyt?

Reviewed By: frantic

Differential Revision: D3937096

fbshipit-source-id: a6e648b6d583088514d6ba8df7851f9a8ef48f74
2016-09-29 04:58:33 -07:00
Andrei Coman 404b7cc069 BREAKING: Fix modal resizing on keyboard show
Summary:
This changes modal behavior to resize when the keyboard appears/disappears.
Previously, the modal would not react in any way, or it would pan above to bring the
TextInput into view. Resizing is the correct behavior for android.

This is not trivial, as in, setting the flag, because of the combination of
react native laying out all views and the system reacting to the keyboard
appearance in a weird way. Namely:
- if `windowTranslucentStatus` is not set, the system will just call
  `onSizeChanged` on the dialog's content view, and everything works nicely
- with `windowTranslucentStatus` set, the system will consider the dialog as a
  full screen view that doesn't resize. In order for it to resize, the base
  view of the layout needs to have
  `setFitsSystemWindows(true)` called on it. This is needed, so that the system
  can call layout on that base view with the new value of `paddingBottom` that
  coincides with the height of the keyboard. Neat.

We fix this by wrapping our existing content view (mHostView) in a simple
FrameLayout that has `setFitsSystemWindows` set. That way, `mHostView` will have
`onSizeChanged` called on itself with the correct new size of the dialog.

This has the fortunate consequence of our layout now also getting `paddingTop` as the size of the
status bar, which means that we can remove the JS `top` hack in Modal, which
was necessary for no view getting drawn under the status bar.

This behavior is set as default, since that is the default correct Android behavior.

Reviewed By: astreet

Differential Revision: D3913784

fbshipit-source-id: 4378ada21f466dc7ac6e357abeca10b88009ca3f
2016-09-28 02:58:37 -07: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
Mengjue Wang a527ef2032 Fix Popover problem for RTL 1/n
Summary: Change modal.js to support RTL

Reviewed By: javache

Differential Revision: D3580776

fbshipit-source-id: e9ef3f340f52e38fd905dce6d14a74d3bd7b7982
2016-07-19 10:43:29 -07:00
David Aurelio bd60d828c5 Remove `node_modules/react` from the list of discoverable haste modules
Summary: This removes `node_modules/react` from the list of directories that are used for haste module resolutions. Modules required from React are now imported with `require('react/lib/…')`.

Reviewed By: astreet

Differential Revision: D3509863

fbshipit-source-id: 32cd34e2b8496f0a6676dbe6bb1eacc18124c01e
2016-07-05 06:44:33 -07:00
Eric Nakagawa 167654248b Api documentation update for modal.js
Summary:
Related to #8203 to update the Modal API reference doc.

**Test plan (required)**

Started up the website and checked:
http://localhost:8079/react-native/docs/modal.html

![modal update](https://cloud.githubusercontent.com/assets/23874/16316792/ecde19cc-393c-11e6-8136-16243a199d9b.png)

**Note, copied from a previous PR**

The code is not Flow-ified so depended on jsdoc formatting to get the method parameter types. There's a current issue with handling optional types via react-docgen which parses components. There's an open PR to look into this: https://github.com/reactjs/react-docgen/pull/89. When that's resolved the `replaceAtIndex` method parameter type that's documented for `cb` needs to be updated to make it optional.
Closes https://github.com/facebook/react-native/pull/8375

Differential Revision: D3479536

Pulled By: caabernathy

fbshipit-source-id: de2db3aa221e4adce0c0c5f3d94a1fad528a60da
2016-06-23 18:58:30 -07:00
Basil Hosmer ac5636dd59 explicit type args in react-native-github
Reviewed By: vjeux

Differential Revision: D3342856

fbshipit-source-id: ba5a4d5529fc9d1d1efe98cc175d718c5f044a5b
2016-05-24 18:28:26 -07:00
Jesse Sessler 191d278fda Modal Status Bar Translucent
Summary:
Currently the Modal component on Android is rendered below the Status Bar, which changes it's color to grey, and in the UIExplorer example the backdrop is just formatted to look the same color. In some scenarios users may want to preserve the color of their status bar and make it look as though the modal is appearing on top. This PR allows for that.

This GIF shows current behavior and new behavior with the translucentStatusBar prop set to true.

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

I've updated the UIExplorer app to demonstrate and the docs as shown below

![image](https://cloud.githubusercontent.com/assets/4265163/14742854/500e1292-086c-11e6-9275-71808b0cbed7.png)

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

Differential Revision: D3264497

Pulled By: dmmiller

fb-gh-sync-id: 61346d99414d331d3420f44a4c5f6341b0973be6
fbshipit-source-id: 61346d99414d331d3420f44a4c5f6341b0973be6
2016-05-09 07:08:22 -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
glevi@fb.com 91d4a093ea Fix or suppress errors in react-native
Reviewed By: jeffmo

Differential Revision: D3209973

fb-gh-sync-id: bdc9b4afc0b187b1b16fa6bfb1c34adb4089ab81
fbshipit-source-id: bdc9b4afc0b187b1b16fa6bfb1c34adb4089ab81
2016-04-21 19:47:24 -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
Dave Miller eb21b25e2d Fix Popover.android to bubble events correctly
Reviewed By: andreicoman11, fkgozali

Differential Revision: D3197104

fb-gh-sync-id: 882f85175f87200b7aef1ca4204d6dfb6c4c4c69
fbshipit-source-id: 882f85175f87200b7aef1ca4204d6dfb6c4c4c69
2016-04-20 00:59:27 -07:00
Satyajit Sahoo ce81f8b35a Make 'onRequestClose' a required prop for Modal on Android. Fixes #6612
Summary:The `onRequestClose` prop can be used to handle dismissing the modal by back button. It's pretty easy to miss the `onRequestClose` prop on Android. So making it a required prop makes sure that it generates a warning when not supplied.

Context #6612
Closes https://github.com/facebook/react-native/pull/6667

Differential Revision: D3102054

Pulled By: javache

fb-gh-sync-id: 878240606285d231b5592a438918e441765bfe5f
fbshipit-source-id: 878240606285d231b5592a438918e441765bfe5f
2016-03-26 10:24:24 -07:00
Michelle Hwang ac2571d5ec Revert changes to Modal.js styling
Differential Revision: D3074138

fb-gh-sync-id: 85bdf536154319e8361e55aadcaf81ab3c214d65
shipit-source-id: 85bdf536154319e8361e55aadcaf81ab3c214d65
2016-03-19 14:21:22 -07:00
Dave Miller db7a154360 Open source Modal
Summary: This open sources an internal Modal View

Reviewed By: mkonicek

Differential Revision: D3065229

fb-gh-sync-id: 763996aef375883d94f70e617bfc7835a9cecb6f
shipit-source-id: 763996aef375883d94f70e617bfc7835a9cecb6f
2016-03-18 04:21:48 -07:00
Dave Miller 998d68d36d Add Android support for Modal
Summary:This adds support for Modal.js on Android.

I added the ModalExample to UIExplorer to demonstrate the usage.

Reviewed By: andreicoman11

Differential Revision: D3053732

fb-gh-sync-id: 292173bdd5cb518e87cbb1d622af436704bb6329
shipit-source-id: 292173bdd5cb518e87cbb1d622af436704bb6329
2016-03-17 08:53:26 -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
Atticus White ca9f0adee2 Improve Modal docs describing iOS only support
Summary:
Adds a note that the `Modal` component is only available in iOS.

I hit a bit of a pickle this weekend after realizing a handful of components I built will have to be rewritten. Unfortunately there's no notes in the documentation that the support is limited. Hopefully this can contribute towards avoiding those situations
Closes https://github.com/facebook/react-native/pull/4592

Reviewed By: svcscm

Differential Revision: D2727634

Pulled By: androidtrunkagent

fb-gh-sync-id: 2d0efcca8e17d16cf63d592e235261cea63e59ea
2015-12-05 18:48:28 -08:00
Pieter De Baets 6ab2719bff Make <Modal> visible by default
Summary: Make <Modal> visible by default and fix the scenario where we present a modal immediately when adding it to the view hierarchy.

Closes #3724
Closes #2952

public

Reviewed By: nicklockwood

Differential Revision: D2595938

fb-gh-sync-id: 1571790d36fe486f1fbbed9f2d66f1e6add73d91
2015-10-30 17:09:27 -07:00
Stephen Keep 852eba2a91 Documentation Update
Summary: The first change is to remove the word 'Hybrid' to a lot of javascript developers the word Hybrid is normally referred to as a webview app (such as Cordova) and this may cause confusion.

The second change is to refer to the property within Navigator that allows a scene to be presented from the bottom of the screen (like a modal).
Closes https://github.com/facebook/react-native/pull/3173

Reviewed By: svcscm

Differential Revision: D2561886

Pulled By: javache

fb-gh-sync-id: e37e5d06869ffadc152abaf304f77c93b81f71a3
2015-10-21 07:02:25 -07:00
James Ide 92109b8a0c Explanation of Modal's purpose in hybrid apps
Summary: Explained that Modal is for hybrid apps and suggest using a top-level Navigator in pure RN apps.
Closes https://github.com/facebook/react-native/pull/2663

Reviewed By: @​svcscm

Differential Revision: D2483626

Pulled By: @sahrens
2015-09-27 23:48:22 -07:00
Aaron Chiu 3c4adeb2e7 [ReactNative][SyncDiff] Hook in the Dialog.onDismiss to JS 2015-09-04 04:09:25 -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