react-native-appear-observer v2.1.1

A React Native library to detect element appearance on the screen

Version 2.1.0 bumps React Native version to 0.72.5. Version 2.0.3 updates minor dependency versions.

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!

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} />
}

useAppearObserver

useAppearObserverProvider

• 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.