React Native "keyboardDismissMode" at FlatList

Question

Is there any possibility to prevent the keyboard from dismissing when scrolling a FlatList?

When using a ScrollView setting the prop "keyboardDismissMode" to "none" is the solution to this problem, but this doesn't work for me at a FlatList...

I use the FlatList inside a self-made component, that is in a Stack-Navigator, while there is a focussed TextInput in its header. I render the FlatList like this:

<View style={{flex: 1}}>
  <FlatList 
    style={{flex: 1}}
    data={this.props.data}
    keyExtractor={(item, index) => item.id}
    renderItem={this.renderItem}
  />
</View>

The renderItem() function:

renderItem = ({item, index}) => (
  <TouchableHighlight
    style={{paddingVertical: 10}}
    onPress={() => {
      this.props.onChooseItem(item);
    }}
  >
    <Text numberOfLines={1} >
      {item.text}
    </Text>
  </TouchableHighlight>
)

Can you post the code for how you're rendering the FlatList component in question? — Pat Needham, Jun 22 '18 at 21:49
Do my changes in the question help? I have added how and where I render the FlatList. — Paul, Jun 23 '18 at 07:38

score 1 · Answer 1 · answered Mar 12 '21 at 15:31

The docs at the beginning of the reference section says that FlatList "Inherits ScrollView Props, unless it is nested in another FlatList of same orientation."
So I think you can just do use that keyboardDismissMode without encapsulation in a scrollview.

score 1 · Answer 2 · answered Jan 13 '22 at 07:33

1

No need of scrollview inside flatlist it will create performance issue.

just add onScrollBeginDrag={Keyboard.dismiss} in flatlist. it will work in android as well iOS while keyboardDismissMode='on-drag' will work only in iOS

answered Jan 13 '22 at 07:33

Rajesh N

6,198
2
47
58

suther · Accepted Answer · 2022-03-10T12:55:46.327

-1

You might think about to encapsulate your FlatList in a ScrollView?

Even if this seems to solve the issue, it's NOT a recommended way!

That's because if it force rerendering the whole flatlist, each time you scroll the screen.

You might better try a component like react-native-keyboard-aware-scroll-view

I've found this article with some alternate Ideas to fix it:
How to use KeyboardAvoidingView with FlatList?

Check: https://facebook.github.io/react-native/docs/scrollview#keyboarddismissmode

edited Mar 10 '22 at 12:55

answered Feb 15 '19 at 07:49

suther

12,600
4
62
99

1

It was a bad way for that: https://forums.expo.io/t/warning-virtualizedlists-should-never-be-nested-inside-plain-scrollviews-with-the-same-orientation-use-another-virtualizedlist-backed-container-instead/31361/9 – A. Amini Apr 26 '20 at 10:51
2

FlatList inside a ScrollView is a bad idea. Just rendering the required component without the FlatList will give the same result. – tipos Jul 27 '20 at 19:07
Since FlatList inherits ScrollView props, can't he just avoid this encapsulation and use the desired prop directly from the flatlist? See the link in my answer. I tried it with the `onScrollBeginDrag` property and it works – rfii Mar 12 '21 at 15:33

React Native "keyboardDismissMode" at FlatList

3 Answers3

Linked