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 +
+ +
+ + + +```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.