11

I want a similar feature just like react visibility sensor, but in react-native. I have a flat list with multiple items(each having different height). I want to detect whether a particular item(lets say 5th item) comes inside the view port and when it goes out

Romit Kumar
  • 2,442
  • 6
  • 21
  • 34

2 Answers2

22

You can use onViewableItemsChanged to check which viewableItems are on the screen.

Here's a dummy class example:

class Demo extends Component {
  constructor() {
    super();
    this.viewabilityConfig = {
      viewAreaCoveragePercentThreshold: 95
    }
  }
  onViewableItemsChanged = ({ viewableItems }) => {
    // viewableItems will show you what items are in view
  }
  render() {
    <FlatList
      ...
      onViewableItemsChanged={this.onViewableItemsChanged}
      viewabilityConfig={this.viewabilityConfig}
    />
  }
}

You'll need to modify viewAreaCoveragePercentThreshold accordingly.

Dan
  • 8,041
  • 8
  • 41
  • 72
  • 3
    If you are using hooks in React Native, you will need to wrap that function and viewabilityConfig into Ref so the "Changing onViewableItemsChanged on the fly is not supported" error is not thrown. Please, see: https://stackoverflow.com/questions/48045696/flatlist-scrollview-error-on-any-state-change-invariant-violation-changing-on/64573345 – Stefan Majiros Oct 23 '21 at 13:04
4

You can use Viewport from '@skele/components' like this:

0. Install Skele Components: yarn add @skele/components or npm install @skele/components

1. Wrap your scrollable view with Viewport.Tracker

    import { Viewport } from '@skele/components'
    ...
    render() {
        return (
            <Viewport.Tracker>
                <ScrollView scrollEventThrottle={16}>
                    { this.props.children }
                </ScrollView>
            </Viewport.Tracker>
        );
    }

2. Make its child components Viewport.Aware

import { Image } from 'react-native'
import { Viewport } from '@skele/components'
...
const ViewportAwareImage = Viewport.Aware(Image)
...
render() {
    return (
        <ViewportAwareImage
            source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }}
            onViewportEnter={() => console.log('Entered!')}
            onViewportLeave={() => console.log('Left!')} 
        />
    );
}

for more info visite this link

ehsaneha
  • 1,665
  • 13
  • 8