kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-03-29 22:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Modal Animation Types

Browse Source 
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
This commit is contained in:
Jesse Sessler
2016-04-28 15:59:11 -07:00
committed by Facebook Github Bot 1
parent b5f14ea8f1
commit 2bb1c263db
10 changed files with 88 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Examples/UIExplorer/ModalExample.js
View File

@@ -66,7 +66,7 @@ var Button = React.createClass({
var ModalExample = React.createClass({
getInitialState() {
return {
animated: true,
animationType: 'none',
modalVisible: false,
transparent: false,
};
@@ -76,8 +76,8 @@ var ModalExample = React.createClass({
this.setState({modalVisible: visible});
},
_toggleAnimated() {
this.setState({animated: !this.state.animated});
_setAnimationType(type) {
this.setState({animationType: type});
},
_toggleTransparent() {
@@ -91,18 +91,21 @@ var ModalExample = React.createClass({
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}>
@@ -111,10 +114,17 @@ var ModalExample = React.createClass({
</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}>