DEV Community

Vishal Narkhede
Vishal Narkhede

Posted on • Edited on

3 4

maintainVisibleContentPosition prop for Android react-native

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
Enter fullscreen mode Exit fullscreen mode

Usage

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

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

<ScrollView
    maintainVisibleContentPosition={{
        autoscrollToTopThreshold: 10,
        minIndexForVisible: 1,
    }}
    ...
/>
Enter fullscreen mode Exit fullscreen mode

Cheers and happy coding :)

Special thanks to stackia for this :)

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay