@@ -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+
202231const 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
248293exports . 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