react-native#SectionList JavaScript Examples

render() {
    return (
      <View style={styles.container}>
        <SearchBar onChangeText={this.onSearchBarTextChange} onCancel={this.onCancel} />
        {!this.loading && (
          <SectionList
            sections={this.sections}
            renderSectionHeader={this._renderSectionHeader}
            renderItem={this._renderItem}
            keyboardDismissMode={"on-drag"}
            ItemSeparatorComponent={this._renderSeparator}
            keyExtractor={this._keyExtractor}
            stickySectionHeadersEnabled={true}
            ListEmptyComponent={this._renderEmptyComponent}
          />
        )}
        <ProgressHUD ref={ref => (this.hud = ref)} />
      </View>
    );
  }

render() {
    return (
      <View style={styles.main}>
        <SectionList
          sections={this.sectionsSlice}
          ListHeaderComponent={this._listHeaderComponent}
          renderSectionHeader={this._renderSectionHeader}
          renderItem={this._renderItem}
          ItemSeparatorComponent={this._itemSeparatorComponent}
          SectionSeparatorComponent={this._renderSectionFooter}
          keyExtractor={this._keyExtractor}
        />
        <ProgressHUD ref={ref => (this.hud = ref)} />
      </View>
    );
  }

render() {
    if (!(this.account instanceof HDAccount)) {
      return null;
    }
    return (
      <Animatable.View ref={this.handleViewRef} style={styles.main}>
        <Header
          title={i18n.tt(BIZ_SCOPE.wallet, "title-select-coin")}
          titleColor={theme.textColor.primary}
          rightButtons={SelectCoinScreen.navigatorButtons.rightButtons}
          navigator={this.props.navigator}
          style={styles.header}
        />
        <SectionList
          sections={this.sections}
          renderItem={this._renderItem}
          renderSectionHeader={this._renderSectionHeader}
          ItemSeparatorComponent={this._renderSeparator}
          keyExtractor={this._keyExtractor}
          stickySectionHeadersEnabled={true}
        />
      </Animatable.View>
    );
  }

render() {
    if (!this.account.hasCreated) {
      return this.renderDefaultPage();
    }
    return (
      <View style={styles.main}>
        <SectionList
          refreshControl={
            <RefreshControl
              refreshing={this.isRefreshing}
              onRefresh={this._onRefresh}
              tintColor={theme.iconColor}
              title={i18n.t("common-loading")}
              titleColor={theme.iconColor}
              colors={["#f00", "#0f0", "#00f"]}
              progressBackgroundColor="#ffffff"
            />
          }
          style={styles.list}
          sections={this.sections}
          ListHeaderComponent={this._renderHeader}
          ListFooterComponent={this._renderFooter}
          ItemSeparatorComponent={this._renderSeparator}
          renderSectionHeader={this._renderSectionHeader}
          stickySectionHeadersEnabled={false}
          onMomentumScrollEnd={this._onMomentumScrollEnd}
          showsVerticalScrollIndicator={false}
          {...this._panResponder.panHandlers}
        />
      </View>
    );
  }

render() {
    const {
      transactions,
      style,
      scrollProps = {},
      onLoadMore,
      refreshControl
    } = this.props;

    return (
      <SectionList
        style={[{ flex: 1 }, style]}
        {...scrollProps}
        ListHeaderComponent={
          // Support pull to refresh by making sure it's always
          // appended and composing the props
          <React.Fragment>{scrollProps.ListHeaderComponent}</React.Fragment>
        }
        renderItem={this.renderItem}
        renderSectionHeader={this.renderSection}
        sections={this.makeData(transactions)}
        keyExtractor={item => item.id}
        refreshControl={refreshControl}
        onEndReachedThreshold={0.5}
        onEndReached={onLoadMore}
      />
    );
  }

DictionaryPage = ({ dictionary }) => {
  const [modalVisible, setModalVisible] = useState(false);
  const [selectedItem, setSelectedItem] = useState({
    text: '',
    translation: '',
    definition: '',
  });

  const renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        onPress={() => {
          setSelectedItem(item);
          setModalVisible(true);
        }}
      >
        <Text style={styles.row}>{item.text}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.dictionaryPage}>
      <SectionList
        sections={dictionary}
        renderItem={renderItem}
        renderSectionHeader={({ section }) => <Text style={styles.header}>{section.title}</Text>}
        keyExtractor={({ text }) => text}
      />
      <Modal title={selectedItem.text} visible={modalVisible} onClose={() => setModalVisible(false)}>
        {selectedItem.translation && (
          <Text style={[styles.modalText, styles.italic]}>
            {I18n.t('dictionaryPage.translation')}
            {selectedItem.translation}
          </Text>
        )}
        <Text style={styles.modalText}>{selectedItem.definition}</Text>
      </Modal>
    </View>
  );
}

Data = ({
  dateRange,
  allRecordsSortedByDate,
  providers,
}) => {
  const { minimumDate, maximumDate } = dateRange;

  const demographics = [
    {
      title: 'Time span of available Records',
      data: [`${formatDate(minimumDate)} - ${formatDate(maximumDate)}`],
    },
    {
      title: 'Total number of Records',
      data: [allRecordsSortedByDate.length],
    },
    {
      title: 'Total number of Providers',
      data: [providers.length],
    },
  ];

  // eslint-disable-next-line react/prop-types
  const Item = ({ title }) => (
    <View style={styles.row}>
      <Text style={styles.data}>{title}</Text>
    </View>
  );

  return (
    <View style={styles.root}>
      <View style={styles.headingContainer}>
        <Text style={styles.headingText}>
          Data
        </Text>
      </View>
      <SectionList
        sections={demographics}
        keyExtractor={(item, index) => item + index}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.subHeading}>{title}</Text>
        )}
        renderItem={({ item }) => (
          <Item
            title={item}
          />
        )}
      />
    </View>
  );
}

export default function MyAppointments() {
  const appointments = useSelector(
    state => state.appointmentReducer.appointments,
  );

  const localData = [...appointments];
  // Sort data by datetime
  localData.sort((a, b) => {
    return moment(a.date).unix() - moment(b.date).unix();
  });

  // Reduce data for SectionList
  const groupedData = localData.reduce(
    (
      accumulator,
      currentValue,
      currentIndex,
      array,
      key = currentValue.date,
    ) => {
      const keyObjectPosition = accumulator.findIndex(item => item.key == key);
      if (keyObjectPosition >= 0) {
        accumulator[keyObjectPosition].data.push(currentValue);
        return accumulator;
      } else {
        return accumulator.concat({ data: [currentValue], key: key });
      }
    },
    [],
  );

  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        style={styles.list}
        sections={groupedData}
        renderItem={({ item }) => <Item item={item} />}
        renderSectionHeader={({ section: { key } }) => <Title>{key}</Title>}
        ListHeaderComponent={() => (
          <Headline style={styles.headline}>My Appointments</Headline>
        )}
        stickySectionHeadersEnabled={false}
        showsVerticalScrollIndicator={false}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

SectionListDemo = () => {
  const sectionListRef = useRef(null);
  const rowRefs = useRef([]);

  function onItemFocus(e, section, row, item) {
    if (!rowRefs.current) {
      return;
    }
    if (section >= 0 && section < rowRefs.current.length) {
      // Check refs
      const rowRef = rowRefs.current[section];
      if (!rowRef || !sectionListRef) {
        return;
      }
      // Get styles
      const rowsStyle = StyleSheet.flatten(styles.rows);
      const rowItemStyle = StyleSheet.flatten(styles.rowItem);
      const sectionHeader = StyleSheet.flatten(styles.sectionHeader);
      // Get rows width / height
      const rowsWidth = rowsStyle.width;
      const rowsHeight = rowsStyle.height;
      // Get item width / height
      const itemWidth = rowItemStyle.width + rowItemStyle.margin * 2;
      const itemHeight =
        rowItemStyle.height +
        rowItemStyle.margin * 2 +
        sectionHeader.fontSize +
        sectionHeader.marginTop;
      // Get horizontal offset for current item in current row
      const itemLeftOffset = itemWidth * item;
      // Get vertical offset for current row in rows
      const itemTopOffset = itemHeight * section;
      // Center item horizontally in row
      const rowsWidthHalf = rowsWidth / 2;
      if (itemLeftOffset >= rowsWidthHalf) {
        const x = itemLeftOffset - rowsWidthHalf + itemWidth / 2;
        rowRef.scrollTo({x: x, animated: true});
      } else {
        rowRef.scrollTo({x: 0, animated: true});
      }
      // Scroll vertically to current row
      const rowsHeightHalf = rowsHeight / 2;
      if (itemTopOffset >= rowsHeightHalf - itemHeight) {
        sectionListRef.current.scrollToLocation({
          sectionIndex: section,
          itemIndex: 0,
          animated: true,
        });
      } else {
        sectionListRef.current.scrollToLocation({
          sectionIndex: 0,
          itemIndex: 0,
          animated: true,
        });
      }
    }
  }

  function showItems(section, row) {
    const items = Array.from(Array(ITEMS).keys());
    return items.map((item) => {
      const key = 'sectionlist_item_' + section + '.' + row + '.' + item;
      return (
        <FocusableHighlight
          onPress={() => {}}
          onFocus={(e) => {
            onItemFocus(e, section, row, item);
          }}
          underlayColor={Style.buttonFocusedColor}
          style={styles.rowItem}
          nativeID={key}
          key={key}>
          <Text style={styles.text}>{section + '.' + item}</Text>
        </FocusableHighlight>
      );
    });
  }

  function showRow(sectionItem) {
    const item = sectionItem.item;
    const key = 'sectionlist_row_' + item.section + '.' + item.row;
    return (
      <ScrollView
        ref={(ref) => {
          rowRefs.current[item.section] = ref;
          if (Platform.OS === 'web') {
            let node = findNodeHandle(ref);
            if (node) {
              // Set ScrollView spatial navigation action as focus to avoid scroll on up
              node.style.setProperty('--spatial-navigation-action', 'focus');
            }
          }
        }}
        style={styles.row}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        nativeID={key}
        key={key}>
        {showItems(item.section, item.row)}
      </ScrollView>
    );
  }

  function renderSectionHeader(sectionHeader) {
    const section = sectionHeader.section;
    return <Text style={styles.sectionHeader}>{section.title}</Text>;
  }

  function getSections() {
    // Load data
    let sections = [];
    for (let i = 0; i < SECTIONS; i++) {
      let rows = [];
      for (let j = 0; j < SECTIONS_ROWS; j++) {
        rows.push({section: i, row: j});
      }
      sections.push({
        title: 'Section ' + i,
        data: rows,
      });
    }
    return sections;
  }

  // Render
  return (
    <View style={Style.styles.content}>
      <SectionList
        ref={sectionListRef}
        style={styles.rows}
        nativeID={'sectionlist'}
        sections={getSections()}
        renderItem={showRow}
        renderSectionHeader={renderSectionHeader}
        keyExtractor={(row) => row.row}
        showsVerticalScrollIndicator={false}
      />
    </View>
  );
}