{"id":16453737,"url":"https://github.com/vonovak/react-native-keyboard-utils","last_synced_at":"2026-05-11T13:38:54.338Z","repository":{"id":145913421,"uuid":"160255926","full_name":"vonovak/react-native-keyboard-utils","owner":"vonovak","description":"Simple components for common use cases with keyboard","archived":false,"fork":false,"pushed_at":"2019-02-06T10:05:57.000Z","size":9,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-26T20:43:10.847Z","etag":null,"topics":["keyboard","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vonovak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-12-03T21:25:01.000Z","updated_at":"2021-12-28T18:36:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"96f8b0ab-d1da-491a-ba48-3e7d11c31706","html_url":"https://github.com/vonovak/react-native-keyboard-utils","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/vonovak/react-native-keyboard-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-keyboard-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-keyboard-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-keyboard-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-keyboard-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vonovak","download_url":"https://codeload.github.com/vonovak/react-native-keyboard-utils/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonovak%2Freact-native-keyboard-utils/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32897657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-10T13:40:02.631Z","status":"online","status_checked_at":"2026-05-11T02:00:05.975Z","response_time":120,"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":["keyboard","react-native"],"created_at":"2024-10-11T10:16:38.075Z","updated_at":"2026-05-11T13:38:54.319Z","avatar_url":"https://github.com/vonovak.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-native-keyboard-utils\n\nThis is a simple package that offers some useful utility components related to keyboard.\n\nPlease note this is an experiment.\n\n### Installation\n\n`yarn add react-native-keyboard-utils`\n\n### Usage\n\n`import { HideWithKeyboard, ShowWithKeyboard, KeyboardListener, withKeyboardState } from 'react-native-keyboard-utils';`\n\nSee example at the bottom.\n\n#### `ShowWithKeyboard`\n\nUse this component to render content when keyboard is shown.\n\n#### `HideWithKeyboard`\n\nUse this component to hide content when keyboard is shown.\n\n#### `KeyboardListener`\n\nUse this component to register for keyboard events. The component handles event registration and cleanup for you.\n\nSupported props are the following callbacks which will be called when the corresponding event happens:\n\n- `onWillShow`\n- `onWillHide`\n- `onDidShow`\n- `onDidHide`\n- `onWillChangeFrame`\n- `onDidChangeFrame`\n\n#### `withKeyboardState`\n\nA HOC that will pass a `isKeyboardShown` prop to the wrapped component. You can use it to react to keyboard state, eg: `const YourComponentThatReactsToKeyboard = withKeyboardState(YourComponent);`. `ShowWithKeyboard` and `HideWithKeyboard` are implemented using this HOC.\n\nIt accepts two props of type string: `keyboardShownEvent` and `keyboardHiddenEvent`, which are the names of events that the component will consider as \"shown event\" and \"hidden event\". By default, those values are (keep in mind `keyboardWill*` events are not supported on android):\n\n```js\nios: {\n  keyboardShownEvent: 'keyboardWillShow',\n  keyboardHiddenEvent: 'keyboardWillHide',\n},\nandroid: {\n  keyboardShownEvent: 'keyboardDidShow',\n  keyboardHiddenEvent: 'keyboardDidHide',\n},\n```\n\nThe HOC forwards the `ref` to the wrapped component.\n\n### Example\n\n```js\nimport { HideWithKeyboard, ShowWithKeyboard, KeyboardListener } from 'react-native-keyboard-utils';\n\nexport default class App extends React.Component {\n  state = {\n    text: 'type here',\n  };\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cTextInput\n          style={{ height: 50, width: 190, backgroundColor: 'pink' }}\n          value={this.state.text}\n          onChangeText={text =\u003e this.setState({ text })}\n        /\u003e\n        \u003cKeyboardListener\n          onDidShow={event =\u003e {\n            // do something\n          }}\n        /\u003e\n        \u003cShowWithKeyboard\u003e\n          \u003cText\u003ethis is *shown* when the keyboard is shown\u003c/Text\u003e\n        \u003c/ShowWithKeyboard\u003e\n        \u003cHideWithKeyboard\u003e\n          \u003cText\u003ethis is *hidden* when the keyboard is shown\u003c/Text\u003e\n        \u003c/HideWithKeyboard\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#fff',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});\n```\n\n### License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonovak%2Freact-native-keyboard-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvonovak%2Freact-native-keyboard-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonovak%2Freact-native-keyboard-utils/lists"}