Skip to content

Commit e91e15f

Browse files
committed
test: add KeyboardAvoidingView multiline repro
1 parent 82536f2 commit e91e15f

1 file changed

Lines changed: 53 additions & 0 deletions

File tree

packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
KeyboardAvoidingView,
2121
Modal,
2222
Pressable,
23+
ScrollView,
2324
StyleSheet,
2425
Text,
2526
TextInput,
@@ -199,6 +200,34 @@ const KeyboardAvoidingContentContainerStyle = () => {
199200
);
200201
};
201202

203+
const KeyboardAvoidingMultilineTextInput = () => {
204+
const [message, setMessage] = useState('');
205+
206+
return (
207+
<KeyboardAvoidingView
208+
behavior="padding"
209+
keyboardVerticalOffset={64}
210+
style={styles.multilineContainer}>
211+
<ScrollView
212+
contentContainerStyle={styles.multilineContent}
213+
keyboardShouldPersistTaps="handled">
214+
{Array.from({length: 10}, (_, index) => (
215+
<Text key={index} style={styles.messageText}>
216+
Message {index + 1}
217+
</Text>
218+
))}
219+
<TextInput
220+
multiline
221+
onChangeText={setMessage}
222+
placeholder="Type something here..."
223+
style={styles.multilineTextInput}
224+
value={message}
225+
/>
226+
</ScrollView>
227+
</KeyboardAvoidingView>
228+
);
229+
};
230+
202231
const styles = StyleSheet.create({
203232
outerContainer: {
204233
flex: 1,
@@ -243,6 +272,22 @@ const styles = StyleSheet.create({
243272
fontWeight: '500',
244273
color: 'blue',
245274
},
275+
multilineContainer: {
276+
flex: 1,
277+
},
278+
multilineContent: {
279+
padding: 12,
280+
},
281+
messageText: {
282+
fontSize: 20,
283+
padding: 40,
284+
},
285+
multilineTextInput: {
286+
borderRadius: 5,
287+
borderWidth: 1,
288+
minHeight: 96,
289+
padding: 8,
290+
},
246291
});
247292

248293
exports.title = 'KeyboardAvoidingView';
@@ -279,4 +324,12 @@ exports.examples = [
279324
return <KeyboardAvoidingContentContainerStyle />;
280325
},
281326
},
327+
{
328+
title: 'Keyboard Avoiding View with multiline TextInput in ScrollView',
329+
description:
330+
'Reproduces the nested ScrollView and multiline TextInput layout from issue #16826.',
331+
render(): React.Node {
332+
return <KeyboardAvoidingMultilineTextInput />;
333+
},
334+
},
282335
] as Array<RNTesterModuleExample>;

0 commit comments

Comments
 (0)