Carousel.js

import React, {PropTypes} from 'react';
import {
    StyleSheet,
    View,
    Text,
} from 'react-native';
import Swiper from 'react-native-swiper';
import PhotoView from 'react-native-photo-view';

const Carousel = ({items = [], index = 0, width, height}) => {
    return (
        <Swiper
            collapsable={false}
            style={styles.wrapper}
            height={height}
            width={width}
            index={index}
            showsButtons={items.length > 1}
            showsPagination={false}
            nextButton={<Text style={styles.swiperButtonText}>›</Text>}
            prevButton={<Text style={styles.swiperButtonText}>‹</Text>}>
            {
                items.map((item, i) =>
                    <View key={i} style={styles.slide}>
                        <PhotoView
                            source={{uri: item}}
                            resizeMode='contain'
                            minimumZoomScale={0.5}
                            maximumZoomScale={5}
                            style={[styles.photo, {width: width, height: height}]}/>
                    </View>
                )
            }
        </Swiper>
    );
};

Carousel.propTypes = {
    items: PropTypes.array,
    index: PropTypes.number,
    width: PropTypes.number,
    height: PropTypes.number,
};

export default Carousel;

const styles = StyleSheet.create({
    wrapper: {
        // flex: 1,
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    photo: {
        flex: 1
    },
    swiperButtonText: {
        fontSize: 50,
        color: '#fff',
        fontFamily: 'Arial'
    }
});

LightBox.js

import React, {PropTypes} from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableHighlight,
    Dimensions
} from 'react-native';
import {Actions} from "react-native-router-flux";

import Carousel from '../carousel/Carousel';

const {width, height} = Dimensions.get('window');

const LightBox = ({data}) => {
    const {imageList = [], index = 0} = data;
    return (
        <View style={styles.container}>
            <TouchableHighlight
                style={[styles.button, styles.close]}
                underlayColor="#aaa"
                onPress={Actions.pop}
            >
                <Text style={styles.closeText}>Fermer</Text>
            </TouchableHighlight>
            <Carousel index={index}
                      items={imageList}
                      width={width}
                      height={height}/>
        </View>
    );
};

LightBox.propTypes = {
    data: PropTypes.object.isRequired
};

export default LightBox;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#000',
        position: 'relative',
    },
    close: {
        position: 'absolute',
        right: 20,
        top: 20,
        zIndex: 1
    },
    closeText: {
        color: 'white',
    }
});