How to use custom React Native Components as Row Template

For wireframes that require any elements beyond supported HTML elements in canvas native, developers will have to use react-native components.

Here in Canvas we provide hooks to attach react native components as row templates.

Suppose say business want you to create grids with rows looking like below.

Developer decides to create a react-native component and use it as a row template.

Instructions

Launch CT Studio in chrome and create a new Template as follows

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 EMPLOYEE_TEMPLATE.

2. Then use app designer to create an App as follows.

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

3. Save the app and add it to the workspace of your interest.

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

Since there is an issue in the package react-native-sass-transformer we use to convert sass into reactNative compatible styles, please make any change in the following file to get the modified styles to work.

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

The change can be a simple space in the scss file.

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. Now build the app and navigate to the workspace for you to see the row template applied for the grid.