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.
- NPM - https://www.npmjs.com/package/@stream-io/flat-list-mvcp
- Github - https://github.com/GetStream/flat-list-mvcp
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,
}}
...
/>
Cheers and happy coding :)
Top comments (0)