{"id":27290022,"url":"https://github.com/aslight0503/react-native_keyboard-aware-scroll-view","last_synced_at":"2026-01-31T13:03:26.816Z","repository":{"id":267280295,"uuid":"900733190","full_name":"aslight0503/react-native_keyboard-aware-scroll-view","owner":"aslight0503","description":"A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.","archived":false,"fork":false,"pushed_at":"2024-12-13T11:14:38.000Z","size":317,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T17:21:50.009Z","etag":null,"topics":["andrioid","ios","javascript","keyboard","react","react-native","scroll-view"],"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/aslight0503.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":"2024-12-09T11:23:22.000Z","updated_at":"2024-12-13T11:14:43.000Z","dependencies_parsed_at":"2025-01-05T23:15:24.064Z","dependency_job_id":"e300f26b-38f6-4da4-8743-fac4a6cdc47b","html_url":"https://github.com/aslight0503/react-native_keyboard-aware-scroll-view","commit_stats":null,"previous_names":["aslight0013/react-native_keyboard-aware-scroll-view","aslight0503/react-native_keyboard-aware-scroll-view"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aslight0503%2Freact-native_keyboard-aware-scroll-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aslight0503%2Freact-native_keyboard-aware-scroll-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aslight0503%2Freact-native_keyboard-aware-scroll-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aslight0503%2Freact-native_keyboard-aware-scroll-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aslight0503","download_url":"https://codeload.github.com/aslight0503/react-native_keyboard-aware-scroll-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248480857,"owners_count":21111030,"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":["andrioid","ios","javascript","keyboard","react","react-native","scroll-view"],"created_at":"2025-04-11T21:22:44.248Z","updated_at":"2026-01-31T13:03:21.787Z","avatar_url":"https://github.com/aslight0503.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"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## Owner\nArtur S\n\nBuilt with 💛 by [APSL](https://github.com/apsl).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faslight0503%2Freact-native_keyboard-aware-scroll-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faslight0503%2Freact-native_keyboard-aware-scroll-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faslight0503%2Freact-native_keyboard-aware-scroll-view/lists"}