{"id":24164544,"url":"https://github.com/zhbhun/react-native-intersection-observer","last_synced_at":"2025-04-06T11:10:58.287Z","repository":{"id":37173639,"uuid":"277682720","full_name":"zhbhun/react-native-intersection-observer","owner":"zhbhun","description":"React Native component that monitors when an element enters or leaves the client viewport.","archived":false,"fork":false,"pushed_at":"2023-10-14T08:25:45.000Z","size":387,"stargazers_count":112,"open_issues_count":4,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T10:08:30.245Z","etag":null,"topics":["intersection-observer","lazy-loading","lazyload","lazyload-images","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhbhun.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-07T01:04:36.000Z","updated_at":"2025-01-16T14:49:28.000Z","dependencies_parsed_at":"2023-10-15T08:44:28.649Z","dependency_job_id":"0fee014e-a463-4ea4-bf91-5f8f1f32c149","html_url":"https://github.com/zhbhun/react-native-intersection-observer","commit_stats":{"total_commits":18,"total_committers":3,"mean_commits":6.0,"dds":"0.16666666666666663","last_synced_commit":"65cc20308ad5640004a23add78e599244b130fc5"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhbhun%2Freact-native-intersection-observer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhbhun%2Freact-native-intersection-observer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhbhun%2Freact-native-intersection-observer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhbhun%2Freact-native-intersection-observer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhbhun","download_url":"https://codeload.github.com/zhbhun/react-native-intersection-observer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247471521,"owners_count":20944158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["intersection-observer","lazy-loading","lazyload","lazyload-images","react","react-native"],"created_at":"2025-01-12T19:17:38.576Z","updated_at":"2025-04-06T11:10:58.270Z","avatar_url":"https://github.com/zhbhun.png","language":"TypeScript","readme":"# react-native-intersection-observer\n\nReact Native implementation of the\n[Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)\nto tell you when an element enters or leaves the viewport.\n\n## Installation\n\nInstall using [Yarn](https://yarnpkg.com):\n\n```sh\nyarn add react-native-intersection-observer\n```\n\nor NPM:\n\n```sh\nnpm install react-native-intersection-observer --save\n```\n\n## Usage\n\nYou can pass any component to the `\u003cInView /\u003e`, and it will handle creating the\nwrapping View component. Add a handler to the `onChange` method, and control the\nstate in your own component. Any extra props you add to `\u003cInView\u003e` will be\npassed to the View component, allowing you to set the `style`, etc.\n\n```tsx\nimport React, { useRef } from 'react';\nimport { Text } from 'react-native';\nimport {\n  IOScrollView,\n  IOScrollViewController,\n  InView,\n} from 'react-native-intersection-observer';\n\nfunction Demo() {\n  const scrollViewRef = useRef\u003cIOScrollViewController\u003e(null);\n  return (\n    \u003cIOScrollView ref={scrollViewRef}\u003e\n      \u003cText\n        onPress={() =\u003e {\n          scrollViewRef.current?.scrollToEnd();\n        }}\n      \u003e\n        Scroll to bottom\n      \u003c/Text\u003e\n      \u003cInView onChange={(inView: boolean) =\u003e console.log('Inview:', inView)}\u003e\n        \u003cText\u003e\n          Plain children are always rendered. Use onChange to monitor state.\n        \u003c/Text\u003e\n      \u003c/InView\u003e\n    \u003c/IOScrollView\u003e\n  );\n}\n\nexport default Demo;\n```\n\nPlease note that the functionality of the InView component is dependent on the use of the withIO higher-order component to wrap your scrollable component. The react-native-intersection-observer library presently offers two frequently used scrollable components: IOScrollView and IOFlatList. It's imperative to utilize the InView component within one of these two components for it to work as intended. If neither IOScrollView nor IOFlatList suits your requirements, you have the flexibility to employ withIO to encapsulate your custom scrollable components.\n\n```tsx\n// IOScrollView definition\nimport { ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { ScrollView, ScrollViewProps } from 'react-native';\nimport { type IOComponentProps, withIO } from 'react-native-intersection-observer';\n\nexport type IOScrollViewController = ScrollView;\n\nexport type IOScrollViewProps = IOComponentProps \u0026 ScrollViewProps;\n\nconst IOScrollView = withIO(ScrollView, [\n  'scrollTo',\n  'scrollToEnd',\n  'getScrollResponder',\n  'getScrollableNode',\n  'getInnerViewNode',\n]);\n\nexport default IOScrollView as unknown as ForwardRefExoticComponent\u003c\n  IOScrollViewProps \u0026 RefAttributes\u003cIOScrollViewController\u003e\n\u003e;\n```\n\nFurthermore, InView cannot be used within nested scrollable components. It solely monitors the immediate parent's scroll behavior, and scrolling at higher ancestral levels does not trigger InView's visibility callback.\n\n## API\n\n### IOScrollView\n\n- Props: Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props)\n\n  | Name | Type | Default | Required | Description |\n  | --- | --- | --- | --- | --- |\n  | [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) | { top: number; left: number; right: number; bottom: number } | undefined | false | root margin |\n\n- Methods: Inherits [ScrollView Methods](https://reactnative.dev/docs/scrollview#methods)\n\n### IOFlatList Props\n\n- Props: Inherits [FlatList Props](https://reactnative.dev/docs/flatlist#props)\n\n  | Name | Type | Default | Required | Description |\n  | --- | --- | --- | --- | --- |\n  | [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) | { top: number; left: number; right: number; bottom: number } | undefined | false | root margin |\n\n- Methods: Inherits [FlatList Methods](https://reactnative.dev/docs/flatlist#methods)\n\n### InView Props\n\nThe **`\u003cInView /\u003e`** component also accepts the following props:\n\n| Name | Type | Default | Required | Description |\n| -- | --- | --- | --- | --- |\n| **as** | `ComponentType` | View   | false    | Render the wrapping element as this element. Defaults to `View`. |\n| **children** | `ReactNode` | | true | Children expects a plain child, to have the `\u003cInView /\u003e` deal with the wrapping element. |\n| **triggerOnce** | boolean | false | false | Only trigger this method once |\n| **onChange** | `(inView: boolean) =\u003e void` | | false | Call this function whenever the in view state changes. It will receive the `inView` boolean, alongside the current `IntersectionObserverEntry`. |\n\n## License\n`react-native-intersection-observer` is [MIT licensed](./LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhbhun%2Freact-native-intersection-observer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhbhun%2Freact-native-intersection-observer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhbhun%2Freact-native-intersection-observer/lists"}