How to use custom React Native Components as Row Template

For rich UI that require elements other than the basic HTML elements supported in Canvas native app, Developers must use React Native components. Canvas Technology platform provides hooks to attach React Native components as Row Templates.

Let’s say that you need to create grids with rows that look as shown in the following screen shot:

For the given scenario, the Developer creates a React Native component and applies it as a Row Template to the widget in Canvas Studio.

Steps to Create a Template and Apply it as Row Template to a Widget

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

Pay attention to the Template Config field in the above 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 EMPLOYEE_TEMPLATE.

2. Use the App Designer in Canvas Studio to create an app. In this example, we are creating a grid app (widget) as follows:

Pay attention to use the same template you created in Step 1.

3. Save the app and add it to a workspace using the Workspace Designer.

4. In the React Native project, create a new React Native component EmployeeComponent.js under <path-to-your-project>/src/impl/component:

import React, { Component } from "react";
import { Text, View, Image, TouchableOpacity } from "react-native";
import Styles from "../../styles/structure.scss";
import { Chip, Button } from "react-native-paper";

export default class EmployeeComponent extends Component {
  constructor(props) {
    super(props);
    this.record = this.props.records.record; // Each record is passed in the props
  }

  render() {
    return (
      <View style={[Styles["employee_info_container"]]}>
        <View style={[Styles["employee_name_container"]]}>
          <Text style={[Styles["employee_name_text"]]}>
            {this.record.FIRSTNAME.VALUE}{" "}
          </Text>
          <Text style={[Styles["employee_name_text"]]}>
            {this.record.LASTNAME.VALUE}{" "}
          </Text>
        </View>
        <View style={[Styles["employee_title_container"]]}>
          <Button icon="phone"></Button>
          <Chip
            style={[Styles["employee_title_chip"]]}
            type="outlined"
          >
            {this.record.TITLE.VALUE}
          </Chip>
          <Button icon="email"></Button>
        </View>
      </View>
    );
  }
}

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

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

5. Add the styles in file implStyle.scss under <path-to-your-project>/src/impl/styles directory:

.employee_info_container{
  border-width: 1px;
  border-color: grey;
  margin-top: 5;
  margin-bottom: 5;
  margin-left: 2;
  margin-right: 2;
  height: 60;
}

.employee_title_chip{
  height: 30;
  max-width: 60%; 
}   

.employee_name_container{
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

.employee_title_container{
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

.employee_title_chip{
  border-color: purple;
  background-color: snow;
} 

.employee_info_container{
  align-items: center;
}     

.employee_name_text{
  font-size: 16;
  color: $theme-color;
}

There is an issue in the react-native-sass-transformer package that Canvas uses to convert SASS into React Native compatible styles. Hence, ensure to make all changes (even a simple space) in the following file to get the modified styles to work:

structure.scss under <path-to-your-project>/src/styles

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

// import all template files
import("./EmployeeComponent");

7. Build the mobile app.

8. Open the Native app and navigate to the workspace to view the Row Template applied on the grid widget.