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