Skip to content

Commit 1676542

Browse files
ericnakagawaFacebook Github Bot 0
authored andcommitted
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: reactjs/react-docgen#89. When that's resolved the `replaceAtIndex` method parameter type that's documented for `cb` needs to be updated to make it optional. Closes #8375 Differential Revision: D3479536 Pulled By: caabernathy fbshipit-source-id: de2db3aa221e4adce0c0c5f3d94a1fad528a60da
1 parent 1ffecb4 commit 1676542

File tree

1 file changed

+77
-13
lines changed

1 file changed

+77
-13
lines changed

Libraries/Modal/Modal.js

Lines changed: 77 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,29 +23,93 @@ const requireNativeComponent = require('requireNativeComponent');
2323
const RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
2424

2525
/**
26-
* A Modal component covers the native view (e.g. UIViewController, Activity)
27-
* that contains the React Native root.
26+
* The Modal component is a simple way to present content above an enclosing view.
2827
*
29-
* Use Modal in hybrid apps that embed React Native; Modal allows the portion of
30-
* your app written in React Native to present content above the enclosing
31-
* native view hierarchy.
28+
* _Note: If you need more control over how to present modals over the rest of your app,
29+
* then consider using a top-level Navigator. Go [here](/react-native/docs/navigator-comparison.html) to compare navigation options._
3230
*
33-
* In apps written with React Native from the root view down, you should use
34-
* Navigator instead of Modal. With a top-level Navigator, you have more control
35-
* over how to present the modal scene over the rest of your app by using the
36-
* configureScene property.
31+
* ```javascript
32+
* import React, { Component } from 'react';
33+
* import { Modal, Text, TouchableHighlight, View } from 'react-native';
34+
*
35+
* class ModalExample extends Component {
36+
*
37+
* constructor(props) {
38+
* super(props);
39+
* this.state = {modalVisible: false};
40+
* }
41+
*
42+
* setModalVisible(visible) {
43+
* this.setState({modalVisible: visible});
44+
* }
45+
*
46+
* render() {
47+
* return (
48+
* <View style={{marginTop: 22}}>
49+
* <Modal
50+
* animationType={"slide"}
51+
* transparent={false}
52+
* visible={this.state.modalVisible}
53+
* onRequestClose={() => {alert("Modal has been closed.")}}
54+
* >
55+
* <View style={{marginTop: 22}}>
56+
* <View>
57+
* <Text>Hello World!</Text>
58+
*
59+
* <TouchableHighlight onPress={() => {
60+
* this.setModalVisible(!this.state.modalVisible)
61+
* }}>
62+
* <Text>Hide Modal</Text>
63+
* </TouchableHighlight>
64+
*
65+
* </View>
66+
* </View>
67+
* </Modal>
68+
*
69+
* <TouchableHighlight onPress={() => {
70+
* this.setModalVisible(true)
71+
* }}>
72+
* <Text>Show Modal</Text>
73+
* </TouchableHighlight>
74+
*
75+
* </View>
76+
* );
77+
* }
78+
* }
79+
* ```
3780
*/
3881
class Modal extends React.Component {
3982
static propTypes = {
40-
animated: deprecatedPropType(
41-
PropTypes.bool,
42-
'Use the `animationType` prop instead.'
43-
),
83+
/**
84+
* The `animationType` prop controls how the modal animates.
85+
*
86+
* - `slide` slides in from the bottom
87+
* - `fade` fades into view
88+
* - `none` appears without an animation
89+
*/
4490
animationType: PropTypes.oneOf(['none', 'slide', 'fade']),
91+
/**
92+
* The `transparent` prop determines whether your modal will fill the entire view. Setting this to `true` will render the modal over a transparent background.
93+
*/
4594
transparent: PropTypes.bool,
95+
/**
96+
* The `visible` prop determines whether your modal is visible.
97+
*/
4698
visible: PropTypes.bool,
99+
/**
100+
* The `onRequestClose` prop allows passing a function that will be called once the modal has been dismissed.
101+
*
102+
* _On the Android platform, this is a required function._
103+
*/
47104
onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func,
105+
/**
106+
* The `onShow` prop allows passing a function that will be called once the modal has been shown.
107+
*/
48108
onShow: PropTypes.func,
109+
animated: deprecatedPropType(
110+
PropTypes.bool,
111+
'Use the `animationType` prop instead.'
112+
),
49113
};
50114

51115
static defaultProps = {

0 commit comments

Comments
 (0)