From 1d5cfaf2a261726cd3b2f43fd98d28faf1445a9d Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Thu, 28 Apr 2016 23:47:28 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/modal.html | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/releases/next/docs/modal.html b/releases/next/docs/modal.html index 37661c9e415..68079df45f9 100644 --- a/releases/next/docs/modal.html +++ b/releases/next/docs/modal.html @@ -4,7 +4,7 @@ your app written in React Native to present content above the enclosing native view hierarchy.

In apps written with React Native from the root view down, you should use Navigator instead of Modal. With a top-level Navigator, you have more control over how to present the modal scene over the rest of your app by using the -configureScene property.

Props #

animated bool #

onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

onShow function #

transparent bool #

visible bool #

Examples #

Edit on GitHub
'use strict'; +configureScene property.

Props #

animated bool #

Deprecated

Use the animationType prop instead.

animationType enum('none', 'slide', 'fade') #

onRequestClose Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func #

onShow function #

transparent bool #

visible bool #

Examples #

Edit on GitHub
'use strict'; var React = require('react'); var ReactNative = require('react-native'); @@ -57,7 +57,7 @@ exports.description var ModalExample = React.createClass({ getInitialState() { return { - animated: true, + animationType: 'none', modalVisible: false, transparent: false, }; @@ -67,8 +67,8 @@ exports.description this.setState({modalVisible: visible}); }, - _toggleAnimated() { - this.setState({animated: !this.state.animated}); + _setAnimationType(type) { + this.setState({animationType: type}); }, _toggleTransparent() { @@ -82,18 +82,21 @@ exports.description var innerContainerTransparentStyle = this.state.transparent ? {backgroundColor: '#fff', padding: 20} : null; + var activeButtonStyle = { + backgroundColor: '#ddd' + }; return ( <View> <Modal - animated={this.state.animated} + animationType={this.state.animationType} transparent={this.state.transparent} visible={this.state.modalVisible} onRequestClose={() => {this._setModalVisible(false)}} > <View style={[styles.container, modalBackgroundStyle]}> <View style={[styles.innerContainer, innerContainerTransparentStyle]}> - <Text>This modal was presented {this.state.animated ? 'with' : 'without'} animation.</Text> + <Text>This modal was presented {this.state.animationType === 'none' ? 'without' : 'with'} animation.</Text> <Button onPress={this._setModalVisible.bind(this, false)} style={styles.modalButton}> @@ -102,10 +105,17 @@ exports.description /View> </View> </Modal> - <View style={styles.row}> - <Text style={styles.rowTitle}>Animated</Text> - <Switch value={this.state.animated} onValueChange={this._toggleAnimated} /> + <Text style={styles.rowTitle}>Animation Type</Text> + <Button onPress={this._setAnimationType.bind(this, 'none')} style={this.state.animationType === 'none' ? activeButtonStyle : {}}> + none + </Button> + <Button onPress={this._setAnimationType.bind(this, 'slide')} style={this.state.animationType === 'slide' ? activeButtonStyle : {}}> + slide + </Button> + <Button onPress={this._setAnimationType.bind(this, 'fade')} style={this.state.animationType === 'fade' ? activeButtonStyle : {}}> + fade + </Button> </View> <View style={styles.row}>