RN upgrade changes to Overlay.ios.js

Overlay.ios.js

@@ -5,69 +5,69 @@
 
 'use strict';
 
-var React = require('react-native');
-var {
-  View,
-  PropTypes,
-  StyleSheet,
-  requireNativeComponent,
-} = React;
+var React = require('react');
+var {View, StyleSheet, requireNativeComponent} = require('react-native');
 
 type Props = {
-  isVisible: boolean;
+    isVisible: boolean
 }
 
 var Overlay = React.createClass({
-  propTypes: {
-    /**
-     * When this property is set to `true`, the Overlay will appear on
-     * `UIWindowLevelStatusBar`, otherwise it will appear below that.
-     */
-    aboveStatusBar: React.PropTypes.bool,
+    propTypes: {
+        /**
+         * When this property is set to `true`, the Overlay will appear on
+         * `UIWindowLevelStatusBar`, otherwise it will appear below that.
+         */
+        aboveStatusBar: React.PropTypes.bool,
 
-    /**
-     * Determines the visibility of the Overlay. When it is not visible,
-     * an empty View is rendered.
-     */
-    isVisible: React.PropTypes.bool,
-  },
+        /**
+         * Determines the visibility of the Overlay. When it is not visible,
+         * an empty View is rendered.
+         */
+        isVisible: React.PropTypes.bool,
+    },
 
-  getDefaultProps(): Props {
-    return {
-      aboveStatusBar: false,
-      isVisible: false,
-    }
-  },
+    getDefaultProps(): Props
+    {
+        return {
+            aboveStatusBar: false,
+            isVisible: false,
+        }
+    },
 
-  render() {
-    var {
-      isVisible,
-    } = this.props;
-
-    if (this.props.isVisible) {
-      return (
-        <RNOverlay isVisible={true} style={styles.container} pointerEvents="none" aboveStatusBar={this.props.aboveStatusBar}>
-          {React.Children.map(this.props.children, React.cloneElement)}
-        </RNOverlay>
-      );
-    } else {
-      return <View />;
-    }
-  },
+    render()
+    {
+        if (this.props.isVisible) {
+            return (
+                <RNOverlay
+                    isVisible={true}
+                    style={styles.container}
+                    pointerEvents="none"
+                    aboveStatusBar={this.props.aboveStatusBar}>
+                    {
+                        React.Children.map(this.props.children, React.cloneElement)
+                    }
+                </RNOverlay>
+            )
+                ;
+        } else {
+            return <View/>;
+        }
+    },
 });
 
 var RNOverlay = requireNativeComponent('RNOverlay', Overlay);
 
 var styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-    borderWidth: 0,
-    backgroundColor: 'transparent',
-  },
-})
+    container: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        borderWidth: 0,
+        backgroundColor: 'transparent',
+    },
+});
 
 module.exports = Overlay;

README.md

@@ -6,6 +6,8 @@ An `<Overlay />` component that brings content inside to the front of the view r
 
 Ideally, no. This should probably only be used as a last resort. You can usually accomplish what you need to by just absolute positioning an view at the bottom of your root component.
 
+*In fact, as of 0.29.0 zIndex is supported on iOS and Android, so you should probably never use this.*
+
 ### Add it to your project
 
 1. Run `npm install react-native-overlay --save`