KeyboardAvoidingView dont working when horizontal FlatList

[leruse4ka]

The keyboard closes input when FlatList horizontal=true nested within FlatList horizontal=false.. Only IOS.

Repo for reproducing

const Example = () => {
  const renderExample = ({item, index}) => <View style={{
    padding: 10
  }}
  key={index}>
    <TextInput defaultValue={index}
      value={item.value}
      style={{
        width: 80,
        height: 40,
        backgroundColor: 'white',
        color: 'black'
      }} />
  </View>
  return <KeyboardAvoidingView behavior='padding' style={{flex: 1, height: '100%', width: '100%'}}>
    <FlatList data={[{value: 1}, {value: 2}, {value: 3}, {value: 4}, {value: 5}]}
      contentContainerStyle={{marginTop: '80%'}}
      renderItem={renderExample}
      ListFooterComponent={() => <FlatList horizontal={true} data={[6, 7, 8, 9, 10]} renderItem={renderExample} />}
    />
  </KeyboardAvoidingView>
}

Expected behavior
The keyboard does not close the input

Video

2026-04-15.10.29.27.mov

Smartphone (please complete the following information):

• Desktop OS: [MacOS 26.4]
• Device: [Simulator iPhone 17]
• OS: [iOS 26.4]
• RN version: [0.82.1]
• RN architecture: [new]
• JS engine: [Hermes]
• Library version: [1.21.5]

[kirillzyusko]

Hey @leruse4ka

I don't think KeyboardAvoidingView is a good solution for such kind of layout. Have you considered to use KeyboardAwareScrollView instead?

The problem with current layout is that you have a very big margin (marginTop: '80%') and KeyboardAvoidingView may not shrink it properly. Please let me know how KeyboardAwareScrollView works for you 👀

[leruse4ka]

Hi, @kirillzyusko! This indentation was added to demonstrate that the keyboard is overlapping the input. You can add items to the data to remove the marginTop; the keyboard will continue to hide the input.

[leruse4ka]

I managed to fix this behavior locally by removing KeyboardAvoidingView and adding renderScrollComponent={(props) => KeyboardAwareScrollView {...props} />} to FlatList, but the behavior is still strange and I decided to report it.

[kirillzyusko]

@leruse4ka I've tried to explain in https://youtu.be/W_Y0Y18aFV8?t=170 why KeyboardAvoidingView is not good solution for handling large forms. The correct solution is to use KeyboardAwareScrollView which was designed to work with such kind of layout 🤷‍♂️

but the behavior is still strange and I decided to report it

Just to confirm: strange behavior is when you use KeyboardAvoidingView or KeyboardAwareScrollView?

[leruse4ka]

@kirillzyusko when use KeyboardAvoidingView

[kirillzyusko]

Okay, then I'm going to close this issue 🤞

Even if I fix this bug in KeyboardAvoidingView you may discover more issue and the proper solution is to use KeyboardAwareScrollView for handling such layout 👍

[leruse4ka]

Okay, thanks, we'll try!)