react-native-appear-observer

react-native-appear-observer

A React Native library to detect element appearance on the screen

Version 2.0

Version 2.0 considers the mistakes of first version and expands functionality, briefly it:

• has updated appear observer hook cycle logic
• adds support for enabling, disabling and reseting observer (can be used with react navigation)
• adds full support for usage without provider
• adds support for render props children to provider
• adds support of callbacks to provider, adds onScroll as interaction handler
• adds a utility hook for adding necessary fixes to elements to work on android, incorporates it in observer and provider hooks
• adds support for usage without parent, relying on window boundaries (provided offsets considered)
• adds support of settings parent offsets (for cases of floating element above parent)
• drops reqirement of explicit refs
• memoizes the configurations properly so that simple non memoized objects can be used
• changes intersection detection algorithm, incorrect visibility threshold is fixed
• drops support for useIsAppeared (so far)

Proper documentation will be added later!

Usage

Wrap the parent component with provider and supply it with parent view ref.

const App = () => {
  return (
    <AppearObserverProvider>
      <ScrollView>{/* content */}</ScrollView>
    </AppearObserverProvider>
  )
}

Or use useAppearObserver hook if you want to attach callback to visibility change without changing state.

const TestView = ({ onAppear, onDisappear }: any) => {
  const { refProps } = useAppearObserver({
    elementRef,
    onAppear,
    onDisappear
  })

  return <View {...refProps} style={elementStyle} />
}

Usage with react navigation

const TestView = ({ onAppear, onDisappear }: any) => {
  const isFocused = useIsFocused()

  const { refProps } = useAppearObserver({
    enabled: isFocused,
    onAppear,
    onDisappear,
    onDisable: onDisappear // Optional
  })

  return <View {...refProps} style={elementStyle} />
}

Options

useAppearObserver

Option	Description	Default value
visibilityThreshold	Defines what part of an element should be visible for it to trigger callback, from 0 to 1.	0
intervalDelay	Determines a delay in milliseconds between visibility check repetitions.	100
recalculateParentBoundaries	Tells whether observer should measure parent element boundaries on every on every check or measure once and cache.	false

useAppearObserverProvider

Option	Description	Default value
enableInteractionMode	If true, the touch handlers are attached to child view of context provider and observer runs checks only upon interactions, which could affect element visibility - touch move or scroll, stopping them on after a period of inactivity. If false, checks will run permanently.	true

Known issues

• Observing stops in horizontal lists on Android if provider is attached to parent vertical scroll view and scrolling is performed by holding screen with one finger and moving with another.