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

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" },
      }],
    }
  }

  renderRow(restaurant) {
    return (
      <View>
        <Image
          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>
        </Image>
        <Divider styleName="line" />
      </View>
    );
  }

  render() {
    return (
      <Screen>
        <ListView
          data={this.state.restaurants}
          renderRow={this.renderRow}
        />
      </Screen>
    );
  }