{"id":13475649,"url":"https://github.com/APSL/react-native-keyboard-aware-scroll-view","last_synced_at":"2025-03-27T00:31:39.468Z","repository":{"id":37561703,"uuid":"44626250","full_name":"APSL/react-native-keyboard-aware-scroll-view","owner":"APSL","description":"A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.","archived":false,"fork":false,"pushed_at":"2024-06-30T10:42:40.000Z","size":408,"stargazers_count":5323,"open_issues_count":196,"forks_count":647,"subscribers_count":43,"default_branch":"master","last_synced_at":"2025-03-22T12:04:32.637Z","etag":null,"topics":["keyboard","react","react-components","react-native","scroll-view","scrollview-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/APSL.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2015-10-20T18:22:34.000Z","updated_at":"2025-03-17T02:22:07.000Z","dependencies_parsed_at":"2024-09-29T20:03:46.481Z","dependency_job_id":"3ad12eb3-9f49-44f2-967b-316e90a48057","html_url":"https://github.com/APSL/react-native-keyboard-aware-scroll-view","commit_stats":{"total_commits":159,"total_committers":62,"mean_commits":2.564516129032258,"dds":0.7547169811320755,"last_synced_commit":"9eee405f7b3e261faf86a0fc8e495288d91c853e"},"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/APSL%2Freact-native-keyboard-aware-scroll-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/APSL%2Freact-native-keyboard-aware-scroll-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/APSL%2Freact-native-keyboard-aware-scroll-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/APSL%2Freact-native-keyboard-aware-scroll-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/APSL","download_url":"https://codeload.github.com/APSL/react-native-keyboard-aware-scroll-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245407589,"owners_count":20610228,"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":["keyboard","react","react-components","react-native","scroll-view","scrollview-component"],"created_at":"2024-07-31T16:01:22.214Z","updated_at":"2025-03-27T00:31:39.440Z","avatar_url":"https://github.com/APSL.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries","组件","Components"],"sub_categories":["Releases","UI","Keyboard"],"readme":"# react-native-keyboard-aware-scroll-view\n\n\u003cp\u003e\n\u003cimg src=\"https://travis-ci.org/APSL/react-native-keyboard-aware-scroll-view.svg?branch=master\" /\u003e\n\u003cimg src=\"https://img.shields.io/npm/dm/react-native-keyboard-aware-scroll-view.svg\" /\u003e\n\u003cimg src=\"https://img.shields.io/npm/dt/react-native-keyboard-aware-scroll-view.svg\" /\u003e\n\u003c/p\u003e\n\nA ScrollView component that handles keyboard appearance and automatically scrolls to focused `TextInput`.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/wiki/APSL/react-native-keyboard-aware-scroll-view/kasv.gif\" alt=\"Scroll demo\" width=\"400\"\u003e\n\u003c/p\u003e\n\n## Supported versions\n\n- `v0.4.0` requires `RN\u003e=0.48`\n- `v0.2.0` requires `RN\u003e=0.32.0`.\n- `v0.1.2` requires `RN\u003e=0.27.2` but you should use `0.2.0` in order to make it work with multiple scroll views.\n- `v0.0.7` requires `react-native\u003e=0.25.0`.\n- Use `v0.0.6` for older RN versions.\n\n## Installation\n\nInstallation can be done through `npm` or `yarn`:\n\n```shell\nnpm i react-native-keyboard-aware-scroll-view --save\n```\n\n```shell\nyarn add react-native-keyboard-aware-scroll-view\n```\n\n## Usage\n\nYou can use the `KeyboardAwareScrollView`, `KeyboardAwareSectionList` or the `KeyboardAwareFlatList`\ncomponents. They accept `ScrollView`, `SectionList` and `FlatList` default props respectively and\nimplement a custom high order component called `KeyboardAwareHOC` to handle keyboard appearance.\nThe high order component is also available if you want to use it in any other component.\n\nImport `react-native-keyboard-aware-scroll-view` and wrap your content inside\nit:\n\n```js\nimport { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'\n```\n\n```jsx\n\u003cKeyboardAwareScrollView\u003e\n  \u003cView\u003e\n    \u003cTextInput /\u003e\n  \u003c/View\u003e\n\u003c/KeyboardAwareScrollView\u003e\n```\n\n## Auto-scroll in `TextInput` fields\n\nAs of `v0.1.0`, the component auto scrolls to the focused `TextInput` 😎. For versions `v0.0.7` and older you can do the following.\n\n### Programatically scroll to any `TextInput`\n\nIn order to scroll to any `TextInput` field, you can use the built-in method `scrollToFocusedInput`. Example:\n\n```js\n_scrollToInput (reactNode: any) {\n  // Add a 'scroll' ref to your ScrollView\n  this.scroll.props.scrollToFocusedInput(reactNode)\n}\n```\n\n```jsx\n\u003cKeyboardAwareScrollView\n  innerRef={ref =\u003e {\n    this.scroll = ref\n  }}\u003e\n  \u003cView\u003e\n    \u003cTextInput\n      onFocus={(event: Event) =\u003e {\n        // `bind` the function if you're using ES6 classes\n        this._scrollToInput(ReactNative.findNodeHandle(event.target))\n      }}\n    /\u003e\n  \u003c/View\u003e\n\u003c/KeyboardAwareScrollView\u003e\n```\n\n### Programatically scroll to any position\n\nThere's another built-in function that lets you programatically scroll to any position of the scroll view:\n\n```js\nthis.scroll.props.scrollToPosition(0, 0)\n```\n\n## Register to keyboard events\n\nYou can register to `ScrollViewResponder` events `onKeyboardWillShow` and `onKeyboardWillHide`:\n\n```jsx\n\u003cKeyboardAwareScrollView\n  onKeyboardWillShow={(frames: Object) =\u003e {\n    console.log('Keyboard event', frames)\n  }}\u003e\n  \u003cView\u003e\n    \u003cTextInput /\u003e\n  \u003c/View\u003e\n\u003c/KeyboardAwareScrollView\u003e\n```\n\n## Android Support\n\nFirst, Android natively has this feature, you can easily enable it by setting `windowSoftInputMode` in `AndroidManifest.xml`. Check [here](https://developer.android.com/guide/topics/manifest/activity-element.html#wsoft).\n\nBut if you want to use feature like `extraHeight`, you need to enable Android Support with the following steps:\n\n- Make sure you are using react-native `0.46` or above.\n- Set `windowSoftInputMode` to `adjustPan` in `AndroidManifest.xml`.\n- Set `enableOnAndroid` property to `true`.\n\nAndroid Support is not perfect, here is the supported list:\n\n| **Prop**                    | **Android Support** |\n| --------------------------- | ------------------- |\n| `viewIsInsideTabBar`        | Yes                 |\n| `resetScrollToCoords`       | Yes                 |\n| `enableAutomaticScroll`     | Yes                 |\n| `extraHeight`               | Yes                 |\n| `extraScrollHeight`         | Yes                 |\n| `enableResetScrollToCoords` | Yes                 |\n| `keyboardOpeningTime`       | No                  |\n\n## API\n\n### Props\n\nAll the `ScrollView`/`FlatList` props will be passed.\n\n| **Prop**                    | **Type**                         | **Description**                                                                                |\n| --------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- |\n| `innerRef`                  | `Function`                       | Catch the reference of the component.                                                          |\n| `viewIsInsideTabBar`        | `boolean`                        | Adds an extra offset that represents the `TabBarIOS` height.                                   |\n| `resetScrollToCoords`       | `Object: {x: number, y: number}` | Coordinates that will be used to reset the scroll when the keyboard hides.                     |\n| `enableAutomaticScroll`     | `boolean`                        | When focus in `TextInput` will scroll the position, default is enabled.                        |\n| `extraHeight`               | `number`                         | Adds an extra offset when focusing the `TextInput`s.                                           |\n| `extraScrollHeight`         | `number`                         | Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard. |\n| `enableResetScrollToCoords` | `boolean`                        | Lets the user enable or disable automatic resetScrollToCoords.                                 |\n| `keyboardOpeningTime`       | `number`                         | Sets the delay time before scrolling to new position, default is 250                           |\n| `enableOnAndroid`           | `boolean`                        | Enable Android Support                                                                         |\n\n### Methods\n\nUse `innerRef` to get the component reference and use `this.scrollRef.props` to access these methods.\n\n| **Method**           | **Parameter**                                                                                                                                           | **Description**                                                |\n| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |\n| `getScrollResponder` | `void`                                                                                                                                                  | Get `ScrollResponder`                                          |\n| `scrollToPosition`   | `x: number, y: number, animated: bool = true`                                                                                                           | Scroll to specific position with or without animation.         |\n| `scrollToEnd`        | `animated?: bool = true`                                                                                                                                | Scroll to end with or without animation.                       |\n| `scrollIntoView`     | `element: React.Element\u003c*\u003e, options: { getScrollPosition: ?(parentLayout, childLayout, contentOffset) =\u003e { x: number, y: number, animated: boolean } }` | Scrolls an element inside a KeyboardAwareScrollView into view. |\n\n### Using high order component\n\nEnabling any component to be keyboard-aware is very easy. Take a look at the code of `KeyboardAwareFlatList`:\n\n```js\n/* @flow */\n\nimport { FlatList } from 'react-native'\nimport listenToKeyboardEvents from './KeyboardAwareHOC'\n\nexport default listenToKeyboardEvents(FlatList)\n```\n\nThe HOC can also be configured. Sometimes it's more convenient to provide a static config than configuring the behavior with props. This HOC config can be overriden with props.\n\n```js\n/* @flow */\n\nimport { FlatList } from 'react-native'\nimport listenToKeyboardEvents from './KeyboardAwareHOC'\n\nconst config = {\n  enableOnAndroid: true,\n  enableAutomaticScroll: true\n}\n\nexport default listenToKeyboardEvents(config)(FlatList)\n```\n\nThe available config options are:\n\n```js\n{\n  enableOnAndroid: boolean,\n  contentContainerStyle: ?Object,\n  enableAutomaticScroll: boolean,\n  extraHeight: number,\n  extraScrollHeight: number,\n  enableResetScrollToCoords: boolean,\n  keyboardOpeningTime: number,\n  viewIsInsideTabBar: boolean,\n  refPropName: string,\n  extractNativeRef: Function\n}\n```\n\n## License\n\nMIT.\n\n## Author\n\nÁlvaro Medina Ballester `\u003camedina at apsl.net\u003e`\n\nBuilt with 💛 by [APSL](https://github.com/apsl).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAPSL%2Freact-native-keyboard-aware-scroll-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAPSL%2Freact-native-keyboard-aware-scroll-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAPSL%2Freact-native-keyboard-aware-scroll-view/lists"}