From 635b6e9747fe9880805a04bf060a7e66f3352588 Mon Sep 17 00:00:00 2001 From: ahmdtalaat Date: Mon, 10 Feb 2020 18:16:41 +0200 Subject: [PATCH 1/3] added Keyboard API example using function components & hooks --- docs/keyboard.md | 75 +++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 62 insertions(+), 13 deletions(-) diff --git a/docs/keyboard.md b/docs/keyboard.md index ab11d9dd716..1e5145ace0b 100644 --- a/docs/keyboard.md +++ b/docs/keyboard.md @@ -9,7 +9,54 @@ 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 } from "react-native"; + +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 ; +} + + +``` + + + +```SnackPlayer name=Keyboard%20Class%20Component%20Example import React, {Component} from 'react'; import {Keyboard, TextInput} from 'react-native'; @@ -42,8 +89,11 @@ class Example extends Component { return ; } } + ``` + + --- # Reference @@ -62,10 +112,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 +142,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 +157,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 | --- From 8749a6681c53491351d2794d45e1670db08beac2 Mon Sep 17 00:00:00 2001 From: ahmdtalaat Date: Sun, 23 Feb 2020 00:50:11 +0200 Subject: [PATCH 2/3] added snacks to Keyboard (class & functional) Component --- docs/keyboard.md | 30 ++++++++++++++++++++++++------ 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/docs/keyboard.md b/docs/keyboard.md index 1e5145ace0b..aecafbeb751 100644 --- a/docs/keyboard.md +++ b/docs/keyboard.md @@ -25,9 +25,9 @@ The Keyboard module allows you to listen for native events and react to them, as ```SnackPlayer name=Keyboard%20Function%20Component%20Example import React, { useEffect } from "react"; -import { Keyboard, TextInput } from "react-native"; +import { Keyboard, TextInput, StyleSheet } from "react-native"; -function Example() { +export default function Example() { useEffect(() => { Keyboard.addListener("keyboardDidShow", _keyboardDidShow); @@ -48,9 +48,18 @@ function Example() { alert("Keyboard Hidden"); }; - return ; + return ; } +const s = StyleSheet.create({ + input:{ + margin:60, + padding: 10, + borderWidth: 0.5, + borderRadius: 4, + backgroundColor: "#fff" + } +}) ``` @@ -58,9 +67,9 @@ function Example() { ```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', @@ -86,10 +95,19 @@ class Example extends Component { } render() { - return ; + return ; } } +const s = StyleSheet.create({ + input:{ + margin:60, + padding: 10, + borderWidth: 0.5, + borderRadius: 4, + backgroundColor: "#fff" + } +}) ``` From 27ec6e8df4d0dc0e1969d90f61d9e4ff6e37542b Mon Sep 17 00:00:00 2001 From: ahmdtalaat Date: Fri, 28 Feb 2020 17:38:55 +0200 Subject: [PATCH 3/3] update Keyboard api --- docs/keyboard.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/docs/keyboard.md b/docs/keyboard.md index aecafbeb751..102c6563855 100644 --- a/docs/keyboard.md +++ b/docs/keyboard.md @@ -190,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.