CODEWITHSUNDEEP
react-nativereact-native-flatlisttextinput
Anurag Chutani
Anurag Chutani

Reputation: 595

Issue with TextInput element in the bottom of a FlatList

TextInputs at the bottom of the screen in a FlatList automatically and immediately dismiss the keyboard on focus, making it impossible to write anything in it. The issue is reproducible easily on a blank react-native init project. I tested it in Nexus 5x simulator and real device. I reproduce the bug every time on 0.61.

Related to https://github.com/facebook/react-native/issues/13745

Upvotes: 3

Views: 1568

Answers (3)

Prashant Jajal
Prashant Jajal

Reputation: 3627

Just add one props in your FlatList as below:

<FlatList
     keyboardDismissMode={'none'}
     .....
</FlatList>

Upvotes: 1

Vikas Prasad
Vikas Prasad

Reputation: 3433

For me the problem was two folds. First off I was doing the mistake of passing the function instead of passing the element. So, I followed @br jangid answer and just called my function. So this:

ListFooterComponent={renderSuggestionInput}

got changed to this:

ListFooterComponent={renderSuggestionInput()}

The above fix solved the problem on my Android device, but it was still breaking on other Android device, so I had to add removeClippedSubviews={false} to my FlatList, which then solved the problem on the other devices too.

This is the complete code for my FlatList:

            <FlatList
                ListHeaderComponent={renderInstructions()}
                ListHeaderComponentStyle={styles.instructionContainer}
                data={features}
                renderItem={renderFeature}
                keyExtractor={(feature) => feature.id.toString()}
                ListFooterComponent={renderSuggestionInput()}
                ListFooterComponentStyle={styles.suggestionContainer}
                removeClippedSubviews={false}
            />

Upvotes: 2

br jangid
br jangid

Reputation: 11

Just don't give the component reference to the Flatlist footer because when we update state of the component then arrow function creates a new reference that's why TextInput loses it's focus. Just return direct View to the Flatlist footer.

<FlatList
  data={...}
  ListFooterComponent={renderYourFooter()}
/>

or

<FlatList
  data={...}
  ListFooterComponent={<View>
    <TextInput/>
  </View>}
/>

Upvotes: 1

Related Questions