A React Native library that helps to track the appearance of an element on the screen.
\n\nThe library's functionality is based on the loop that measures element's position on the screen and looks if it lies within the boundaries of the designated parent.
\nThe loop is intended to operate only when user interaction has happened. This is achieved by attaching interaction event listeners to the parent element relative to which the tracking is performed. When app goes idle the loop stops after a delay.
\nAPI is designed in a way that provides easy basic usage without boilerplate and cluttering the code, for that all components try to make their setup and all necessary attachments automatic.
\nThe basic intended usage implies setting a ScrollView or any List component as parent and tracking the element relative to it.
\nAs well the library allows other types of usage and provides a wide variety of settings and customizations to cover different usage scenarios.
\nAmong the options are:
\n\nAll setup options, except for measuring relative to window, consist of two steps: setting parent component relative to which the tracking will be performed and child observed components.
\n\nWrap the parent component with provider. The provider will attach all necessary props automatically to its child component and does not require any configuration in basic setup. Works perfectly with ScrollView and virtualized lists.
\nSet up the useAppearObserver hook for the element you want to track and pass it the props returned by the hook. It attaches a ref to the component, based on which the measurement will run, and adds specific props to prevent the element from collapsing which prevents measurement and tracking.
\n\n```tsx\n\nconst App = () => {\n return (\nAttach ref and interaction handlers to the parent component, pass interaction listeners and parent ref to the tracked component.
\n\n```tsx\nconst App = () => {\n const scrollViewRef = useRef()\n const { interactionHandlers, interactionListeners } = useInteractionManager()\n\n return (\nAttach ref to the parent component. Pass parent ref to the observed component. Set interactionModeEnabled to false.
\n\n```tsx\nconst App = () => {\n const scrollViewRef = useRef()\n\n return (\nSet up useAppearObserver with useScreenIfNoParent set to true. This mode also supports parentOffsets.
\n\n```tsx\nconst App = () => {\n return (\nSet checkDetachedElements to true.
\n>Option2:\n>Set removeClippedSubviews to false for the list.
\n>Wrap it with a View and attach parentRef to the View, not the list.
\n\nSet 'enabled' flag to isFocused from React Navigation. By default, the loop stops when the screen goes out of focus and won't start again otherwise, so it's necessary to start it manually.
\nDepending on your needs, as an option, you may choose to pass onDisappear callback to the onDisable slot. This way the the hook will report disappearance when screen goes out of focus and the tracked element becomes not visible.
\n\n```tsx\nconst TrackedElement = ({ onAppear, onDisappear }: any) => {\n const isFocused = useIsFocused()\n\n const { refProps } = useAppearObserver({\n enabled: isFocused,\n onAppear,\n onDisappear,\n onDisable: onDisappear // Optional\n })\n\n returnThis example shows how to use provider component's support of children as render prop to manually assign all necessary props to the underlying components.
\nThe same can be achieved without the usage of provider, by following the example in the Interaction mode without provider section.
\nThis is useful when you need set custom component as parent, set some actions as interaction start/end for the tracking loop, for example clicking a 'Scroll to top' button.
\nThe example shows all possible props the provider gives, you can pick only what you need and spread the rest.
\n\n```tsx\nconst App = () => {\n return (\nThere are a few technics to optimize the tracking loop.
\nThe core hook that performs tracking of the component by running a loop measuring the component's position.
\nComponent that provides a parent ref and interaction listeners through context for observers down the tree.
\nModifies the props of its child component by attaching event listeners to interaction callbacks like onScroll.
\nComponent is designed to provide minimalistic default usage, so it makes all arrangements under the hood. By default, it attaches all kinds of event listeners to the child element, with ScrollView in mind, but the element may not support some of them and these events will be ignored, or have different event callbacks. For manual setup provide children as render prop and arrange all listeners manually.\nA hook that returns interaction event handlers and interaction listeners for attaching them to the parent component and observers respectfully.
\nUsed inside Provider, but exposed for setting up interaction mode tracking without provider.
\nA hook that incapsulates props necessary to prevent element from being collapsed, and a ref. Can be used to attach these props to the parent component in no provider, if it can be collapsed.
\n