Can't scroll Flatlist smoothly when outfocused somewhere else

Question

I've built an app (you can see a screenShot of it in the following):

At first, my problem was that when I focused on the search input so the keyboard would appear, but I could only dismiss the keyboard by touching the Flatlist and not the area around the search input. So that I added the following code:

const DismissKeyboard = ({ children }) => (
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    {children}
  </TouchableWithoutFeedback>
);

....and wrapping the whole XJS content of render () inside of <DismissKeyboard>, in doing so I completely resolved the problem of dismissing the keyboard (I mean after this I can now dismiss the keyboard by touching anywhere of the view of this page), but there after I've got another problem. The current problem can be reproduced by the following steps:

• I've just rendered the page, everything looks fine & cool (just the beginning)

• I can easily scroll the flatlist smoothly

• Since for the first time that we render it's focused on the search input, keyboard is appeared, so in order to see the Flatlist behind it completely, should dismiss the keyboard ...

• so I outFocus by touching somewhere else in the page

• successfully the keyboard dismisses

• but Now I can't scroll the Flatlist smoothly

• but if I focus on the search input again I'll be able to scroll the Flatlist with no problem

****Note**** If I dismiss the keyboard by clicking the back button of the mobile I won't face the problem but in real world and considering the user experience the user expect that by outFocusing somewhere ( to dismiss the keyboard) should be able to scroll the Flatlist without any problems.

What I've tried:

• wrapping the Flatlist inside ScrollView ==> // no change :/

• giving the style of {{ flex: 1 }} to Flatlist ==> // no change :/

If you help me in any way, it would be appreciated

Answer 1

OK, I found 2 ways to solve this issue (the 1st solution is recommended)::

Solution 1

I recognized that TouchableWithoutFeedback has side-effects on FlatList scroll, because you're covering the whole view by TouchableWithoutFeedback so you're ganna have problems touching the FlatList, hence the reason you cannot scroll the FlatList smoothly. So I decided to remove the TouchableWithoutFeedback and used ScrollView instead::

render () {

     <ScrollView keyboardShouldPersistTaps='handled'>
       .
       . // else stuff & components
       .
       <View style={{ width: '100%', flex: 1 }}>
          <Flatlist
             .
             . // Flatlist attributes go here
             .
           />
       </View>

     </ScrollView>

wait! it's not finished yet! you'll have nested scroll so that you can scroll all the page (because of ScrollView) but with no height limitation for FlatList. I mean you will see all the data items of FlatList by scrolling the page and not the FlatList, to handle the problem you should add the attribute nestedScrollEnabled={true} to theFlatList`::

render () {

     <ScrollView keyboardShouldPersistTaps='handled'>
       .
       . // else stuff & components
       .
       <View style={{ width: '100%', flex: 1 }}>
          <Flatlist
             nestedScrollEnabled={true}
             keyboardShouldPersistTaps='always'
             .
             . // Flatlist attributes go here
             .
           />
       </View>

     </ScrollView>

then you can enjoy your code B-)

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Solution 2

As I said in the 1st solution TouchableWithoutFeedback has side-effects on Flatlist scroll, so I tried using TouchableOpacity instead (because TouchableWithoutFeedback has more delay than TouchableOpacity),If so you TouchableOpacity with the activeOpacity={1}, but this time I covered only the search TextInput (so I can handle the empty area around the search input to dismiss the keyboard without anymore or less side effects on the Flatlist), and for the FlatList itself I used onPress for the whole each item row => onPress={() => Keyboard.dismiss()}

I can somehow get the desired result but I prefer & recommend the 1st Solution over this solution. Because the 2nd solution is not that much clean or readable as much as the 1st one (you should cover and handle taps for each component separately. Besides the 1st solution is more easy & professional to developed.