Using Custom React Native Components as Template View

For creating rich UI templates, we suggest using React Native components. Canvas Technology platform provides hooks to attach React Native components as templates for Template View App (widget).

To build custom React Native components, the Developer must have programming skills in React Native. Refer React Native Documentation for learning React Native.

Let’s say that you need to create Loan Summary carousel for a bank as shown in the following two screen shots:

To create such a carousel, you can either use a React Native NPM library or build on your own.

For the purpose of documentation, we used the Swiper carousel from GitHub, refer react-native-swiper. In this example, we create an app (widget) with view type as Template.

Steps to Create a Template and Template View App

In Canvas Studio, click Create > Template and create a empty template as follows:

Pay attention to the Template Config field in the screen shot, where we just added an empty <div> </div> tags. This is necessary to use a React Native component and not the template provided here. The Template ID used here is Loan_summary.

2. Using the App Designer in Canvas Studio, create a new app (widget) of Template type as follows:

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

4. Save the app and add it to a workspace using Workspace Designer in Canvas Studio.

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

Pay attention to lines 66 till 72 in the above code snippet. 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";

7. Build the mobile app.

8. Check the Loan Summary carousel in the mobile app.