?visibility aware view that you can follow viewport

This React Native component, VisibilityAwareFlatList, is a custom implementation of the standard FlatList component. It is designed to provide awareness of the visibility of individual items within the list, allowing developers to respond to changes in the viewport.


  • 60 FPS Performance: Designed to run smoothly at minimum 60 frames per second without any lag.
  • Visibility Tracking: Know exactly what items are visible within the viewport.
  • Customizable Thresholds: Set your own percentage threshold for triggering visibility changes.
  • Nested Viewport Support: Handle nested viewports easily with the context-based architecture.
  • Extendable: Can be used with your custom FlatList implementation.


yarn add install react-native-visibility-aware-list


Here’s a simple example to get you started:

import VisibilityAwareFlatList from 'react-native-visibility-aware-list';

// Usage in your component
  onViewportItemsChanged={(items) => console.log(items)}
  // other FlatList props



  • onViewportItemsChanged(items: VisibleItem[]): Callback that gets called when the visible items change.
  • viewportItemsChangePercentage?: number: Minimum percentage of an item that must be visible to trigger onViewportItemsChanged.
  • triggerOnLayoutChange?: boolean: Trigger calculation on layout change.
  • nestedViewportKey?: string: Key for nested viewport.
  • as?: any: Custom component that will replace FlatList(must have cell renderer).


getCurrentVisibleItems(): VisibleItem[]: You can get current visible items via refs.


This project is open-source and awaits your contributions. Feel free to make changes and send a pull request.


This project is licensed under the MIT license. For more details, see the LICENSE file.


View Github