Page Comparison

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.