maintainVisibleContentPosition prop for Android react-native

#reactnative #android #opensource

In react-native, ScrollView (and FlatList) component have support for a prop maintainVisibleContentPosition, which is really useful for chat-like applications where you want to see new messages scroll into place. Also you might need it in other applications where you need bi-directional infinite scroll. Although this prop is only supported on iOS for ScrollView/FlatList.

But it's easy enough to get it working Android by a simple wrapper. We at Stream built this wrapper for our in-house react-native chat sdk, but we are making it public, in case it helps other devs from react-native community.

Installation

yarn add @stream-io/flat-list-mvcp

Usage

import { FlatList, ScrollView } from '@stream-io/flat-list-mvcp';

<FlatList
    maintainVisibleContentPosition={{
        autoscrollToTopThreshold: 10,
        minIndexForVisible: 1,
    }}
    ...
/>

<ScrollView
    maintainVisibleContentPosition={{
        autoscrollToTopThreshold: 10,
        minIndexForVisible: 1,
    }}
    ...
/>