diff --git a/packages/rn-tester/js/examples/Keyboard/KeyboardExample.js b/packages/rn-tester/js/examples/Keyboard/KeyboardExample.js new file mode 100644 index 00000000000000..bd4bc19f4e85a1 --- /dev/null +++ b/packages/rn-tester/js/examples/Keyboard/KeyboardExample.js @@ -0,0 +1,94 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +"use strict"; + +import React, { useState } from "react"; +import { StyleSheet, Text, View, Keyboard, TextInput } from "react-native"; + +const EventListenerExample = () => { + console.log("Attaching Listeners"); + const [lastEvent, setLastEvent] = useState("Waiting for event"); + + Keyboard.addListener("keyboardWillShow", () => { + setLastEvent("keyboardWillShow"); + }); + Keyboard.addListener("keyboardDidShow", () => { + setLastEvent("keyboardDidShow"); + }); + Keyboard.addListener("keyboardWillHide", () => { + setLastEvent("keyboardWillHide"); + }); + Keyboard.addListener("keyboardDidHide", () => { + setLastEvent("keyboardDidHide"); + }); + Keyboard.addListener("keyboardWillChangeFrame", () => { + setLastEvent("keyboardWillChangeFrame"); + }); + Keyboard.addListener("keyboardDidChangeFrame", () => { + setLastEvent("keyboardDidChangeFrame"); + }); + + return ( + + + Last Event : {lastEvent} + + ); +}; + +const KeyboardDismissExample = () => { + return ( + + { + setTimeout(() => { + Keyboard.dismiss(); + }, 2 * 1000); + }} + /> + + ); +}; + +const styles = StyleSheet.create({ + input: { + margin: 10, + padding: 10, + borderWidth: 0.5, + backgroundColor: "#fff", + }, +}); + +exports.title = "Keyboard"; +exports.description = + "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."; +exports.examples = [ + { + title: "Listening for keyboard events", + description: + "The following example shows the events as they are emitted by the keyboard api.", + render: () => , + }, + { + title: "Dismiss API", + description: + "The dismiss api is used to dismiss the active keyboard on screen. This example automatically closes the keyboard after 2 seconds for demonstration", + render: () => , + }, +]; + +exports.android = true; +exports.ios = true; diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index c3afb2b83df1c9..f4ef197f37a3a8 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -177,6 +177,10 @@ const APIExamples: Array = [ key: 'Dimensions', module: require('../examples/Dimensions/DimensionsExample'), }, + { + key: 'Keyboard', + module: require('../examples/Keyboard/KeyboardExample'), + }, { key: 'LayoutEventsExample', module: require('../examples/Layout/LayoutEventsExample'),