Merge pull request #43 from revdapp/master

support manually overriding the overlay styles

Author: httnn

README.md

@@ -16,7 +16,6 @@ import Modal from 'react-native-simple-modal';
 <Modal
   open={false}
   offset={0}
-  overlayBackground="rgba(0, 0, 0, 0.75)"
   animationDuration={200}
   animationTension={40}
   modalDidOpen={() => undefined}
@@ -25,6 +24,10 @@ import Modal from 'react-native-simple-modal';
   containerStyle={{
     justifyContent: 'center'
   }}
+  overlayStyle={{
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    flex: 1
+  }}
   modalStyle={{
     borderRadius: 2,
     margin: 20,

index.js

@@ -27,7 +27,6 @@ class Modal extends Component {
   static defaultProps = {
     open: false,
     offset: 0,
-    overlayBackground: 'rgba(0, 0, 0, 0.75)',
     animationDuration: 200,
     animationTension: 40,
     modalDidOpen: () => undefined,
@@ -149,7 +148,11 @@ class Modal extends Component {
           disabled={!this.props.closeOnTouchOutside}
           onPress={this.close.bind(this)}
           activeOpacity={0.75}>
-          <Animated.View style={{flex: 1, opacity, backgroundColor: this.props.overlayBackground}} />
+          <Animated.View style={[
+            styles.defaultOverlayStyle,
+            {opacity},
+            this.props.overlayStyle
+          ]} />
         </TouchableOpacity>
         <Animated.View
           style={[
@@ -199,6 +202,10 @@ const styles = StyleSheet.create({
     padding: 10,
     backgroundColor: '#F5F5F5'
   },
+  defaultOverlayStyle: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.75)'
+  },
   hidden: {
     top: -10000,
     left: 0,