{"id":18458723,"url":"https://github.com/lizouzt/react-native-keyboard-avoid","last_synced_at":"2025-04-08T05:34:31.991Z","repository":{"id":57337922,"uuid":"114336379","full_name":"lizouzt/react-native-keyboard-avoid","owner":"lizouzt","description":"react-native KeyboardAvoid handler","archived":false,"fork":false,"pushed_at":"2018-03-20T06:10:18.000Z","size":2816,"stargazers_count":11,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T13:18:39.749Z","etag":null,"topics":["keyboard","keyboard-hooks","react-native"],"latest_commit_sha":null,"homepage":null,"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/lizouzt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-15T06:42:12.000Z","updated_at":"2020-10-01T13:59:13.000Z","dependencies_parsed_at":"2022-09-10T03:53:28.044Z","dependency_job_id":null,"html_url":"https://github.com/lizouzt/react-native-keyboard-avoid","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lizouzt%2Freact-native-keyboard-avoid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lizouzt%2Freact-native-keyboard-avoid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lizouzt%2Freact-native-keyboard-avoid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lizouzt%2Freact-native-keyboard-avoid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lizouzt","download_url":"https://codeload.github.com/lizouzt/react-native-keyboard-avoid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247785919,"owners_count":20995641,"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","keyboard-hooks","react-native"],"created_at":"2024-11-06T08:19:46.345Z","updated_at":"2025-04-08T05:34:26.976Z","avatar_url":"https://github.com/lizouzt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-keyboard-avoid\n\nComponent that handles keyboard appearance and automatically make any component node to keep out keyboard.\nWork with `TextInput`,`View` and so on.\n\n## Supported versions\n- `v1.0.0` requires `RN\u003e=0.20`\n\n## Installation\nInstallation can be done through ``npm`` or `yarn`:\n\n```shell\nnpm i react-native-keyboard-avoid --save\n```\n\n```shell\nyarn add react-native-keyboard-avoid\n```\n\n## Usage\nYou just need use this `KeyboardAvoid` on whatever you want to keep out from native keyboard view.\nIt accept `ScrollView`, `ListView`, `FlatList` and any other `View` component. There will show you 3 example.\n\n#### 1.With something in `ScrollView` or `ListView`, `FlatList`\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/lizouzt/react-native-keyboard-avoid/master/Input.gif\" width=\"375\"\u003e\n\u003c/p\u003e\n\n```js\nimport KeyboardAvoid from 'react-native-keyboard-avoid';\n\n_onFocus () {\n\tKeyboardAvoid.checkNeedScroll({\n\t    nodeRef: this.titleInput, \t\t    //TextInput ref\n\t    scrollNodeRef: this.scrollView,     //ScrollView ref\n\t    contentOffset: this.contentOffset   //ScrollView scrollOffset.y\n\t}, 'scroll', 0);\n}\n```\n\n```jsx\n\u003cScrollView \n    ref={(ref) =\u003e this.scrollView = ref}\n    style={{flex: 1}}\n    scrollEventThrottle={3}\n    onScroll={(event) =\u003e {this.contentOffset = event.nativeEvent.contentOffset.y}}\u003e\n\n    \u003cView style={{justifyContent: 'space-between', flexDirection: 'row'}}\u003e\n        \u003cTextInput\n            style={BaseStyles.textInputBase}\n            ref={(ref) =\u003e this.titleInput = ref}\n            returnKeyType={\"search\"}\n            onFocus={() =\u003e this._onFocus()}/\u003e\n        \u003cButton style={[BaseStyles.iconBase, {margin: 5, color: '#333'}]}\u003eSearch\u003c/Button\u003e\n    \u003c/View\u003e\n\u003c/ScrollView\u003e\n\nor \n\n\u003cFlatList\n    ref={(ref) =\u003e this.scrollView = ref}\n    onScroll={(event) =\u003e {this.contentOffset = event.nativeEvent.contentOffset.y;}}/\u003e\n```\n\n#### 2.With component which use position: 'absolute'\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/lizouzt/react-native-keyboard-avoid/master/View.gif\" width=\"375\"\u003e\n\u003c/p\u003e\n\n```js\nimport KeyboardAvoid from 'react-native-keyboard-avoid';\n\n_onPress () {\n\tthis.aTextInput.focus();\n\tKeyboardAvoid.checkNeedScroll({\n       nodeRef: this.footer\n   }, 'position', 0);\n}\n```\n\n```jsx\n\u003cView ref={(ref) =\u003e this.footer = ref}\n    style={{\n        width: config.width, \n        position: 'absolute', \n        bottom: 0, \n        height: 50,\n        backgroundColor: 'lightblue',\n        zIndex: 4\n    }}\u003e\n    \u003cTouchableOpacity onPress={() =\u003e this._onPress()}\u003e\n    \t\u003cText style={{color: 'white', lineHeight: 50}}\u003e浮低\u003c/Text\u003e\n    \u003c/TouchableOpacity\u003e\n\u003c/View\u003e\n```\n\n#### 3.With two components one use position and one use scroll\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/lizouzt/react-native-keyboard-avoid/master/both.gif\" width=\"375\"\u003e\n\u003c/p\u003e\n\n```js\nimport KeyboardAvoid from 'react-native-keyboard-avoid';\n\n_onPressAndFocus () {\n\tKeyboardAvoid.checkNeedScroll({\n        nodeRef: this.titleInput, \n        scrollNodeRef: this.scrollView, \n        contentOffset: this.contentOffset\n    }, 'scroll', 50);\n    KeyboardAvoid.checkNeedScroll({\n        nodeRef: this.footer\n    }, 'position');\n}\n```\n\n\n### Methods\n\n| **Method** | **Parameter** | **Description** |\n|------------|---------------|-----------------|\n| `checkNeedScroll` | `(params, type='scroll', offset=0)` | Get `ScrollResponder` |\n| `unMount` | none | unMount this handler while app view unMount |\n\n## API\n`KeyboardAvoid.checkNeedScroll(params, type='scroll', offset=0)`\n### Prame\n\n#### params {object}\n| **Prop** | **Type** | **Description** |\n|----------|----------|-----------------|\n| `nodeRef ` | Node Ref | ref of the component which need to avoid from keyboard |\n| `scrollNodeRef ` | Node Ref | ref of scroll component |\n| `contentOffset ` | Node Ref | scrolloffset.y of scroll component |\n\n#### type {string}\n| **value** | **Description** |\n|----------|----------|\n| `scroll` | Such as example 1. keyboard avoid in `ScrollView` or `ListView`, `FlatList` |\n| `position ` | Such as example 2. keyboard avoid with position |\n\n#### offset {number} \ntarget offset from the top of keyboard\n`onScroll={(event) =\u003e {this.contentOffset = event.nativeEvent.contentOffset.y}}`\n\n\n## License MIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flizouzt%2Freact-native-keyboard-avoid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flizouzt%2Freact-native-keyboard-avoid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flizouzt%2Freact-native-keyboard-avoid/lists"}