Allow access to the Select options list (ref and FlatList props such as getItemLayout)

[sergeushenecz]

🚀 Feature Proposal

Let Select pass a ref and selected FlatList props to the List it renders inside its popover, for example a listRef prop plus getItemLayout (or a generic listProps object).

Motivation

With a long list of options (e.g. time slots every 15 minutes) the selected option is usually far below the fold when the list opens. To scroll it into view the app needs scrollToIndex on the inner list, and scrollToIndex to an item that has not been rendered yet requires getItemLayout. The inner List is created inside Select and neither its ref nor its props are reachable, and since 6.0.0 unknown props on Select are forwarded to the trigger instead.

We currently patch select.component.tsx and the compiled lib/module and lib/commonjs builds to forward listRef and getItemLayout.

Example

const listRef = useRef(null);

<Select
  selectedIndex={selectedIndex}
  listRef={listRef}
  getItemLayout={(data, index) => ({ length: 41.5, offset: 41.5 * index, index })}
  onFocus={() => listRef.current?.scrollToIndex({ index: selectedIndex.row, animated: true })}
>
  {options.map((option) => <SelectItem key={option.id} title={option.title} />)}
</Select>