Module FlatList

module type FlatListComponent = { ... };
module CreateComponent: (Impl: BsReactNative.View.Impl) => FlatListComponent;
include FlatListComponent;
let scrollToEnd: ReasonReact.reactRef => animated:bool => unit;

Example of use

In order to render a FlatList https://facebook.github.io/react-native/docs/flatlist in React Native you need to provide three props:

  • data
  • renderItem
  • keyExtractor
default
type contact = {
  id: int,
  name: string,
  count: int,
};
type myData = array(contact);
let myData = [|
  {id: 1, name: "Davin Roth", count: 645},
  {id: 2, name: "Milton Walsh", count: 12},
|];

let myKeyExtractor = (item, _index) => string_of_int(item.id);

let renderMyItem =
  FlatList.renderItem((contact: FlatList.renderBag(contact)) =>
    <View> <Text> (ReasonReact.string(contact.item.name)) </Text> </View>
  );

let component = ReasonReact.statelessComponent("MyComponent");

let make = _children => {
  ...component,
  render: _self =>
    <FlatList
      data=myData
      keyExtractor=myKeyExtractor
      renderItem=renderMyItem
    />,
};

Props

data
data: array('item)
renderItem
renderItem: renderItem('item)
keyExtractor
keyExtractor: ('item, int) => string
itemSeparatorComponent
itemSeparatorComponent: separatorComponent('item)=?

separatorComponent reference

bounces
bounces: bool=?
listFooterComponent
listFooterComponent: ReasonReact.reactElement=?
listHeaderComponent
listHeaderComponent: ReasonReact.reactElement=?
listEmptyComponent
listEmptyComponent: ReasonReact.reactElement=?
columnWrapperStyle
columnWrapperStyle: Style.t=?
extraData
extraData: 'any=?
getItemLayout
getItemLayout: (option(array('item)), int) => {
  .
  "length": int,
  "offset": int,
  "index": int,
}=?
horizontal
horizontal: bool=?
initialNumToRender
initialNumToRender: int=?
initialScrollIndex
initialScrollIndex: int=?
inverted
inverted: bool=?
numColumns
numColumns: 'int=?
onEndReached
onEndReached: {. "distanceFromEnd": float} => unit=?
onEndReachedThreshold
onEndReachedThreshold: float=?
onRefresh
onRefresh: unit => unit=?
onViewableItemsChanged
onViewableItemsChanged: {
  .
  "viewableItems":
    array(
      {
        .
        "item": 'item,
        "key": string,
        "index": Js.undefined(int),
        "isViewable": bool,
        "section": Js.t({.}),
      },
    ),
  "changed":
    array(
      {
        .
        "item": 'item,
        "key": string,
        "index": Js.undefined(int),
        "isViewable": bool,
        "section": Js.t({.}),
      },
    ),
}=?
overScrollMode
overScrollMode: [
  | `auto
  | `always
  | `never
]=?
pagingEnabled
pagingEnabled: bool=?
refreshControl
refreshControl: ReasonReact.reactElement=?
refreshing
refreshing: bool=?
removeClippedSubviews
removeClippedSubviews: bool=?
scrollEnabled
scrollEnabled: bool=?
stickyHeaderIndices
stickyHeaderIndices: list(int)=?
showsHorizontalScrollIndicator
showsHorizontalScrollIndicator: bool=?
showsVerticalScrollIndicator
showsVerticalScrollIndicator: bool=?
windowSize
windowSize: int=?
maxToRenderPerBatch
maxToRenderPerBatch: int=?
viewabilityConfig
viewabilityConfig: Js.t({.})=?
onScroll
onScroll: RNEvent.NativeScrollEvent.t => unit=?

Reference RNEvent.NativeScrollEvent

onScrollBeginDrag
~onScrollBeginDrag: RNEvent.NativeScrollEvent.t => unit=?,

Reference RNEvent.NativeScrollEvent

onScrollEndDrag
~onScrollEndDrag: RNEvent.NativeScrollEvent.t => unit=?,

Reference RNEvent.NativeScrollEvent

onMomentumScrollBegin
~onMomentumScrollBegin: RNEvent.NativeScrollEvent.t => unit=?,

Reference RNEvent.NativeScrollEvent

onMomentumScrollEnd
~onMomentumScrollEnd: RNEvent.NativeScrollEvent.t => unit=?,

Reference RNEvent.NativeScrollEvent

style
style: Style.t=?
contentInsetAdjustmentBehavior
~contentInsetAdjustmentBehavior: [
  | `automatic
  | `scrollableAxes
  | `never
  | `always
]=?,

methods

scrollToEnd
let scrollToIndex: ReasonReact.reactRef => index:int => ?⁠animated:bool => ?⁠viewOffset:int => ?⁠viewPosition:int => unit => unit;
scrollToIndex
let scrollToItem: ReasonReact.reactRef => item:'item => ?⁠animated:bool => ?⁠viewPosition:int => unit => unit;
scrollToItem
let scrollToOffset: ReasonReact.reactRef => ?⁠offset:float => ?⁠animated:bool => unit => unit;
scrollToOffset
let recordInteraction: ReasonReact.reactRef => unit;

API reference

type renderBag('item) = {
item: 'item,
index: int,
};
type renderItem('item);
let renderItem: (renderBag('item) => ReasonReact.reactElement) => renderItem('item);
type separatorComponent('item);
type separatorProps('item) = {
highlighted: bool,
leadingItem: option('item),
};
let separatorComponent: (separatorProps('item) => ReasonReact.reactElement) => separatorComponent('item);