Module `SectionList-BsReactNative`

type renderBag('item) = { item: 'item, index: int, section: section('item), separators: Js.t({. highlight: unit => unit, unhighlight: unit => unit, }), };

A performant interface for rendering sectioned lists, supporting the most handy features: You can read more on SectionList component usage in official docs: https://facebook.github.io/react-native/docs/sectionlist

Props

sections

The actual data to render, akin to the data prop in FlatList.

~sections: sections('item),

reference:

type renderBag('item) = {
  item: 'item,
  index: int,
  section: section('item),
  separators: {
    .
    "highlight": unit => unit,
    "unhighlight": unit => unit,
  },
}

and section('item) = { data: array('item), key: option(string), renderItem: option((renderBag('item) => ReasonReact.reactElement)), };

let section: data:array('item) => ?⁠key:string => ?⁠renderItem:(renderBag('item) => ReasonReact.reactElement) => unit => section('item);

type sections('item);

let sections: array(section('item)) => sections('item);

renderItem

~renderItem: renderItem('item),

type renderItem('item);

let renderItem: (renderBag('item) => ReasonReact.reactElement) => renderItem('item);

keyExtractor

~keyExtractor: ('item, int) => string,

itemSeparatorComponent

~itemSeparatorComponent: separatorComponent('item)=?,

reference:

type separatorProps('item) = { highlighted: bool, leadingItem: option('item), leadingSection: option(section('item)), section: section('item), trailingItem: option('item), trailingSection: option(section('item)), };
type separatorComponent('item);

let separatorComponent: (separatorProps('item) => ReasonReact.reactElement) => separatorComponent('item);

listEmptyComponent

~listEmptyComponent: unit => ReasonReact.reactElement=?,

listFooterComponent

~listFooterComponent: ReasonReact.reactElement=?,

listHeaderComponent

~listHeaderComponent: ReasonReact.reactElement=?,

sectionSeparatorComponent

~sectionSeparatorComponent: separatorComponent('item)=?,

inverted

~inverted: bool=?,

extraData

~extraData: 'extraData=?,

initialNumToRender

~initialNumToRender: int=?,

onEndReached

~onEndReached: {
  . "distanceFromEnd": float
} => unit=?,

onEndReachedThreshold

~onEndReachedThreshold: float=?,

onViewableItemsChanged

onViewableItemsChanged: {
  .
  "changed": array(viewToken('item)),
  "viewableItems": array(viewToken('item)),
}=?

reference:

type viewToken('item) = {
  .
  "index": Js.undefined(int),
  "isViewable": bool,
  "item": 'item,
  "key": string,
  "section": section('item),
};

type viewToken('item) = Js.t({. index: Js.undefined(int), isViewable: bool, item: 'item, key: string, section: section('item), });

type renderAccessory('item) = { section: section('item), };

onRefresh

onRefresh: unit => unit=?

refreshing

refreshing: bool=?

renderSectionHeaader

renderSectionHeader: renderAccessoryView('item)=?

reference:

type renderAccessory('item) = {
  section: section('item),
};

type renderAccessoryView('item);

let renderAccessoryView: (renderAccessory('item) => ReasonReact.reactElement) => renderAccessoryView('item);

renderSectionFooter

~renderSectionFooter: renderAccessoryView('item)=?,

stickySectionHeadersEnabled

~stickySectionHeadersEnabled: bool=?,

keyboardDismissMode

keyboardDismissMode: [
  | `none
  | `interactive
  | `onDrag
]=?

keyboardShouldPersistTaps

keyboardShouldPersistTaps: [
  | `always
  | `never
  | `handled
]=?

showsHorizontalScrollIndicator

~showsHorizontalScrollIndicator: bool=?,

showsVerticalScrollIndicator

~showsVerticalScrollIndicator: bool=?,

getItemLayout

~getItemLayout: (option(array('item)), int) => {
  .
  "length": int,
  "offset": int,
  "index": int,
}
  =?,

let make: sections:sections('item) => renderItem:renderItem('item) => keyExtractor:('item => int => string) => ?⁠itemSeparatorComponent:separatorComponent('item) => ?⁠listEmptyComponent:(unit => ReasonReact.reactElement) => ?⁠listFooterComponent:ReasonReact.reactElement => ?⁠listHeaderComponent:ReasonReact.reactElement => ?⁠sectionSeparatorComponent:separatorComponent('item) => ?⁠inverted:bool => ?⁠extraData:'extraData => ?⁠initialNumToRender:int => ?⁠onEndReached:(Js.t({. distanceFromEnd: float, }) => unit) => ?⁠onEndReachedThreshold:float => ?⁠onViewableItemsChanged:Js.t({. changed: array(viewToken('item)), viewableItems: array(viewToken('item)), }) => ?⁠onRefresh:(unit => unit) => ?⁠refreshing:bool => ?⁠renderSectionHeader:renderAccessoryView('item) => ?⁠renderSectionFooter:renderAccessoryView('item) => ?⁠stickySectionHeadersEnabled:bool => ?⁠keyboardDismissMode:[ `none | `interactive | `onDrag ] => ?⁠keyboardShouldPersistTaps:[ `always | `never | `handled ] => ?⁠showsHorizontalScrollIndicator:bool => ?⁠showsVerticalScrollIndicator:bool => ?⁠getItemLayout:(option(array('item)) => int => Js.t({. length: int, offset: int, index: int, })) => array(ReasonReact.reactElement) => ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps, unit);