Module FlatList-BsReactNative

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);
let make: data:array('item) => renderItem:renderItem('item) => keyExtractor:('item => int => string) => ?⁠itemSeparatorComponent:separatorComponent('item) => ?⁠bounces:bool => ?⁠listEmptyComponent:ReasonReact.reactElement => ?⁠listFooterComponent:ReasonReact.reactElement => ?⁠listFooterComponentStyle:BsReactNative.Style.t => ?⁠listHeaderComponent:ReasonReact.reactElement => ?⁠listHeaderComponentStyle:BsReactNative.Style.t => ?⁠columnWrapperStyle:BsReactNative.Style.t => ?⁠extraData:'any => ?⁠getItemLayout:(option(array('item)) => int => Js.t({. length: int, offset: int, index: int, })) => ?⁠horizontal:bool => ?⁠initialNumToRender:int => ?⁠initialScrollIndex:int => ?⁠inverted:bool => ?⁠numColumns:'int => ?⁠onEndReached:(Js.t({. distanceFromEnd: float, }) => unit) => ?⁠onEndReachedThreshold:float => ?⁠onRefresh:(unit => unit) => ?⁠onViewableItemsChanged:Js.t({. viewableItems: array(Js.t({. item: 'item, key: string, index: Js.undefined(int), isViewable: bool, section: Js.t({. }), })), changed: array(Js.t({. item: 'item, key: string, index: Js.undefined(int), isViewable: bool, section: Js.t({. }), })), }) => ?⁠overScrollMode:BsReactNative.ScrollViewProps.overScrollMode => ?⁠pagingEnabled:bool => ?⁠refreshControl:ReasonReact.reactElement => ?⁠refreshing:bool => ?⁠removeClippedSubviews:bool => ?⁠scrollEnabled:bool => ?⁠stickyHeaderIndices:list(int) => ?⁠showsHorizontalScrollIndicator:bool => ?⁠showsVerticalScrollIndicator:bool => ?⁠windowSize:int => ?⁠maxToRenderPerBatch:int => ?⁠viewabilityConfig:Js.t({. }) => ?⁠scrollEventThrottle:int => ?⁠onScroll:(BsReactNative.RNEvent.NativeScrollEvent.t => unit) => ?⁠onScrollBeginDrag:(BsReactNative.RNEvent.NativeScrollEvent.t => unit) => ?⁠onScrollEndDrag:(BsReactNative.RNEvent.NativeScrollEvent.t => unit) => ?⁠onMomentumScrollBegin:(BsReactNative.RNEvent.NativeScrollEvent.t => unit) => ?⁠onMomentumScrollEnd:(BsReactNative.RNEvent.NativeScrollEvent.t => unit) => ?⁠style:BsReactNative.Style.t => ?⁠contentInsetAdjustmentBehavior:BsReactNative.ScrollViewProps.contentInsetAdjustmentBehavior => array(ReasonReact.reactElement) => ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps, unit);