Page Comparison

import React, { Component } from 'react'   
import { Text, View, Image, TouchableOpacity } from 'react-native'
import Swiper from 'react-native-swiper'
import { GlobalLiterals } from "../../GlobalEnums/Canvas.enum";
import Styles from "../../styles/structure.scss"

export default class Loan_Summary extends Component {

    constructor(props) {
        super(props);
        this.scope = this.props.scope;
        this.listConfig = this.props.listConfig; // All records are passed to the component via this.props.listConfig.ALL_RECORDS
        this.state = {
          recordList: this.listConfig.ALL_RECORDS,
        };
    }


    _renderSwipeableComponent(){
        let swipeableComps = [];
        this.state.recordList.map(comp => { 
            let imgPath = GlobalLiterals.APP_PATH + "/" + "images/loan_summary/" + comp.PROD_IMG; 
            swipeableComps.push(
                <View style={Styles.loan_summary_template_wrapper}>
                    <Image
                        style={Styles.loan_summary_template_img}
                        source={{uri: imgPath}}
                    />
                    <View style = {Styles.loan_summary_template_title_wrapper}>
                        <Text style = {Styles.loan_summary_template_title_txt}>{comp.LOAN_TYPE} </Text>
                        <Text style = {Styles.loan_summary_template_title_txt}>{comp.LOAN_NO}</Text>
                    </View>
                    
                    <View style = {Styles.loan_summary_template_desc_wrapper}>
                        <View >
                            <Text style = {Styles.loan_summary_template_desc_title}>Payment Due Date </Text>
                            <Text style = {Styles.loan_summary_template_desc_value}>{comp.PAYMENT_DUE_DT}</Text>
                        </View>
                        <View >
                            <Text style = {Styles.loan_summary_template_desc_title}>Next Payment </Text>
                            <Text style = {Styles.loan_summary_template_desc_value}>{comp.NEXT_PAYMENT}</Text>
                        </View>
                    </View>
                    <TouchableOpacity style = {Styles.loan_summary_template_btn}>
                        <Text style = {Styles.loan_summary_template_btn_title}>
                            Pay Now
                        </Text>
                    </TouchableOpacity>
                </View>
            )
        })
        return swipeableComps;
    }



    render() {
        return (
          <Swiper style={Styles.loan_summary_template_swipper_wrapper} dotStyle = {Styles.loan_summary_template_swipper_dot} activeDotStyle = {Styles.loan_summary_template_swipper_activeDotStyle}>
            {this._renderSwipeableComponent()}
          </Swiper>
        )
      }
    }

CLCR.registerCmp(
    {
      COMP_TYPE: "Template", // This is always "Template"
      COMP_NAME: "Loan_summary" // This is the template ID provided in studio
    },
    Loan_Summary // This is the component Name
);