# react-native-lightbox

## Installation

```
yarn add react-native-imagebox

or  npm install react-native-imagebox
```

## Usage

Save the image to the local ios rely on CameraRoll android at the same time rely on CameraRoll and react - native - fs

```js
import ImageBox from "react-native-imagebox";

    ​//数组中图片的个数决定弹出轮播图的的图片个数
    
    let images = [
      "http://otn4d80hz.bkt.clouddn.com/98210784.jpg",
      "http://otn4d80hz.bkt.clouddn.com/WechatIMG11.jpeg"
    ]

    // 用于 item 中图片的显示
      <View style={styles.moreImage}>
            <ImageBox
                imageStyle = {{height:200,width:200}}
                underlayColor = "#fff"
                showIndex = {0}      
                images = {images}
                imagesource = {images[0]}>
            </ImageBox>
      </View>
);

moreImage:{
    width:myUtil.size.width,
    flexDirection: 'row',
    flexWrap:'wrap'
},

moreImageView:{
    height:myUtil.size.width/3,
    width:myUtil.size.width/3
}

```

## Properties

| Prop | Type | Description |
|---|---|---|
|**`activeProps`**|`object`|Optional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.|
|**`renderHeader(close)`**|`function`|Custom header instead of default with X button|
|**`renderContent`**|`function`|Custom lightbox content instead of default child content|
|**`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 }`.|

## GifImage

![Image](http://otn4d80hz.bkt.clouddn.com/imagebox.gif)