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.
'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}>
