diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
index 9bf56b7f6a16..adca7a9bfe0d 100644
--- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
+++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js
@@ -47,22 +47,13 @@ const TextInputForm = () => {
);
};
-const CloseButton = (
- props:
- {behavior: any, setModalOpen: any} | {behavior: string, setModalOpen: any},
-) => {
+const CloseButton = (props: {setModalOpen: boolean => void}) => {
return (
-
- props.setModalOpen(false)}
- style={styles.closeButton}>
- Close
-
-
+ props.setModalOpen(false)}
+ style={styles.closeButton}>
+ Close
+
);
};
@@ -114,7 +105,7 @@ const KeyboardAvoidingViewBehaviour = () => {
-
+
@@ -140,7 +131,7 @@ const KeyboardAvoidingDisabled = () => {
enabled={false}
behavior={'height'}
style={styles.container}>
-
+
@@ -162,7 +153,7 @@ const KeyboardAvoidingVerticalOffset = () => {
keyboardVerticalOffset={20}
behavior={'padding'}
style={styles.container}>
-
+
@@ -185,7 +176,7 @@ const KeyboardAvoidingContentContainerStyle = () => {
behavior={'position'}
style={styles.container}
contentContainerStyle={styles.contentContainer}>
-
+
@@ -205,9 +196,9 @@ const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
- alignItems: 'center',
- paddingHorizontal: 20,
paddingTop: 20,
+ width: 300,
+ alignSelf: 'center',
},
contentContainer: {
paddingTop: 20,
@@ -217,13 +208,9 @@ const styles = StyleSheet.create({
borderRadius: 5,
borderWidth: 1,
height: 44,
- width: 300,
marginBottom: 20,
paddingHorizontal: 10,
},
- closeView: {
- alignSelf: 'stretch',
- },
pillStyle: {
padding: 10,
marginHorizontal: 5,
@@ -233,8 +220,7 @@ const styles = StyleSheet.create({
borderColor: 'blue',
},
closeButton: {
- flexDirection: 'row',
- justifyContent: 'flex-end',
+ alignSelf: 'flex-end',
marginVertical: 10,
padding: 10,
},
@@ -251,7 +237,7 @@ exports.examples = [
{
title: 'Keyboard Avoiding View with different behaviors',
description:
- ('Specify how to react to the presence of the keyboard. Android and iOS both interact' +
+ ('Specify how to react to the presence of the keyboard. Android and iOS both interact ' +
'with this prop differently. On both iOS and Android, setting behavior is recommended.') as string,
render(): React.Node {
return ;
@@ -260,7 +246,7 @@ exports.examples = [
{
title: 'Keyboard Avoiding View with keyboardVerticalOffset={distance}',
description:
- ('This is the distance between the top of the user screen and the react native' +
+ ('This is the distance between the top of the user screen and the React Native ' +
'view, may be non-zero in some use cases. Defaults to 0.') as string,
render(): React.Node {
return ;
@@ -268,12 +254,15 @@ exports.examples = [
},
{
title: 'Keyboard Avoiding View with enabled={false}',
+ description: 'Disables the KeyboardAvoidingView.' as string,
render(): React.Node {
return ;
},
},
{
title: 'Keyboard Avoiding View with contentContainerStyle',
+ description:
+ 'Specify the style of the content container View when behavior is set to position.' as string,
render(): React.Node {
return ;
},