React Native FlatList not scrolling to end

Question

I've got (what I thought was) a simple FlatList which renders a list of Cards (code below)

Problem: the list renders, but won't scroll to fully display the last element in the list, OR to the content below the FlatList

What I've tried: basically everything in related SO questions:

Removing ALL styling
Wrapping the FlatList in a View or a ScrollView or both
Adding style={{flex: 1}} to the FlatList or wrappers (this causes **ALL* content to disappear)

Any ideas?

<FlatList
        data={props.filteredProducts}
        renderItem={({item}) => (
          <TouchableOpacity onPress={() => props.addItemToCart(item)}>
            <Card
              featuredTitle={item.key}
              image={require('../assets/icon.png')}
            />
          </TouchableOpacity>
        )}
        keyExtractor={item => item.key}
        ListHeaderComponent={
          <SearchBar />
        }
      />
...
<Other Stuff>

Have you checked if it's nested inside a ScrollView with a FlexGrow: 1 + your FlatList has also a flexGrow: 1? ...cause if yes it will not work... — Hend El-Sahli, Mar 22 '19 at 12:37
Yes @HendEl-Sahli - I've tried both adding and removing a scrollview, tried to just render the list with no containers - no joy I'm afraid — rubie, Mar 22 '19 at 12:39
So please try replacing `renderItem` component with a very simple `Text` for example ... to see if it has to do with that. — Hend El-Sahli, Mar 22 '19 at 12:51

score 90 · Accepted Answer · edited Dec 04 '19 at 20:11

90

Add style={{flex: 1}} for each View element who is a parent for FlatList.

edited Dec 04 '19 at 20:11

סטנלי גרונן

2,917
23
46
68

answered Dec 04 '19 at 19:49

Eugene P.

1,517
12
16

5

That's awesome. I can't believe it was just that. I literally spent 4 hours and 43 minutes trying to figure this out. – martin Mar 29 '21 at 21:00
6

Could you provide the reasoning/intuition behind this being the solution? – A. Khaled Jul 12 '21 at 11:28
Sometimes all you need to is to add "MarginBottom" so to your Flatlist style so it reach the "Edge" of your component , like this style = {{marginBottom : 150 }} , make sure to keep increasing the value until it starts scrolling – Khalid Tamine Jan 03 '23 at 19:09
adding marginbottom/paddingBottom works but seems "hacky" `Add style={{flex: 1}} for each View element who is a parent for FlatList`. This is the most appropriate solution,however i'd recommend adding marginbottom/paddingBottom for 10-20 so everything looks nice – louis Mar 31 '23 at 07:02
This is greate thsi just save my day – sam Jul 04 '23 at 11:40

score 16 · Answer 2 · answered Feb 25 '21 at 22:48

I had the same issue and just found the solution. Add the prop ListFooterComponentby giving it a React element/component. I just passed a view with the preferable height and it worked for me perfectly.

Here is the code snippet:

<FlatList
        data={DATA}
        renderItem={({ item }) => (<ListItem itemData={item} />) }
        keyExtractor={item => item.id}
        ListFooterComponent={<View style={{height: 20}}/>}
      />

This works 100%!

Joseph Ajibodu · Answer 3 · 2021-05-18T13:55:53.003

12

The ultimate solution is ✔

Any view/subview that holds a flatlist must have a flex of 1 - Regardless of how deep.

So if you apply this and it's not working, check your styling and make sure there's no mistake somewhere.

edited May 18 '21 at 13:55

answered May 17 '21 at 09:51

Joseph Ajibodu

1,093
10
14

score 4 · Answer 4 · answered Mar 22 '19 at 11:24

4

I'm not sure if your scenario is exactly the same as one I encountered on a project a few months ago, but I noticed that I had to add a margin/padding (depends on what you prefer) to lift the bottom of the scrollable container. This was usually because a parent container seemed to interfere with the styling of the scrollable element.

Have you tried adding flexGrow: 1 to your styling in place of flex?

answered Mar 22 '19 at 11:24

Nnanyielugo

401
4
13

Thanks for the explanation - adding a `marginBottom` does help with the scrolling, but the content below is still not there. I suspect the problem might be coming from elsewhere - a parent container as you suggest - in which case I'll accept this answer once I've confirmed that. Also, `flexGrow` did nothing, but it was good to learn about it nonetheless, thanks – rubie Mar 22 '19 at 11:48
Not yet, unfortunately - didn't have much time over the weekend to work on it, but will come back and update / accept answer this week – rubie Mar 25 '19 at 08:13
2

hey guys, I'm getting the same issue, any solution? – suisied Sep 18 '19 at 23:39

score 4 · Answer 5 · answered Nov 02 '19 at 19:42

My case is a little different, in that I used FlatList inside bottom sheet provided by reanimated-bottom-sheet package. But the problem was the same: scrolling didn't show the last item properly.

The way I did was I calculated and set the height of the view that included the FlatList. To make it look better when there is bottom inset, I gave more bottom margin to the last item of the FlatList by doing like this:

<FlatList
    data={results}
    keyExtractor={(item) => item.name}
    scrollEnabled={bottomSheetIndex == 1 ? true : false}
    renderItem={({ item }) =>
        <LocationInfo
            bottom={results[results.length - 1].id == item.id ? insets.bottom : 0}
            result={item}
            wait={waitState[item.id]}
            bsIndex={bottomSheetIndex}
        />
    }
/>

const LocationInfo = ({ bottom, result, wait, bsIndex }) => {

    return (
        <View style={[styles.container, { paddingBottom: bottom }]}>
            ...

for insets, see react-native-safe-area-context.

score 3 · Answer 6 · answered Feb 19 '20 at 13:32

3

Remove flex:1 from the FlatList and leave only the parent View.

answered Feb 19 '20 at 13:32

Lima Neto

53
1
9

Артём Павленко · Answer 7 · 2020-05-01T15:27:44.323

3

Add flex: 1 to child into renderItem

<View style={{ height: `93%` }}>
  <FlatList
    contentContainerStyle={{ minHeight: `100%` }}
    scrollEnabled={true}
    ...props
    renderItem={({item}) => (
      <View style={{ flex: 1 }}>
        ...
      </View>
    )}

edited May 01 '20 at 15:27

answered May 01 '20 at 14:41

Артём Павленко

31
2

score 2 · Answer 8 · answered Jul 04 '20 at 17:49

I had the same problem. What I did was to provide a marginBottom to the parent view of the FlatList with size that is equivalent (or a little larger) than the size of the rendered item .

<View style={{marginBottom: HEIGHT_OF_CELL + 60, flexGrow:1}}>
    <FlatList
         keyExtractor={(item, index) => index.toString()}
         data={posts}
         renderItem={renderItem}
    />
            
</View>

score 1 · Answer 9 · answered Jun 11 '20 at 09:08

I method I used to resolve this is by setting the parent view to the FlatList's background color to a visible color(e.g red). Then adjust the margin bottom for that view so that it is large enough for all the contents in the FlatList to be viewed.

In my case the parent view was wrapped in another view which I could not give the flex: 1 style to.

score 1 · Answer 10 · edited Apr 28 '21 at 07:28

1

use dimensions for parent view and set height as given:

const screenHeight = Dimensions.get('window').height - 100 
 <View style={{...styles.container,height:screenHeight}}>
 ....All child components
 </View>

edited Apr 28 '21 at 07:28

Sallar Rabiei

630
1
12
33

answered Apr 24 '21 at 16:11

Abdul Rashid

11
2

score 0 · Answer 11 · answered Nov 27 '19 at 10:45

adding flex:1 to my render item worked for me

 <FlatList
      data={data}
      renderItem={({ item }) => (
        <ListItem
          onPress={() => console.log('ok')}
          bottomDivider
          rightTitle={
            <Divider style={{ marginBottom: 4, backgroundColor: item.status, width: '50%', height: '11%', borderRadius: 10 }} />
          }
          titleProps={{ numberOfLines: 1 }}

          rightSubtitle={item.date}
          rightTitleStyle={{ fontFamily: 'poppins' }}
          rightSubtitleStyle={{ fontFamily: 'poppins' }}
          titleStyle={{ fontFamily: 'poppins' }}
          subtitleStyle={{ fontFamily: 'poppins' }}
          title={item.device}
          subtitle={item.type}
          leftAvatar={{ source: item.icon, rounded: false }}
          **style={{ flex: 1 }}**
        />
      )}
      keyExtractor={item => item._id}
      ListHeaderComponent={renderHeader}
      ListFooterComponent={renderFooter}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.2}

    />

score 0 · Answer 12 · edited Aug 10 '23 at 13:17

0

Try use to resolve the props ListFooterComponent

<FlatList
    data={data}
    renderItem={renderItems}
    ListFooterComponent={<View style={{height: 200}}/>}
/>

edited Aug 10 '23 at 13:17

General Grievance

4,555
31
31
45

answered Aug 08 '23 at 05:54

Hfajardo

11
3

React Native FlatList not scrolling to end

12 Answers12