For creating fancy jazzy templates it’s advisable to use react native components. Building a React native component requires developer to know react native.
| Info |
|---|
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.
Instructions
Open studio and create a template as follows.
| Info |
|---|
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. |
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
| Code Block |
|---|
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
);
|
| Note |
|---|
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
| Code Block |
|---|
/* import all template files */ import "./Loan_Summary"; |
6. Now build the app and you should see the carousel of loan summaries.