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 ; },