Add "KeyboardExample" to RNTester

Summary:
This adds a simple debug UI to verify the keyboard events "keyboardDidShow" and "keyboardWillShow"

Changelog:
[Internal][Added] - Add "KeyboardExample" to RNTester

Reviewed By: cortinico

Differential Revision: D38500869

fbshipit-source-id: 99913a05849a7dd27dfdee2d622058b9c2604a7f

packages/rn-tester/js/examples/Keyboard/KeyboardExample.js

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+'use strict';
+
+import type {
+  RNTesterModule,
+  RNTesterModuleExample,
+} from '../../types/RNTesterTypes';
+import type {KeyboardEvent} from 'react-native/Libraries/Components/Keyboard/Keyboard';
+
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import {Keyboard, StyleSheet, Text, View} from 'react-native';
+
+type KeybpardEventViewerProps = {
+  showEvent: 'keyboardWillShow' | 'keyboardDidShow',
+  hideEvent: 'keyboardWillHide' | 'keyboardDidHide',
+};
+
+const KeyboardEventViewer = (props: KeybpardEventViewerProps): React.Node => {
+  const {showEvent, hideEvent} = props;
+  const [isShown, setIsShown] = useState(false);
+  const [lastEvent, setLastEvent] = useState<?KeyboardEvent>();
+
+  useEffect(() => {
+    const subscription = Keyboard.addListener(showEvent, ev => {
+      setIsShown(true);
+      setLastEvent(ev);
+    });
+    return () => subscription.remove();
+  }, [showEvent]);
+
+  useEffect(() => {
+    const subscription = Keyboard.addListener(hideEvent, ev => {
+      setIsShown(false);
+      setLastEvent(ev);
+    });
+    return () => subscription.remove();
+  }, [hideEvent]);
+
+  return (
+    <View>
+      <Text>
+        <Text>Keyboard is </Text>
+        {isShown ? (
+          <Text style={styles.openText}>open</Text>
+        ) : (
+          <Text style={styles.closeText}>closed</Text>
+        )}
+      </Text>
+      <View style={styles.eventBox}>
+        <Text>
+          {lastEvent
+            ? JSON.stringify(lastEvent, null, 2)
+            : 'No events observed'}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const keyboardWillShowHideExample: RNTesterModuleExample = {
+  title: 'keyboardWillShow / keyboardWillHide',
+  platform: 'ios',
+  render: () => (
+    <KeyboardEventViewer
+      showEvent="keyboardWillShow"
+      hideEvent="keyboardWillHide"
+    />
+  ),
+};
+
+const keyboardDidShowHideExample: RNTesterModuleExample = {
+  title: 'keyboardDidShow / keyboardDidHide',
+  render: () => (
+    <KeyboardEventViewer
+      showEvent="keyboardDidShow"
+      hideEvent="keyboardDidHide"
+    />
+  ),
+};
+
+const styles = StyleSheet.create({
+  closeText: {
+    color: 'red',
+  },
+  openText: {
+    color: 'green',
+  },
+  eventBox: {
+    marginTop: 10,
+    padding: 5,
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+});
+
+const KeyboardExample: RNTesterModule = {
+  title: 'Keyboard',
+  description: 'Demonstrates usage of the "Keyboard" static API',
+  documentationURL: 'https://reactnative.dev/docs/keyboard',
+  category: 'Basic',
+  examples: [keyboardWillShowHideExample, keyboardDidShowHideExample],
+};
+
+export default KeyboardExample;

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -184,6 +184,11 @@ const APIs: Array<RNTesterModuleInfo> = [
     category: 'UI',
     module: require('../examples/Dimensions/DimensionsExample'),
   },
+  {
+    key: 'Keyboard',
+    category: 'Basic',
+    module: require('../examples/Keyboard/KeyboardExample').default,
+  },
   {
     key: 'LayoutEventsExample',
     category: 'UI',

packages/rn-tester/js/utils/RNTesterList.ios.js

@@ -231,6 +231,11 @@ const APIs: Array<RNTesterModuleInfo> = [
     module: require('../examples/Dimensions/DimensionsExample'),
     supportsTVOS: true,
   },
+  {
+    key: 'Keyboard',
+    module: require('../examples/Keyboard/KeyboardExample').default,
+    supportsTVOS: true,
+  },
   {
     key: 'LayoutAnimationExample',
     module: require('../examples/Layout/LayoutAnimationExample'),