From 86bf2dd09c12a7688e7757f2aa823ec2a4e151d2 Mon Sep 17 00:00:00 2001 From: Jason Zheng Date: Wed, 9 Sep 2026 17:18:53 -0700 Subject: [PATCH 1/3] Update descriptions in KeyboardAvoidingViewExample (#58430) Summary: In the RNTester KeyboardAvoidingView example, fix minor spacing issues and add descriptions for "Keyboard Avoiding View with enabled={false}" and "Keyboard Avoiding View with contentContainerStyle". Changelog: [Internal] Differential Revision: D119204437 --- .../KeyboardAvoidingView/KeyboardAvoidingViewExample.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js index 9bf56b7f6a1..dc197bcca3d 100644 --- a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js +++ b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js @@ -251,7 +251,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 +260,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 +268,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 ; }, From 3d131b53ba8055f798ea1b25ce219b7b52b676dd Mon Sep 17 00:00:00 2001 From: Jason Zheng Date: Wed, 9 Sep 2026 17:18:53 -0700 Subject: [PATCH 2/3] Fix CloseButton alignment in KeyboardAvoidingViewExample (#58431) Summary: The RNTester KeyboardAvoidingView example had alignment issues with the close button on top of the example form. When KeyboardAvoidingView's behavior was toggled to "position", a small amount of right padding is added to the close button, making it appear non-flush with the right edge of the form. This impacted both the "Keyboard Avoiding View with different behaviors" screen and the "Keyboard Avoiding View with contentContainerStyle" screen. Changelog: [Internal] Differential Revision: D119204438 --- .../KeyboardAvoidingViewExample.js | 40 ++++++------------- 1 file changed, 13 insertions(+), 27 deletions(-) diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js index dc197bcca3d..adca7a9bfe0 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, }, From 9c0bbf25b22f9cf16191ee2e7706701e6d4e7761 Mon Sep 17 00:00:00 2001 From: Jason Zheng Date: Wed, 9 Sep 2026 17:18:53 -0700 Subject: [PATCH 3/3] Add ScrollView example in KeyboardAvoidingViewExample (#58432) Summary: Add a new RNTester example in KeyboardAvoidingView for using the component with a ScrollView. This reproduces the issue raised in [#16826](https://github.com/react/react-native/issues/16826) where keyboard avoiding behavior fails for multi-line text fields in a ScrollView on iOS. As this is a common use case, the example acts as a reference to show intended behavior and prevent future regressions. Changelog: [Internal] Differential Revision: D119204439 --- .../KeyboardAvoidingViewExample.js | 159 +++++++++++++----- 1 file changed, 116 insertions(+), 43 deletions(-) diff --git a/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js b/packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js index adca7a9bfe0..c793d437083 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, @@ -57,54 +58,56 @@ const CloseButton = (props: {setModalOpen: boolean => void}) => { ); }; +type KeyboardAvoidingBehavior = 'padding' | 'position' | 'height'; + +const BEHAVIORS: Array = [ + 'padding', + 'position', + 'height', +]; + +const BehaviorPicker = (props: { + behavior: KeyboardAvoidingBehavior, + setBehavior: KeyboardAvoidingBehavior => void, +}) => { + return ( + + {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 - - - + @@ -189,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, @@ -204,13 +247,34 @@ const styles = StyleSheet.create({ 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, + minHeight: 44, marginBottom: 20, paddingHorizontal: 10, }, + multilineTextInput: { + minHeight: 88, + paddingVertical: 10, + textAlignVertical: 'top', + }, pillStyle: { padding: 10, marginHorizontal: 5, @@ -267,4 +331,13 @@ exports.examples = [ 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;