rni

react-native-intersection-observer

React Native component that monitors when an element enters or leaves the client viewport.

Showing:

Popularity

Downloads/wk

184

GitHub Stars

14

Maintenance

Last Commit

2mos ago

Contributors

2

Package

Dependencies

1

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-intersection-observer

React Native implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

Installation

Install using Yarn:

yarn add react-native-intersection-observer

or NPM:

npm install react-native-intersection-observer --save

Usage

You can pass any component to the <InView />, and it will handle creating the wrapping View component. Add a handler to the onChange method, and control the state in your own component. Any extra props you add to <InView> will be passed to the View component, allowing you to set the style, etc.

import { IOScrollView, InView } from 'react-native-intersection-observer'

const Component = () => (
  <IOScrollView>
    <InView onChange={(inView: boolean) => console.log('Inview:', inView)}>
      <Text>Plain children are always rendered. Use onChange to monitor state.</Text>
    </InView>
  </IOScrollView>  
)

export default Component

API

IOScrollView Props

NameTypeDefaultRequiredDescription
rootMargin{ top: number; left: number; right: number; bottom: number }undefinedfalseroot margin

InView Props

The <InView /> component also accepts the following props:

NameTypeDefaultRequiredDescription
asComponentTypeViewfalseRender the wrapping element as this element. Defaults to View.
childrenReactNodetrueChildren expects a plain child, to have the <InView /> deal with the wrapping element.
triggerOncebooleanfalsefalseOnly trigger this method once
onChange(inView: boolean) => voidfalseCall this function whenever the in view state changes. It will receive the inView boolean, alongside the current IntersectionObserverEntry.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100