react-native-impressions

check if an element is in viewable area or not

Usage no npm install needed!

<script type="module">
  import reactNativeImpressions from 'https://cdn.skypack.dev/react-native-impressions';
</script>

README

react-native-impressions

Track which components are visible to user

Installation

npm install react-native-impressions

Usage

import { Watcher } from "react-native-impressions"

<Watcher watchX watchY callback={({ direction, visible }) => {...}}>
   <YourComponent />
</Watcher>

Props

name type description
watchX boolean watch only for x-axis
watchY boolean watch only for y-axis
callback function return the direction and visibility status of the component
watchInterval number watch position at this time interval in milliseconds
visiblePercentageX number valid percent component visibility for x-axis
visiblePercentageY number valid percent component visibility for y-axis
extraOffsetBottom number addition offset to avoid other components
extraOffsetTop number addition offset to avoid other components
extraOffsetRight number addition offset to avoid other components
extraOffsetLeft number addition offset to avoid other components