{"id":30149369,"url":"https://github.com/filiphsps/react-native-scroll-to-child","last_synced_at":"2025-09-06T22:31:46.454Z","repository":{"id":300662942,"uuid":"1006739431","full_name":"filiphsps/react-native-scroll-to-child","owner":"filiphsps","description":"React Native package to programmatically scroll a child of a ScrollView into view","archived":false,"fork":false,"pushed_at":"2025-08-25T23:09:23.000Z","size":587,"stargazers_count":6,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-26T01:11:54.292Z","etag":null,"topics":["expo","react","react-native","react-native-component","scrolling","scrollview","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-scroll-to-child","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/filiphsps.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["filiphsps"]}},"created_at":"2025-06-22T22:45:31.000Z","updated_at":"2025-08-25T23:08:58.000Z","dependencies_parsed_at":"2025-06-23T00:47:02.457Z","dependency_job_id":"b54010de-a793-418e-9818-14f40a62ddc0","html_url":"https://github.com/filiphsps/react-native-scroll-to-child","commit_stats":null,"previous_names":["filiphsps/react-native-scroll-to-child"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/filiphsps/react-native-scroll-to-child","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphsps%2Freact-native-scroll-to-child","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphsps%2Freact-native-scroll-to-child/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphsps%2Freact-native-scroll-to-child/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphsps%2Freact-native-scroll-to-child/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filiphsps","download_url":"https://codeload.github.com/filiphsps/react-native-scroll-to-child/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filiphsps%2Freact-native-scroll-to-child/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273973466,"owners_count":25200575,"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","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["expo","react","react-native","react-native-component","scrolling","scrollview","typescript"],"created_at":"2025-08-11T10:42:56.158Z","updated_at":"2025-09-06T22:31:46.427Z","avatar_url":"https://github.com/filiphsps.png","language":"TypeScript","funding_links":["https://github.com/sponsors/filiphsps"],"categories":[],"sub_categories":[],"readme":"# react-native-scroll-to-child\n\nProgrammatically scroll a React Native `ScrollView`'s child into view, either vertically, horizontally, or both.\n\n[![npm downloads](https://img.shields.io/npm/dm/react-native-scroll-to-child.svg)](https://www.npmjs.com/package/react-native-scroll-to-child)\n[![npm version](https://img.shields.io/npm/v/react-native-scroll-to-child.svg?style=flat)](https://www.npmjs.com/package/react-native-scroll-to-child)\n[![CI](https://img.shields.io/github/actions/workflow/status/filiphsps/react-native-scroll-to-child/ci.yml)](https://github.com/filiphsps/react-native-scroll-to-child/actions/workflows/ci.yml)\n[![codecov](https://img.shields.io/codecov/c/github/filiphsps/react-native-scroll-to-child?token=wTfrpJQEhV)](https://codecov.io/gh/filiphsps/react-native-scroll-to-child)\n\n\u003e [!NOTE]\n\u003e **Why a hard-fork?** The [original project](https://github.com/slorber/react-native-scroll-into-view) is not actively maintained, and I needed to add support for horizontal scrolling. This fork also aims to improve code readability and modernization. If you find this package useful, please consider starring the original repository as well!\n\n\n## Installation\n\n```bash\npnpm install react-native-scroll-to-child\n```\n\n## Features\n\n- **Declarative Component API:** Use the `\u003cScrollIntoView /\u003e` component for a straightforward approach.\n- **Imperative Hook API:** Access `useScrollIntoView()` for more complex, event-driven scrolling.\n- **Highly Configurable:** Customize scroll behavior at multiple levels.\n- **Alignment Modes:** Control where the element aligns within the `ScrollView` (`auto`, `start`, `end`, `center`).\n- **Insets:** Add top and bottom insets to prevent elements from touching the `ScrollView` edges.\n- **Horizontal \u0026 Vertical:** Works for both vertical and horizontal `ScrollView`s.\n- **TypeScript Support:** Fully typed for a better development experience.\n- **Composition Friendly:** Supports `Animated.ScrollView`, `react-native-keyboard-aware-scroll-view`, and other `ScrollView` wrappers.\n\n## Examples\n\n### Declarative Component\n\nThis is the simplest way to use the library. Wrap the child you want to scroll to in the `ScrollIntoView` component and control its state with a boolean.\n\n```tsx\nimport { View, Text, ScrollView, Button } from 'react-native';\nimport { wrapScrollView, ScrollIntoView } from 'react-native-scroll-to-child';\nimport { useState } from 'react';\n\nconst CustomScrollView = wrapScrollView(ScrollView);\n\nfunction MyScreen() {\n    const [show, setShow] = useState(false);\n\n    return (\n        \u003cCustomScrollView\u003e\n            \u003cButton title=\"Scroll to View\" onPress={() =\u003e setShow(true)} /\u003e\n            \u003cView style={{ height: 1000 }} /\u003e\n            \u003cScrollIntoView show={show}\u003e\n                \u003cText\u003eThis view will be scrolled into view!\u003c/Text\u003e\n            \u003c/ScrollIntoView\u003e\n        \u003c/CustomScrollView\u003e\n    );\n}\n```\n\n### Imperative Hook\n\nFor more control, you can use the `useScrollIntoView` hook to scroll a `ref` into view imperatively.\n\n```tsx\nimport { View, Text, ScrollView, Button, Alert } from 'react-native';\nimport { wrapScrollView, useScrollIntoView } from 'react-native-scroll-to-child';\nimport { useRef } from 'react';\n\nconst CustomScrollView = wrapScrollView(ScrollView);\n\nfunction MyScreen() {\n    return (\n        \u003cCustomScrollView\u003e\n            \u003cMyScreenContent /\u003e\n        \u003c/CustomScrollView\u003e\n    );\n}\n\nfunction MyScreenContent() {\n    const viewRef = useRef\u003cView\u003e(null);\n    const scrollIntoView = useScrollIntoView();\n\n    const handlePress = () =\u003e {\n        if (viewRef.current) {\n            scrollIntoView(viewRef.current, {\n                align: 'center',\n                animated: true,\n            });\n        } else {ß\n            Alert.alert(\"Error\", \"The view isn't mounted yet.\");\n        }\n    };\n\n    return (\n        \u003c\u003e\n            \u003cButton onPress={handlePress} title=\"Scroll to View\" /\u003e\n            \u003cView style={{ height: 1000 }}\u003e\n                \u003cText\u003eSome long ScrollView content\u003c/Text\u003e\n            \u003c/View\u003e\n            \u003cView ref={viewRef}\u003e\n                \u003cText\u003eThis view will be scrolled into view on button press!\u003c/Text\u003e\n            \u003c/View\u003e\n        \u003c/\u003e\n    );\n}\n```\n\n## API\n\n### `wrapScrollView(ScrollViewComponent, options?)` Higher-Order Component (HOC)\n\nThis higher-order component wraps your `ScrollView` to provide the necessary context for scrolling.\n\n- `ScrollViewComponent`: The `ScrollView` component to wrap (e.g., `ScrollView`, `Animated.ScrollView`).\n- `options` (optional): Default options for all `scrollIntoView` calls within this `ScrollView`.\n\n### `useScrollIntoView()` Hook\n\nA hook that returns the `scrollIntoView` function.\n\n- `scrollIntoView(ref, options?)`: Scrolls the given `ref` into view.\n  - `ref`: A `ref` to the component you want to scroll to.\n  - `options` (optional): Override the default options for this specific call.\n\n### `ScrollIntoView` Component\n\nA component that wraps a child and scrolls it into view based on the `show` prop.\n\n- `show`: A boolean that, when `true`, scrolls the child into view.\n- `options` (optional): Override the default options for this component.\n\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch4\u003e\u003ccode\u003eScrollIntoView\u003c/code\u003e Options\u003c/h4\u003e\u003c/summary\u003e\n\n| Option             | Type                                                               | Default      | Description                                                                                             |\n| ------------------ | ------------------------------------------------------------------ | ------------ | ------------------------------------------------------------------------------------------------------- |\n| `align`            | `'auto'`, `'start'`, `'end'`, `'center'`                           | `'auto'`     | Determines the alignment of the element within the `ScrollView`.                                        |\n| `animated`         | `boolean`                                                          | `true`       | Whether to animate the scroll.                                                                          |\n| `immediate`        | `boolean`                                                          | `false`      | If `true`, the call is not throttled. Useful for high-priority scrolls.                                 |\n| `insets`           | `{ top: number, bottom: number, left: number, right: number }`     | `{...}`      | Adds padding around the element when scrolling it into view.                                            |\n| `computeScrollY`   | `(scrollViewLayout, viewLayout, scrollY, insets, align) =\u003e number` | `undefined`  | Advanced: Override the default vertical scroll calculation.                                             |\n| `computeScrollX`   | `(scrollViewLayout, viewLayout, scrollX, insets, align) =\u003e number` | `undefined`  | Advanced: Override the default horizontal scroll calculation.                                           |\n| `measureElement`   | `(viewRef) =\u003e Promise\u003cLayoutRectangle\u003e`                            | `undefined`  | Advanced: Override how the element's layout is measured.                                                |\n\u003c/details\u003e\n\n### Advanced Usage\n\nYou can provide custom configuration to `wrapScrollView` for advanced use cases, such as when using a custom `ScrollView` wrapper.\n\n```tsx\n// All HOC configurations can also be passed as props to the wrapped `ScrollView` component.\n\nconst CustomScrollView = wrapScrollView(MyCustomScrollView, {\n  // Provide default options for all scroll calls\n  options: {\n    align: 'center',\n  },\n  // If your custom ScrollView nests the underlying ScrollView,\n  // provide a function to extract the actual ScrollView node.\n  getScrollViewNode: ref =\u003e ref.getScrollView(),\n  // Set a default throttle value for scroll events.\n  scrollEventThrottle: 16,\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiliphsps%2Freact-native-scroll-to-child","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffiliphsps%2Freact-native-scroll-to-child","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiliphsps%2Freact-native-scroll-to-child/lists"}