How to use custom React Native Components as Template View

For creating fancy jazzy templates it’s advisable to use react native components. Building a React native component requires developer to know react native.

Refer React Native Documentation for learning react native.

Here in Canvas we provide hooks to attach react native components as templates for Template View App.

Say the business wants you to create a carousel of Loan Summaries as follows.

In this case, you can try finding a react native npm library and use it or build it on your own.

We chose swiper react-native-swiper

In this example we chose to use an app with view type as Template.

Pay attention to Template Config section where we just added dummy <div> </div>. This is done as we wanted a react-native component to be used and not the template provided here. The Template ID used here is Loan_Summary.

Instructions

Open studio and create a template as follows.

2. Using App Designer create a new app as follows.

3. Click the search icon against Template ID field and select the LOAN_SUMMARY template we created in step 1.

4. Save the app and add it to a workspace.

5. In the react-native project create a new react-native component Loan_Summary.js under <path-to-your-project>/src/impl/component

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;
        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
);

Pay attention to lines 66 till 72. This is very important to link the component with the template ID.

6. Import the Loan_Summary component added in the previous step in ImplImports.js under <path-to-your-project>/src/impl/component/ImplImports.js

/*
import all template files
 */
import "./Loan_Summary";

6. Now build the app and you should see the carousel of loan summaries.