How to layer text etc ? about react-native-image-gallery HOT 2 CLOSED

import React, { Component, PropTypes } from 'react';
import { View, Text } from 'react-native';
import Gallery from 'react-native-image-gallery';
import styles from 'app/src/styles/views/ImageGallery.style';

export default class ImageGallery extends Component {

    static propTypes () {
        return {
            images: PropTypes.PropTypes.arrayOf(
                PropTypes.shape({
                    url: PropTypes.string,
                    thumbnail: PropTypes.string,
                    imageId: PropTypes.string,
                    caption: PropTypes.string
                })
            ).isRequired,
            index: PropTypes.number
        };
    };

    constructor (props) {
        super(props);
        const { index, images } = props;

        this.onChangeImage = this.onChangeImage.bind(this);
        this.state = {
            status: 1,
            index: index || 0,
            imagesCount: images.length
        };
    }

    _getImagesUrls (images) {
        let urls = [];
        images.forEach((image) => {
            urls.push({
                source: { uri: image.url }
            });
        });
        return urls;
    }

    onChangeImage (index) {
        this.setState({ index });
    }

    get captions () {
        const { index } = this.state;
        const { images } = this.props;

        const captionField = images[index].caption ? (
            <Text style={styles.caption} numberOfLines={2}>{images[index].caption}</Text>
        ) : false;

        if (!captionField) {
            return false;
        }

        return (
            <View style={styles.captionContainer}>
                { captionField }
                <View style={styles.captionLine} />
            </View>
        );
    }

    get counter () {
        const { index, imagesCount } = this.state;

        return (
            <View style={styles.counterContainer}>
                <Text style={styles.counterCurrent}>{index + 1}</Text>
                <Text style={styles.counterTotal}>| {imagesCount}</Text>
            </View>
        );
    }

    get gallery () {
        const { images, index } = this.props;

        return (
            <Gallery
              style={styles.galleryContainer}
              initialPage={index || 0}
              onPageSelected={this.onChangeImage}
              images={this._getImagesUrls(images)} />
        );
    }

    render () {
        return (
            <View style={styles.container}>
                { this.gallery }
                { this.captions }
                { this.counter }
            </View>
        );
    }
}