How to prevent keyboard dismiss while touching outside in react native KeyboardAvoidingView

Question

Actually i am working on chat window. Chat window will have different type of display types like text, selection box, dropdown, etc.So now i have taken keyboardavoidingview as root view and inside this i have used flatlist to render different types.But if i click on any item keyboard is closing in ios simulator. How to handle this one.

code:

<SafeAreaView style={{flex: 1}} forceInset={{top: 'never'}}>

    <HeaderComponent></HeaderComponent>

    <KeyboardAvoidingView behavior= {(Platform.OS === 'ios')? "padding" : null}
                          behavior="height"
                          style={{flex: 1}}>

        <View style={{flex: 1, backgroundColor: '#F2F2F2'}}>
            <FlatList
                ref='lst'
                keyExtractor={(item, index) => index.toString()}
            />


        </View>
</KeyboardAvoidingView>
</SafeAreaView>

I think you can try this package instead : https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view — amrs-tech, Oct 07 '19 at 08:06

score 1 · Accepted Answer · answered Oct 07 '19 at 08:09

1

I believe this is what you need

keyboardShouldPersistTaps and keyboardDismissMode

    <FlatList
      ref='lst'
      keyExtractor={(item, index) => index.toString()}
      keyboardShouldPersistTaps='always'
      keyboardDismissMode='on-drag'
     />

Note that Flatlist inherits the scrollview props. That's why this props will work on a flat list too.

EDIT :

Sorry Possible duplicate of this Prevent keyboard dismiss. React native

answered Oct 07 '19 at 08:09

keysl

2,127
1
12
16

i didn't check that flatlist keyboardShouldPersistTaps property – skyshine Oct 07 '19 at 08:16
its okay there's a small font text there that says it inherits scrollview. It's easy to miss. I'm a victim of that too in the past lol – keysl Oct 07 '19 at 08:17

How to prevent keyboard dismiss while touching outside in react native KeyboardAvoidingView

1 Answers1