Skip to content

Commit

Permalink
refactor Keyboard API examples (facebook#2564)
Browse files Browse the repository at this point in the history 
* refactor Keyboard API examples

* update 0.62 docs too
  • Loading branch information
@Simek
Simek authored Mar 29, 2021
1 parent 7aaea5d commit dbb2acc
Show file tree
Hide file tree
Showing 4 changed files with 269 additions and 146 deletions.
102 changes: 66 additions & 36 deletions docs/keyboard.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ The Keyboard module allows you to listen for native events and react to them, as
<Tabs groupId="syntax" defaultValue={constants.defaultSyntax} values={constants.syntax}>
<TabItem value="functional">

```SnackPlayer name=Keyboard%20Function%20Component%20Example
import React, { useEffect } from "react";
import { Keyboard, TextInput, StyleSheet } from "react-native";
```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android
import React, { useState, useEffect } from "react";
import { Keyboard, Text, TextInput, StyleSheet, View } from "react-native";
const Example = () => {
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
Expand All @@ -32,38 +30,53 @@ const Example = () => {
};
}, []);
const _keyboardDidShow = () => {
alert("Keyboard Shown");
};
const _keyboardDidHide = () => {
alert("Keyboard Hidden");
};
return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
const [keyboardStatus, setKeyboardStatus] = useState(undefined);
const _keyboardDidShow = () => setKeyboardStatus("Keyboard Shown");
const _keyboardDidHide = () => setKeyboardStatus("Keyboard Hidden");
return (
<View style={style.container}>
<TextInput
style={style.input}
placeholder='Click here…'
onSubmitEditing={Keyboard.dismiss}
/>
<Text style={style.status}>{keyboardStatus}</Text>
</View>
);
}
const s = StyleSheet.create({
input:{
margin:60,
const style = StyleSheet.create({
container: {
flex: 1,
padding: 36
},
input: {
padding: 10,
borderWidth: 0.5,
borderRadius: 4,
backgroundColor: "#fff"
}
})
borderRadius: 4
},
status: {
padding: 10,
textAlign: "center"
}
});
export default Example;
```

</TabItem>
<TabItem value="classical">

```SnackPlayer name=Keyboard%20Class%20Component%20Example
import React, {Component} from 'react';
import {Keyboard, TextInput , StyleSheet} from 'react-native';
```SnackPlayer name=Keyboard%20Class%20Component%20Example&supportedPlatforms=ios,android
import React, { Component } from 'react';
import { Keyboard, Text, TextInput, StyleSheet, View } from 'react-native';
class Example extends Component {
state = {
keyboardStatus: undefined
};
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
Expand All @@ -80,28 +93,45 @@ class Example extends Component {
this.keyboardDidHideListener.remove();
}
_keyboardDidShow() {
alert('Keyboard Shown');
_keyboardDidShow = () => {
this.setState({ keyboardStatus: 'Keyboard Shown' });
}
_keyboardDidHide() {
alert('Keyboard Hidden');
_keyboardDidHide = () => {
this.setState({ keyboardStatus: 'Keyboard Hidden' });
}
render() {
return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
return (
<View style={style.container}>
<TextInput
style={style.input}
placeholder='Click here…'
onSubmitEditing={Keyboard.dismiss}
/>
<Text style={style.status}>
{this.state.keyboardStatus}
</Text>
</View>
)
}
}
const s = StyleSheet.create({
input:{
margin:60,
const style = StyleSheet.create({
container: {
flex: 1,
padding: 36
},
input: {
padding: 10,
borderWidth: 0.5,
borderRadius: 4,
backgroundColor: "#fff"
}
})
borderRadius: 4
},
status: {
padding: 10,
textAlign: "center"
}
});
export default Example;
```
Expand Down
109 changes: 71 additions & 38 deletions website/versioned_docs/version-0.62/keyboard.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,11 @@ The Keyboard module allows you to listen for native events and react to them, as
<Tabs groupId="syntax" defaultValue={constants.defaultSyntax} values={constants.syntax}>
<TabItem value="functional">

```SnackPlayer name=Keyboard%20Function%20Component%20Example
import React, { useEffect } from "react";
import { Keyboard, TextInput, StyleSheet } from "react-native";
export default function Example() {
```SnackPlayer name=Keyboard%20Function%20Component%20Example&supportedPlatforms=ios,android
import React, { useState, useEffect } from "react";
import { Keyboard, Text, TextInput, StyleSheet, View } from "react-native";
const Example = () => {
useEffect(() => {
Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
Expand All @@ -32,37 +30,53 @@ export default function Example() {
};
}, []);
const _keyboardDidShow = () => {
alert("Keyboard Shown");
};
const _keyboardDidHide = () => {
alert("Keyboard Hidden");
};
return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
const [keyboardStatus, setKeyboardStatus] = useState(undefined);
const _keyboardDidShow = () => setKeyboardStatus("Keyboard Shown");
const _keyboardDidHide = () => setKeyboardStatus("Keyboard Hidden");
return (
<View style={style.container}>
<TextInput
style={style.input}
placeholder='Click here…'
onSubmitEditing={Keyboard.dismiss}
/>
<Text style={style.status}>{keyboardStatus}</Text>
</View>
);
}
const s = StyleSheet.create({
input:{
margin:60,
const style = StyleSheet.create({
container: {
flex: 1,
padding: 36
},
input: {
padding: 10,
borderWidth: 0.5,
borderRadius: 4,
backgroundColor: "#fff"
}
})
borderRadius: 4
},
status: {
padding: 10,
textAlign: "center"
}
});
export default Example;
```

</TabItem>
<TabItem value="classical">

```SnackPlayer name=Keyboard%20Class%20Component%20Example
import React, {Component} from 'react';
import {Keyboard, TextInput , StyleSheet} from 'react-native';
```SnackPlayer name=Keyboard%20Class%20Component%20Example&supportedPlatforms=ios,android
import React, { Component } from 'react';
import { Keyboard, Text, TextInput, StyleSheet, View } from 'react-native';
class Example extends Component {
state = {
keyboardStatus: undefined
};
export default class Example extends Component {
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
Expand All @@ -79,28 +93,47 @@ export default class Example extends Component {
this.keyboardDidHideListener.remove();
}
_keyboardDidShow() {
alert('Keyboard Shown');
_keyboardDidShow = () => {
this.setState({ keyboardStatus: 'Keyboard Shown' });
}
_keyboardDidHide() {
alert('Keyboard Hidden');
_keyboardDidHide = () => {
this.setState({ keyboardStatus: 'Keyboard Hidden' });
}
render() {
return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
return (
<View style={style.container}>
<TextInput
style={style.input}
placeholder='Click here…'
onSubmitEditing={Keyboard.dismiss}
/>
<Text style={style.status}>
{this.state.keyboardStatus}
</Text>
</View>
)
}
}
const s = StyleSheet.create({
input:{
margin:60,
const style = StyleSheet.create({
container: {
flex: 1,
padding: 36
},
input: {
padding: 10,
borderWidth: 0.5,
borderRadius: 4,
backgroundColor: "#fff"
}
})
borderRadius: 4
},
status: {
padding: 10,
textAlign: "center"
}
});
export default Example;
```

</TabItem>
Expand Down
Loading

0 comments on commit dbb2acc

Please sign in to comment.