This scary [%bs.raw...] hack works (line 68), but Reason type-errors stop the equivalent in Reason.

gistfile1.txt

open BsReactNative;

type item = {
  name: string,
  age: int
};

let data = [|
  {name: "Devin", age: 22},
  {name: "Jackson", age: 12},
  {name: "James", age: 14},
  {name: "Joel", age: 42},
  {name: "John", age: 30},
  {name: "Jillian", age: 51},
  {name: "Jimmy", age: 31},
  {name: "Julie", age: 23},
  {name: "Amy", age: 27},
  {name: "Andrew", age: 24}
|];

let sec = SectionList.section;

let sections =
  SectionList.(
    sections([|
      sec(~data=[|data[0], data[1], data[4]|], ~key="Section A", ()),
      sec(~data, ~key="Section B", ()),
      sec(~data=[|data[9], data[8], data[7], data[6]|], ~key="Section C", ())
    |])
  );

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

let flatSty =
  Style.(
    style([fontSize(Float(62.)), backgroundColor("skyblue"), margin(Pt(10.))])
  );

let hdrSty =
  Style.(style([borderBottomColor("black"), borderBottomWidth(5.)]));

let f = Style.textAlign;

let make = _children => {
  ...component,
  render: _self =>
    <ScrollView>
      <FlatList
        data
        keyExtractor=((x, _i) => x.name)
        renderItem=(
          FlatList.renderItem(x => <Text style=flatSty value=x.item.name />)
        )
      />
      <SectionList
        sections
        renderItem=(
          SectionList.renderItem(x => <Touch.Box name=x.item.name />)
        )
        keyExtractor=((x, _i) => x.name)
        renderSectionHeader=(
          (s: {. "section": SectionList.section(item)}) =>
            <View style=hdrSty>
              <Text
                style=Style.(style([fontSize(Float(40.))]))
                value={
                  let sec = (s##section);
                  let k : string = [%bs.raw{|sec.key|}];
                  Js.log({j|$(sec)|j});
                  k
                }
              />
            </View>
        )
      />
    </ScrollView>
};