ListView

ListView component is a base component used to render Lists of items. This component is also used by GridView to create Grid-like menu structures.

ListView example

API

Props

  • autoHideHeader: bool
    • Prop defining if ListView header should automatically hide
  • data: array
    • Prop containing items that will be rendered by the ListView component
  • loading: bool
    • Prop that defines whether the ListView should render loading spinner (to indicate it’s still loading data) or actual items (when the data is successfully loaded)
  • onLoadMore(): function
    • Called when the ListView is scrolled all the way to the bottom of the first page.
    • In this function you should update data array (state) with additional items
  • onRefresh(): function
    • Called when the ListView is pulled down, triggering the refresh action.
    • In this function you should update data array (state) with new items
    • If this function is declared, the Component will be considered refreshable
  • renderRow(item: Object): function
    • Function that renders each item (row) from data
  • renderFooter(): function
    • Function that renders the Footer content
  • renderHeader(): function
    • Function that renders the Header content
  • renderSectionHeader(): function
    • Function that renders the Section Header content
  • getSectionId(): function
    • Function that returns the section Id, This Id is used to group the items into a section

Style

  • list
    • These Props are passed to Style Prop of underlying React-Native ListView component
  • listContent
    • These Props are passed to contentContainerStyle Prop of underlying React-Native ListView component
  • loadMoreSpinner
    • These Props are passed to Style Prop of the Spinner component that appears during initial content loading
  • refreshControl
    • These Props are passed to Style Prop of the RefreshControl component.
    • You can also define refreshControl.tintColor prop in this Style, which is passed to the tintColor prop of the RefreshControl component.

Examples

ListView example

JSX declaration

constructor(props) {
  super(props);
  this.renderRow = this.renderRow.bind(this);
  this.state = {
    restaurants: [
      {
        "name": "Gaspar Brasserie",
        "address": "185 Sutter St, San Francisco, CA 94109",
        "image": { "url": "https://shoutem.github.io/static/getting-started/restaurant-1.jpg" },
      },
      {
        "name": "Chalk Point Kitchen",
        "address": "527 Broome St, New York, NY 10013",
        "image": { "url": "https://shoutem.github.io/static/getting-started/restaurant-2.jpg" },
      },
      {
        "name": "Kyoto Amber Upper East",
        "address": "225 Mulberry St, New York, NY 10012",
        "image": { "url": "https://shoutem.github.io/static/getting-started/restaurant-3.jpg" },
      },
      {
        "name": "Sushi Academy",
        "address": "1900 Warner Ave. Unit A Santa Ana, CA",
        "image": { "url": "https://shoutem.github.io/static/getting-started/restaurant-4.jpg" },
      },
      {
        "name": "Sushibo",
        "address": "35 Sipes Key, New York, NY 10012",
        "image": { "url": "https://shoutem.github.io/static/getting-started/restaurant-5.jpg" },
      },
      {
        "name": "Mastergrill",
        "address": "550 Upton Rue, San Francisco, CA 94109",
        "image": { "url": "https://shoutem.github.io/static/getting-started/restaurant-6.jpg" },
      }
    ],
  }
}

renderRow(restaurant) {
  return (
    <View>
      <ImageBackground
        styleName="large-banner"
        source={{ uri: restaurant.image.url }}
      >
        <Tile>
          <Title styleName="md-gutter-bottom">{restaurant.name}</Title>
          <Subtitle styleName="sm-gutter-horizontal">{restaurant.address}</Subtitle>
        </Tile>
      </ImageBackground>
      <Divider styleName="line" />
    </View>
  );
}

render() {
  const restaurants = this.state.restaurants;

  return (
    <Screen>
      <NavigationBar
        title="Restaurants"
        styleName="inline"
      />
      <ListView
        data={restaurants}
        renderRow={this.renderRow}
      />
    </Screen>
  );
}