diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js index 9bf56b7f6a16..c793d4370830 100644 --- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js +++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js @@ -20,6 +20,7 @@ import { KeyboardAvoidingView, Modal, Pressable, + ScrollView, StyleSheet, Text, TextInput, @@ -47,74 +48,67 @@ 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 + + ); +}; + +type KeyboardAvoidingBehavior = 'padding' | 'position' | 'height'; + +const BEHAVIORS: Array = [ + 'padding', + 'position', + 'height', +]; + +const BehaviorPicker = (props: { + behavior: KeyboardAvoidingBehavior, + setBehavior: KeyboardAvoidingBehavior => void, +}) => { return ( - props.setModalOpen(false)} - style={styles.closeButton}> - Close - + style={{ + flexDirection: 'row', + justifyContent: 'center', + }}> + {BEHAVIORS.map(behavior => { + const selected = props.behavior === behavior; + return ( + props.setBehavior(behavior)} + style={[ + styles.pillStyle, + {backgroundColor: selected ? 'blue' : 'white'}, + ]}> + + {behavior} + + + ); + })} ); }; const KeyboardAvoidingViewBehaviour = () => { const [modalOpen, setModalOpen] = useState(false); - const [behavior, setBehavior] = useState('padding'); + const [behavior, setBehavior] = useState('padding'); return ( - {/* $FlowFixMe[incompatible-type] Natural Inference rollout. See - * https://fburl.com/workplace/6291gfvu */} - - setBehavior('padding')} - style={[ - styles.pillStyle, - {backgroundColor: behavior === 'padding' ? 'blue' : 'white'}, - ]}> - - Padding - - - setBehavior('position')} - style={[ - styles.pillStyle, - {backgroundColor: behavior === 'position' ? 'blue' : 'white'}, - ]}> - - Position - - - setBehavior('height')} - style={[ - styles.pillStyle, - {backgroundColor: behavior === 'height' ? 'blue' : 'white'}, - ]}> - - Height - - - - + + @@ -140,7 +134,7 @@ const KeyboardAvoidingDisabled = () => { enabled={false} behavior={'height'} style={styles.container}> - + @@ -162,7 +156,7 @@ const KeyboardAvoidingVerticalOffset = () => { keyboardVerticalOffset={20} behavior={'padding'} style={styles.container}> - + @@ -185,7 +179,7 @@ const KeyboardAvoidingContentContainerStyle = () => { behavior={'position'} style={styles.container} contentContainerStyle={styles.contentContainer}> - + @@ -198,6 +192,46 @@ const KeyboardAvoidingContentContainerStyle = () => { ); }; +const KeyboardAvoidingScrollView = () => { + const [modalOpen, setModalOpen] = useState(false); + const [behavior, setBehavior] = useState('padding'); + return ( + + + + + + + + + {Array.from({length: 10}, (_, index) => ( + + Item {index + 1} + + ))} + + + + + + + setModalOpen(true)}> + Open Example + + + + ); +}; + const styles = StyleSheet.create({ outerContainer: { flex: 1, @@ -205,24 +239,41 @@ const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', - alignItems: 'center', - paddingHorizontal: 20, paddingTop: 20, + width: 300, + alignSelf: 'center', }, contentContainer: { paddingTop: 20, backgroundColor: '#abdebf', }, + scrollViewContainer: { + flex: 1, + paddingTop: 100, + }, + scrollViewContent: { + paddingBottom: 60, + paddingHorizontal: 20, + }, + fillerItem: { + backgroundColor: '#eeeeee', + borderRadius: 8, + paddingVertical: 16, + paddingHorizontal: 12, + marginBottom: 20, + alignItems: 'center', + }, textInput: { borderRadius: 5, borderWidth: 1, - height: 44, - width: 300, + minHeight: 44, marginBottom: 20, paddingHorizontal: 10, }, - closeView: { - alignSelf: 'stretch', + multilineTextInput: { + minHeight: 88, + paddingVertical: 10, + textAlignVertical: 'top', }, pillStyle: { padding: 10, @@ -233,8 +284,7 @@ const styles = StyleSheet.create({ borderColor: 'blue', }, closeButton: { - flexDirection: 'row', - justifyContent: 'flex-end', + alignSelf: 'flex-end', marginVertical: 10, padding: 10, }, @@ -251,7 +301,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 +310,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,14 +318,26 @@ 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 ; }, }, + { + title: 'Keyboard Avoiding View with ScrollView', + description: + ('A ScrollView with filler content and TextInputs at the bottom inside the scrollable content. ' + + 'TextInputs should still be visible when focused.') as string, + render(): React.Node { + return ; + }, + }, ] as Array;