diff --git a/docs/keyboard.md b/docs/keyboard.md
index ab11d9dd716..102c6563855 100644
--- a/docs/keyboard.md
+++ b/docs/keyboard.md
@@ -9,11 +9,67 @@ title: Keyboard
The Keyboard module allows you to listen for native events and react to them, as well as make changes to the keyboard, like dismissing it.
-```jsx
+
+
+ -
+ Function Component Example
+
+ -
+ Class Component Example
+
+
+
+
+
+
+```SnackPlayer name=Keyboard%20Function%20Component%20Example
+
+import React, { useEffect } from "react";
+import { Keyboard, TextInput, StyleSheet } from "react-native";
+
+export default function Example() {
+
+ useEffect(() => {
+ Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
+ Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
+
+ // cleanup function
+ return () => {
+ Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
+ Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
+ };
+ }, []);
+
+ const _keyboardDidShow = () => {
+ alert("Keyboard Shown");
+ };
+
+ const _keyboardDidHide = () => {
+ alert("Keyboard Hidden");
+ };
+
+ return ;
+}
+
+const s = StyleSheet.create({
+ input:{
+ margin:60,
+ padding: 10,
+ borderWidth: 0.5,
+ borderRadius: 4,
+ backgroundColor: "#fff"
+ }
+})
+
+```
+
+
+
+```SnackPlayer name=Keyboard%20Class%20Component%20Example
import React, {Component} from 'react';
-import {Keyboard, TextInput} from 'react-native';
+import {Keyboard, TextInput , StyleSheet} from 'react-native';
-class Example extends Component {
+export default class Example extends Component {
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
@@ -39,11 +95,23 @@ class Example extends Component {
}
render() {
- return ;
+ return ;
}
}
+
+const s = StyleSheet.create({
+ input:{
+ margin:60,
+ padding: 10,
+ borderWidth: 0.5,
+ borderRadius: 4,
+ backgroundColor: "#fff"
+ }
+})
```
+
+
---
# Reference
@@ -62,10 +130,10 @@ This function then returns the reference to the listener.
**Parameters:**
-| Name | Type | Required | Description |
-| ------ | ------ | -------- | -------------------------------------------------------------------------------------------|
-| eventName | string | Yes | The `nativeEvent` is the string that identifies the event you're listening for. See below |
-| callback | function | Yes | The function to be called when the event fires |
+| Name | Type | Required | Description |
+| --------- | -------- | -------- | ----------------------------------------------------------------------------------------- |
+| eventName | string | Yes | The `nativeEvent` is the string that identifies the event you're listening for. See below |
+| callback | function | Yes | The function to be called when the event fires |
**nativeEvent**
@@ -92,10 +160,10 @@ Removes a specific listener.
**Parameters:**
-| Name | Type | Required | Description |
-| ------ | ------ | -------- | --------------------------------------------------------------------------------|
-| eventName | string | Yes | The `nativeEvent` is the string that identifies the event you're listening for |
-| callback | function | Yes | The function to be called when the event fires |
+| Name | Type | Required | Description |
+| --------- | -------- | -------- | ------------------------------------------------------------------------------ |
+| eventName | string | Yes | The `nativeEvent` is the string that identifies the event you're listening for |
+| callback | function | Yes | The function to be called when the event fires |
---
@@ -107,12 +175,11 @@ static removeAllListeners(eventName)
Removes all listeners for a specific event type.
-
**Parameters:**
-| Name | Type | Required | Description |
-| ------ | ------ | -------- | ----------------------------------------------------------------------|
-| eventType | string | Yes | The native event string listeners are watching which will be removed |
+| Name | Type | Required | Description |
+| --------- | ------ | -------- | -------------------------------------------------------------------- |
+| eventType | string | Yes | The native event string listeners are watching which will be removed |
---
@@ -123,3 +190,13 @@ static dismiss()
```
Dismisses the active keyboard and removes focus.
+
+---
+
+### `scheduleLayoutAnimation`
+
+```jsx
+static scheduleLayoutAnimation(event)
+```
+
+Useful for syncing TextInput (or other keyboard accessory view) size of position changes with keyboard movements.