React-native-appear-observer NPM

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

const TrackedComponent = () => {
  const { refProps } = useAppearObserver({ 
    onAppear: useCallback(() => console.log('Hola!'), []) 
  })

  return <View { ...refProps } />
}

const App = () => {
  const scrollViewRef = useRef()
  const { interactionHandlers, interactionListeners } = useInteractionManager()

  return (
    <ScrollView ref={scrollViewRef} { ...interactionHandlers }>
      <TrackedComponent parentRef={scrollViewRef} interactionListeners={interactionListeners} />
    </ScrollView>
  )
}

const TrackedComponent = ({ parentRef, interactionListeners }: any) => {
  const { refProps } = useAppearObserver({
    parentRef,
    interactionListeners,
    onAppear: useCallback(() => console.log('Hi there!'), [])
  })

  return <View {...refProps} />
}

const App = () => {
  const scrollViewRef = useRef()

  return (
    <ScrollView ref={scrollViewRef}>
      <TrackedComponent parentRef={scrollViewRef} />
    </ScrollView>
  )
}

const TrackedComponent = ({ parentRef }: any) => {
  const { refProps } = useAppearObserver({
    parentRef,
    onAppear: useCallback(() => console.log('Hi there!'), []),
    options: {
      interactionModeEnabled: false,
    }
  })

  return <View {...refProps} />
}

const App = () => {
  return (
    <ScrollView>
      <TrackedComponent />
    </ScrollView>
  )
}

const TrackedComponent = () => {
  const { refProps } = useAppearObserver({
    onAppear: useCallback(() => console.log('Hi there!'), []),
    options: {
      interactionModeEnabled: false,
      useScreenIfNoParent: true,
    }
  })

  return <View {...refProps} />
}

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

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

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

const App = () => {
  return (
    <AppearObserverProvider>
      {
        ({ 
           collapsable, 
           onLayout, 
           onScroll, 
           onScrollBeginDrag, 
           onScrollEndDrag, 
           onTouchStart, 
           onTouchEnd, 
           onTouchMove, 
           onTouchCancel, 
           onMomentumScrollEnd,
           interactionRecorders,
        }) => (
          <>
            <ScrollView 
              collapsable={collapsable} 
              onLayout={onLayout}
              onScrollBeginDrag={onScrollBeginDrag}
              onScrollEndDrag={onScrollEndDrag}
              onTouchStart={onTouchStart}
              onTouchEnd={onTouchEnd}
              onTouchMove={onTouchMove}
              onTouchCancel={onTouchCancel}
              onMomentumScrollEnd={onMomentumScrollEnd}
            >
              <TrackedComponent />
            </ScrollView>
            <ActionButton title="Scroll to top" onPress={() => {
              interactionRecorders.recordInteractionStart()
              scrollToTop()
            }} />
          </>
        )
      }
    </AppearObserverProvider>
  )
}

Prop	Description	Default value
elementRef	External ref to use instead of the one created by the hook. Use if you need to work with the tracked element by ref. No ref merging happens, the external one overrides the internal default.	-
parentRef	Optional props for usage without context. Provides parent element ref directly to the hook, overrides the ref supplied by context.	-
onAppear	Callback that triggers when the element comes into visibility.	-
onDisappear	Callback that triggers when the element disappears.	-
onEnable	Callback that fires when tracking gets enabled.	-
onDisable	Callback that fires when tracking gets disabled.	-
enabled	Flag which toggles tracking on and off. Useful when tracking needs to be reset, like in case with react navigation.	true
interactionListeners	Slot for interaction listeners passed from parent, for usage without context.	-

Option	Description	Default value
visibilityThreshold	Defines what part of an element should be visible for it to trigger callback, from 0 to 1.	0.001
intervalDelay	Determines a delay in milliseconds between visibility check repetitions.	50
recalculateParentBoundaries	Tells whether observer should measure parent element boundaries on every on every check or measure once and cache.	true
parentOffsets	Sets additional static offsets added to the calculated parent boundaries. Useful if you need to consider the height of some header inside a ScrollView.	0 for each corner
interactionModeEnabled	Makes the tracking loop fire only when user interaction has happened. When disabled, the loop runs indefinitely until stopped by enabled prop.	true
useScreenIfNoParent	Provides an option to track the element relative to screen instead of parent element. Only works if parent ref is not passed.	false
optimizeOutOfScreen	Doubles the delay between loop cycles if the element is out of screen. A small optimization, candidate for improvement.	true

Prop	Description
refProps	Ref and props that prevent element from being collapsed, see useObservableTargetRef
restart	A handler to manually restart the observer. Can be used to trigger onAppear manually, for example when element's visibility hasn't changed, but its content has.

Prop	Description	Default value
enableInteractionMode	When true, the touch handlers are attached to the child element of the provider, and child observers run checks only upon touch interactions, stopping them after a period of inactivity.	true
ref	An external ref to pass to the provider's child element. Provider sets it's own ref by default, but can use external one for its operations. No ref merging happens, the external one overrides the internal default.	_
children	React element or render prop for manual setup.	_
offsets	Additional static offsets added to the parent element's boundaries. Can be used to account for ScrollView headers in calculations.	0 for each corner
onLayout, onScroll etc	Callbacks to be passed to the child component on top of the provider's internal ones. When an element is wrapped with provider, you have to pass these callbacks to the provider instead of the target element, otherwise provider overwrites them.	-

Prop	Description	Default value
onScroll, onScrollBeginDrag, onScrollEndDrag etc	External listeners to be attached alongside internal service ones.	true

Prop	Description
interactionHandlers	Callbacks for interaction events that trigger to be attached to parent component. They trigger the tracking loop start.
interactionRecorders	Separate callbacks that can be attached to any event to mark it as interaction start or end. For example can serve to set 'Scroll to top' button press as interaction.
interactionListeners	Interaction listeners to be passed to useAppearObserver hook of the tracked components so that they can listen to parent interactions.

Prop	Description	Default value
ref	External ref to be used instead of the default one set up internally.	-

Prop	Description
ref	A regular React ref
collapsable	Set to true, prevents native node from being collapsed.
onLayout	Also serves for collapse prevention, as collapsable is currently only for Android.