added Keyboard API example using function components & hooks

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
+<div class="toggler">
+  <ul role="tablist" class="toggle-syntax">
+    <li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
+      Function Component Example
+    </li>
+    <li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
+      Class Component Example
+    </li>
+  </ul>
+</div>
+
+<block class="functional syntax" />
+
+```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 <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
+}
+
+const s = StyleSheet.create({
+   input:{
+    margin:60,
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+    backgroundColor: "#fff"
+   }
+})
+
+```
+
+<block class="classical syntax" />
+
+```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 <TextInput onSubmitEditing={Keyboard.dismiss} />;
+    return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
   }
 }
+
+const s = StyleSheet.create({
+   input:{
+    margin:60,
+    padding: 10,
+    borderWidth: 0.5,
+    borderRadius: 4,
+    backgroundColor: "#fff"
+   }
+})
 ```
 
+<block class="endBlock syntax" />
+
 ---
 
 # 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.