maintainVisibleContentPosition prop support for Android react-native.


Built with ♥ at [Stream ]

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 currently its only supported on iOS. So here we have built a simple wrapper for FlatList and ScrollView to add support for this prop for android. On iOS, we simply return FlatList and ScrollView from react-native package.

We 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.

Before you proceed, please don't forget to also check other relevant packages, built at Stream:

- react-native-bidirectional-infinite-scroll
- stream-chat-react-native

> ⚠️ Horizontal list is currently not supported on this package.

Example

``sh


clone the repo

git clone https://github.com/GetStream/flat-list-mvcp.git
cd flat-list-mvcp/Example

Install npm and pod dependencies

yarn; npx pod-install;

run the app

npx react-native run-android
`

Installation

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

Usage

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

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

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

``

Expo support

This package doesn't support Expo managed workflow. There is a feature request open for expo - https://expo.canny.io/feature-requests/p/android-maintainvisiblecontentposition-on-flatlist (please upvote)

Credits

Thanks to stackia for https://github.com/facebook/react-native/pull/29466#issuecomment-664367382

Contributing

PRs for improvement are welcome :)

License

MIT