Main.js

import {View, Text, Image, Dimensions, StyleSheet, ActivityIndicator} from 'react-native';
import React, {Component} from 'react';

import Orientation from 'react-native-orientation';

var ViewPager = require('react-native-viewpager');
const ds = new ViewPager.DataSource({pageHasChanged: (r1, r2) => r1 !== r2});

let deviceWidth = Dimensions.get('window').width;
let deviceHeight = Dimensions.get('window').height;
let envelopesArray = [];
let stampRotationArray = [];
let sealRotationArray = [];

let stampRotation = '2deg';
let sealRotation = '-2deg';

export default class Main extends Component {

    static navigationOptions = {
        header: false
    };

    constructor(props){
        super(props);
        this.state = {
           page: 1,
            dataSource: ds.cloneWithPages(envelopesArray),
            showProgress:true
        };

        this.renderEnvelope = this.renderEnvelope.bind(this)
    }



    componentWillMount() {
        Orientation.lockToLandscape();
        this.getCards();
    }

    async getCards() {

        try {
            let response = await fetch(('url to receive json'), {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
            });
            let res = JSON.parse(await response.text());
            console.log(JSON.stringify(res));
            if (response.status >= 200 && response.status < 300) {

                envelopesArray = res.cards;
                this.setState({
                    showProgress: false,
                    dataSource: this.state.dataSource.cloneWithPages(envelopesArray),
                    showProgress: false
                });
            }
        } catch (message) {
            console.log(message)
        }
    }

    renderEnvelope( data: Object,
                    pageID: number | string){
        let imageURL;
        if(data.data.photo < 0){
            imageURL = 'https://robohash.org/'+data.data.first_name;
        } else{
            imageURL = 'url to receive user\'s photo'+data.data.photo;
        }
        let envelopeNumber = data.resources.envelope;
        let envelopeURL;
        if (envelopeNumber<10){
            envelopeURL = 'url to receive envelope\'s image00'+envelopeNumber;
        } else if (envelopeNumber>9 && envelopeNumber< 100){
            envelopeURL = 'url to receive envelope\'s image0'+envelopeNumber;
        } else{
            envelopeURL = 'url to receive envelope\'s image'+envelopeNumber;
        }

        let stampNumber = data.resources.stamp;
        let stampURL;
        if (stampNumber<10){
            stampURL = 'url to receive stamp\'s image00'+stampNumber;
        } else if (stampNumber>9 && stampNumber< 100){
            stampURL = 'url to receive stamp\'s image0'+stampNumber;
        } else{
            stampURL = 'url to receive stamp\'s image'+stampNumber;
        }

        let sealNumber = data.resources.seal;
        let sealURL;
        if (sealNumber<10){
            sealURL = 'url to receive seal\'s image00'+sealNumber;
        } else if (stampNumber>9 && stampNumber< 100){
            sealURL = 'url to receive seal\'s image0'+sealNumber;
        } else{
            sealURL = 'url to receive seal\'s image'+sealNumber;
        }

        if (stampRotationArray.hasOwnProperty(data.data.id)){
            stampRotation = stampRotationArray[data.data.id];
        } else{
            stampRotation = (Math.floor(Math.random() * (10) - 5))+"deg";
            stampRotationArray[data.data.id] = stampRotation;
        }

        ;
        if (data.data.id in sealRotationArray){
            sealRotation = sealRotationArray[data.data.id];
        } else{
            sealRotation = (Math.floor(Math.random() * (10) - 5))+"deg";
            sealRotationArray[data.data.id] = sealRotation;
        }

        return (
            <View style={styles.viewPager}>
                <Image source={{uri: envelopeURL}} style={styles.envelopeImage}/>
                <View style={styles.topRow}>
                    <View style={styles.topLeftRow}>
                        <View style={{justifyContent:'flex-start', alignItems:'flex-start', flexDirection: 'row', }}>
                            <Image source={require('./../assets/prefix.png')} style={styles.prefix}/>
                            <Text style={{color: '#212121', fontSize: 16, marginLeft:2}}>
                                {data.data.first_name}
                            </Text>
                        </View>
                        <View style={{justifyContent:'flex-start', alignItems:'flex-start', flexDirection: 'row'}}>
                            <Image source={require('./../assets/prefix.png')} style={styles.prefix}/>
                            <Text style={{color: '#212121', fontSize: 14, marginLeft:2}}>
                                {data.data.address}
                            </Text>
                        </View>
                        <View style={{justifyContent:'flex-start', alignItems:'flex-start', flexDirection: 'row'}}>
                            <Image source={require('./../assets/prefix.png')} style={styles.prefix}/>
                            <Text style={{color: '#212121', fontSize: 14, marginLeft:2}}>
                                {data.data.city}
                            </Text>
                        </View>
                        <View style={{justifyContent:'flex-start', alignItems:'flex-start', flexDirection: 'row'}}>
                            <Image source={require('./../assets/prefix.png')} style={styles.prefix}/>
                            <Text style={{color: '#212121', fontSize: 14, marginLeft:2}}>
                                {data.data.country+', '+data.data.postal}
                            </Text>
                        </View>
                    </View>
                    <View style={styles.topRightRow}>
                        <Image source={{uri: imageURL}} style={styles.userPhoto}/>
                        <Image source={{uri: stampURL}} style={styles.stampImage}/>
                        <Image source={{uri: sealURL}} style={styles.sealImage}/>
                    </View>
                </View>
                <View style={{flex: 1,  justifyContent:'center', alignItems:'center', flexDirection: 'row'}}>
                    <View style={{flex: 1, width: deviceWidth/2}}/>
                    <View style={{flex: 1,width: deviceWidth/2,  justifyContent:'flex-start', alignItems:'flex-start', flexDirection: 'row', paddingBottom:36}}>
                        <Image source={require('./../assets/quote.png')} style={{height: deviceHeight/25,resizeMode:'contain'}}/>
                        <Text style={{color: '#212121', fontSize: 14, marginRight:32}}>
                            {data.data.description}
                        </Text>
                    </View>
                </View>
            </View>
        );
    }


    render() {
        return (
            <View style={styles.container}>
                {this.state.showProgress&&
                <View style = {{alignItems: 'center', justifyContent: 'center', flex:1, flexDirection: 'row'}}>
                    <ActivityIndicator size={55} style = {{alignItems: 'center', justifyContent: 'center', flex:1}}/>
                </View>}
                {! this.state.showProgress&&
                <ViewPager style={styles.container}
                           dataSource={this.state.dataSource}
                           renderPage={this.renderEnvelope}
                           renderPageIndicator={false}/>}
            </View>
        );
    }



}

const styles = StyleSheet.create({
    container: {
        flex:1,
        paddingVertical:8,
        paddingHorizontal: 2,
        backgroundColor:'#e4e4e4',
    },
    viewPager: {
        width: deviceWidth-4,
        height: deviceHeight-16,
        alignSelf: 'center'

    },
    topRow:{
        height: deviceHeight/1.9,
        justifyContent:'center',
        alignItems:'center',
        flexDirection: 'row'
    },
    envelopeImage: {
        width: deviceWidth,
        height: deviceHeight,
        resizeMode: 'contain',
        position:'absolute'
    },
    topLeftRow:{
        height: deviceHeight/1.9,
        flex: 1,
        justifyContent:'flex-start',
        alignItems:'flex-start',
        flexDirection: 'column',
        paddingLeft:24,
        paddingTop:36
    },
    prefix:{
        height: deviceHeight/25,
        resizeMode:'contain'
    },
    topRightRow:{
        height: deviceHeight/1.9,
        flex: 1,  justifyContent:'flex-start',
        alignItems:'center',
        flexDirection: 'row',
        paddingRight:24,
        paddingTop:36
    },
    userPhoto: {
        height: deviceHeight/3,
        width: deviceHeight/3,
        resizeMode:'contain'
    },
    stampImage:{height: deviceHeight/4,
        width: deviceHeight/4,
        resizeMode:'contain',
        transform:[{rotate: stampRotation}]
    },
    sealImage: {
        height: deviceHeight/4,
        width: deviceHeight/4,
        resizeMode:'contain',
        alignSelf:'center',
        right: 8,
        position: 'absolute',
        transform:[{rotate: sealRotation}]
    }
});