# MasterCell

## How to use it

```javascript
import { masterCellBuilder } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell";

const options = {
  cellConfiguration: { [string]: any }, // declarative tree of nodes to render,
  components: { View, Text, Image, Button }, // optional map of components to use in the masterCell
  dataAdapter: (config, data) => { [string]: {} }, // optional function to produce the element map to render, by merging the cell configuration & the data
  containerStyle: { flex: 1 }, // optional container styles to provide. default to flex: 1
};

const MasterCell = masterCellBuilder(options);

/* Usage in a non-repetitive list */

// item is a feed entry
const HeroComponent = (item, state = selected | hasFocus | null) =>
  <View>
    { MasterCell({ item, state }) }
  </View>

// The MasterCell can be used as a component, but there might be a performance
// gain to use it as a function like that. But the below approach is working too
const HeroComponent = (item, state = selected | hasFocus | null) =>
  <View>
    <MasterCell item={item} state="selected" />
  </View>


/* Usage in a repetitive list */

class CustomList extends React.Component {
  _keyExtractor => item => item.id

  renderItem = ({ item }) => {
    return MasterCell({ item, state: /* ... */ })
  }

  render() {
    // this.props.dataSource is a feed
    const { entry } = this.props.dataSource;

    return <List
             keyExtractor={this._keyExtractor}
             data={entry}
             renderItem={this.renderItem}
           />
  }
}

```