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 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).
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.
...
| Info |
|---|
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 chose to use create an app (widget) with view type as Template.
Instructions
...
Steps to Create a Template and Template View App
In Canvas Studio, click Create > Template and create a empty template as follows.:
...
| Info |
|---|
Pay attention to the Template Config section field in the screen shot, where we just added dummy an empty <div> </div> tags.This is done as we wanted a react-native component to be used necessary to use a React Native component and not the template provided here. The Template ID used here is Loan_Summarysummary. |
2. Using the App Designer in Canvas Studio, create a new app (widget) of Template type as follows.:
...
3. Click the search icon against in the Template ID field and select the LOAN_SUMMARY template we created in step Step 1.:
...
4. Save the app and add it to a workspace using Workspace Designer in Canvas Studio.
5. In the react-native React Native project, create a new react-native 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 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:
| Code Block | ||
|---|---|---|
| ||
/*/ import all template files */ import "./Loan_Summary"; |
67. Now build Build the app and you should see the carousel of loan summariesmobile app.
8. Check the Loan Summary carousel in the mobile app.