useAutoScroll

The useAutoScroll hook is responsible for managing auto scroll. For example, when a new message arrive, message list will be auto scrolled to the bottom and the new arrived message will be visible.

Example Usage:
const listRef = useRef<FlatList>(null);
const { onContentSizeChangeHandler } = useAutoScroll({ ref: listRef });

return (
  <FlatList
    ref={listRef}
    contentContainerStyle={{ flexGrow: 1 }}
    data={messages}
    renderItem={renderListItem}
    keyExtractor={listItemKeyExtractor}
    onContentSizeChange={onContentSizeChangeHandler}
  />
);

Hook Argument

ref

TypeDefault
Ref object of type Flatlist component Instance (Required)No Default

Hook Return Value

onContentSizeChangeHandler

Type
Callback function of type: (width: number, height: number) => void

What’s Next