fade in, fade out backdrop

src/Backdrop.js

@@ -1,18 +1,49 @@
-import React from 'react';
-import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';
+import React, { Component } from 'react';
+import { View, StyleSheet, TouchableWithoutFeedback, Animated } from 'react-native';
+import { OPEN_ANIM_DURATION, CLOSE_ANIM_DURATION } from './constants';
 
-const Backdrop = props => (
-  <TouchableWithoutFeedback onPress={props.onPress}>
-    <View style={[styles.backdrop, props.style]} />
-  </TouchableWithoutFeedback>
-);
+class Backdrop extends Component {
+
+  constructor(...args) {
+    super(...args);
+    this.fadeAnim = new Animated.Value(0.001);
+  }
+
+  componentDidMount() {
+    Animated.timing(this.fadeAnim, {
+      duration: OPEN_ANIM_DURATION,
+      toValue: 1,
+    }).start();
+  }
+
+  close() {
+    return new Promise(resolve => {
+      Animated.timing(this.fadeAnim, {
+        duration: CLOSE_ANIM_DURATION,
+        toValue: 0,
+      }).start(resolve);
+    });
+  }
+
+  render() {
+    const { onPress, style } = this.props;
+    return (
+      <TouchableWithoutFeedback onPress={onPress}>
+        <Animated.View style={[styles.fullscreen, { opacity: this.fadeAnim }]}>
+          <View style={[styles.fullscreen, style]} />
+        </Animated.View>
+      </TouchableWithoutFeedback>
+    );
+  }
+
+}
 
 Backdrop.propTypes = {
   onPress: React.PropTypes.func.isRequired,
 };
 
 const styles = StyleSheet.create({
-  backdrop: {
+  fullscreen: {
     opacity: 0,
     position: 'absolute',
     top: 0,

src/MenuContext.js

@@ -50,9 +50,11 @@ export default class MenuContext extends Component {
 
   closeMenu() {
     debug('close menu');
-    const closePromise = (this.refs.menuOptions
+    const hideMenu = (this.refs.menuOptions
       && this.refs.menuOptions.close
       && this.refs.menuOptions.close()) || Promise.resolve();
+    const hideBackdrop = this.refs.backdrop && this.refs.backdrop.close();
+    const closePromise = Promise.all([hideMenu, hideBackdrop]);
     return closePromise.then(() => {
       this._menuRegistry.getAll().forEach(menu => {
         if (menu.instance._getOpened()) {
@@ -129,7 +131,7 @@ export default class MenuContext extends Component {
           { this.props.children }
         </View>
         {shouldRenderMenu &&
-          <Backdrop onPress={() => this._onBackdropPress()} style={customStyles.backdrop} />
+          <Backdrop onPress={() => this._onBackdropPress()} style={customStyles.backdrop} ref='backdrop' />
         }
         {shouldRenderMenu &&
           this._makeOptions(this.state.openedMenu)

src/constants.js

@@ -0,0 +1,3 @@
+// common durations of animation
+export const OPEN_ANIM_DURATION = 225;
+export const CLOSE_ANIM_DURATION = 195;

src/renderers/ContextMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
+import { OPEN_ANIM_DURATION, CLOSE_ANIM_DURATION } from '../constants';
 
 const axisPosition = (oDim, wDim, tPos, tDim) => {
   // if options are bigger than window dimension, then render at 0
@@ -48,7 +49,7 @@ export default class ContextMenu extends React.Component {
 
   componentDidMount() {
     Animated.timing(this.state.scaleAnim, {
-      duration: 225,
+      duration: OPEN_ANIM_DURATION,
       toValue: 1
     }).start();
   }
@@ -56,7 +57,7 @@ export default class ContextMenu extends React.Component {
   close() {
     return new Promise(resolve => {
       Animated.timing(this.state.scaleAnim, {
-        duration: 195,
+        duration: CLOSE_ANIM_DURATION,
         toValue: 0
       }).start(resolve);
     });

src/renderers/SlideInMenu.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Animated, StyleSheet } from 'react-native';
+import { OPEN_ANIM_DURATION, CLOSE_ANIM_DURATION } from '../constants';
 
 export const computePosition = ({ windowLayout, optionsLayout }) => {
   const { height: wHeight } = windowLayout;
@@ -20,7 +21,7 @@ export default class SlideInMenu extends React.Component {
 
   componentDidMount() {
     Animated.timing(this.state.slide, {
-      duration: 225,
+      duration: OPEN_ANIM_DURATION,
       toValue: 1
     }).start();
   }
@@ -28,7 +29,7 @@ export default class SlideInMenu extends React.Component {
   close() {
     return new Promise(resolve => {
       Animated.timing(this.state.slide, {
-        duration: 195,
+        duration: CLOSE_ANIM_DURATION,
         toValue: 0
       }).start(resolve);
     });