step10_compact_layout

Step 10: Adding Compact Layout to SObject Detail Page

Goal

Learn how to render Sobject Compact Layout

---

Video: Step10

---

Before getting started

If you are building your app from scratch: Step 9 needs to be completed.

OR

If you just want to practice this step: you can start editing Step 9 components in this repo and run

npm run step9

---

1. Modify app/BrokerDetail/index.js:

1. import CompactLayout from react.force.layout module
2. add <CompactLayout /> after <Header /> component

import React, {
  View
} from 'react-native';

import {Sobj} from 'react.force.datacontainer';

import {CompactLayout} from 'react.force.layout';

import Header from './Header';

import styles from './styles';

module.exports = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <Sobj type={this.props.route.sobj.attributes.type} id={this.props.route.sobj.Id}>
          <Header />
          <CompactLayout />
        </Sobj>
      </View>
    );
  },
});

---

Expected Result:

---

Next Step:

Let's add Compact Layout Touch event handlers:

Step 11: Compact Layout Events