Merge pull request oblador#30 from xirc/overlay-background-color

Add backgroundColor property

Author: oblador

Lightbox.js

@@ -20,17 +20,18 @@ var Lightbox = React.createClass({
  mixins: [TimerMixin],
 
  propTypes: {
- activeProps: PropTypes.object,
- renderHeader: PropTypes.func,
- renderContent: PropTypes.func,
- underlayColor: PropTypes.string,
- onOpen: PropTypes.func,
- onClose: PropTypes.func,
- springConfig: PropTypes.shape({
- tension: PropTypes.number,
- friction: PropTypes.number,
+ activeProps: PropTypes.object,
+ renderHeader: PropTypes.func,
+ renderContent: PropTypes.func,
+ underlayColor: PropTypes.string,
+ backgroundColor: PropTypes.string,
+ onOpen: PropTypes.func,
+ onClose: PropTypes.func,
+ springConfig: PropTypes.shape({
+ tension: PropTypes.number,
+ friction: PropTypes.number,
  }),
- swipeToDismiss: PropTypes.bool,
+ swipeToDismiss:  PropTypes.bool,
  },
 
  getDefaultProps: function() {
@@ -73,6 +74,7 @@ var Lightbox = React.createClass({
  renderHeader: this.props.renderHeader,
  swipeToDismiss: this.props.swipeToDismiss,
  springConfig: this.props.springConfig,
+ backgroundColor: this.props.backgroundColor,
  children: this.getContent(),
  onClose: this.onClose,
  };

LightboxOverlay.js

@@ -35,11 +35,12 @@ var LightboxOverlay = React.createClass({
  tension: PropTypes.number,
  friction: PropTypes.number,
  }),
- isOpen: PropTypes.bool,
- renderHeader: PropTypes.func,
- onOpen: PropTypes.func,
- onClose: PropTypes.func,
- swipeToDismiss: PropTypes.bool,
+ backgroundColor: PropTypes.string,
+ isOpen: PropTypes.bool,
+ renderHeader: PropTypes.func,
+ onOpen: PropTypes.func,
+ onClose: PropTypes.func,
+ swipeToDismiss: PropTypes.bool,
  },
 
  getInitialState: function() {
@@ -59,6 +60,7 @@ var LightboxOverlay = React.createClass({
  getDefaultProps: function() {
  return {
  springConfig: { tension: 30, friction: 7 },
+ backgroundColor: 'black',
  };
  },
 
@@ -152,6 +154,7 @@ var LightboxOverlay = React.createClass({
  renderHeader,
  swipeToDismiss,
  origin,
+ backgroundColor,
  } = this.props;
 
  var {
@@ -186,7 +189,7 @@ var LightboxOverlay = React.createClass({
  height: openVal.interpolate({inputRange: [0, 1], outputRange: [origin.height, WINDOW_HEIGHT]}),
  }];
 
- var background = (<Animated.View style={[styles.background, lightboxOpacityStyle]}></Animated.View>);
+ var background = (<Animated.View style={[styles.background, { backgroundColor: backgroundColor }, lightboxOpacityStyle]}></Animated.View>);
  var header = (<Animated.View style={[styles.header, lightboxOpacityStyle]}>{(renderHeader ?
  renderHeader(this.close) :
  (
@@ -226,7 +229,6 @@ var styles = StyleSheet.create({
  left: 0,
  width: WINDOW_WIDTH,
  height: WINDOW_HEIGHT,
- backgroundColor: 'black',
  },
  open: {
  position: 'absolute',

README.md

@@ -68,6 +68,7 @@ var MyApp = React.createClass({
 |**`onClose`**|`function`|Triggered when lightbox is closed|
 |**`onOpen`**|`function`|Triggered when lightbox is opened|
 |**`underlayColor`**|`string`|Color of touchable background, defaults to `black`|
+|**`backgroundColor`**|`string`|Color of lightbox background, defaults to `black`|
 |**`swipeToDismiss`**|`bool`|Enables gestures to dismiss the fullscreen mode by swiping up or down, defaults to `true`.|
 |**`springConfig`**|`object`|[`Animated.spring`](https://facebook.github.io/react-native/docs/animations.html) configuration, defaults to `{ tension: 30, friction: 7 }`.|