recyclerlistview-example.js

_renderChapter({ name }) {
    return (
      <View key={name} style={styles.chapter}>
        <Text small style={styles.chapterText}>
          {name}
        </Text>
        <View style={styles.chapterLine} />
      </View>
    );
  }

_rowRenderer = (type, entry) => {
    const { isWideEnough, showHighlightColors } = this.props;

    if (entry.type === 'chapter') {
      return this._renderChapter(entry);
    }

    return (
      <View key={entry.id} style={styles.recycleItem}>
        <Annotation
          data={entry}
          stacked={!isWideEnough}
          showColors={showHighlightColors}
          onJump={this._onJump}
          onDelete={this._onDelete}
        />
      </View>
    );
  };

render() {
    const {
      entries,
      focusOnNotes,
      onFocusOnNotesChange,
      showHighlightColors,
      onShowHighlightColorsChange,
      color,
      onColorChange,
    } = this.props;

    return (
      <View style={styles.root} onLayout={this._onLayout}>
        <View style={styles.header}>
          <ColorPicker
            color={color}
            backgroundColor={stylesObj.header.backgroundColor}
            onColorSelect={newColor => {
              onColorChange(color === newColor ? null : newColor);
            }}
          />
          <View style={styles.headerSwitches}>
            <Switch
              label="Show highlight colors"
              onValueChange={onShowHighlightColorsChange}
              value={showHighlightColors}
              style={{ marginRight: Spacing.Micro }}
            />
            <Switch
              label="Show only notes"
              onValueChange={onFocusOnNotesChange}
              value={focusOnNotes}
            />
          </View>
        </View>
        {entries.count() > 0 && (
          <RecyclerListView
            useWindowScroll
            forceNonDeterministicRendering
            layoutProvider={this._layoutProvider}
            dataProvider={this.state.dataProvider}
            rowRenderer={this._rowRenderer}
          />
        )}
        {entries.size === 0 && (
          <View style={styles.emptyContent}>
            {(!!color || focusOnNotes) && (
                <Text small style={styles.label}>
                  No notes / highlights match your filters.
                </Text>
              )}
            {!color &&
              !focusOnNotes && (
                <Text small style={styles.label}>
                  No notes / highlights created yet.
                </Text>
              )}
          </View>
        )}
      </View>
    );
  }