Flatlist last rows doesn't showup

[SanchiSinghal]

I've put something like sliding-up-panel with scrollview inside the sliding-up-panel there's a view and after that there's a scrollview inside that view and I've used flatlist inside the scrollview but I don't why some of the doesn't render. When the slidin-up-panel is half opened intially some 3 and half row doesn't get displayed and when I switch to full height last 1 row or 1 and half row doesn't get displayed. P.S And when I provide a paddingBottom it gives me certain part of records. Please can anyone help me out with this ?

[bonham000]

I'm experiencing a similar. I'm using the rn-sliding-up-panel to show a list view (FlatList), and the panel is visible by default (covering half the screen) but can be dragged up to cover the full screen. The problem is, say the entire list is rendered in the "collapsed" state of the panel. If you scroll the list you won't be able to see all the items (you have drag the panel up to the "expanded" state and you will be able to see them).

I've tried tracking the state of the panel and dynamically setting padding on the list container. This works, but I've had some challenges correctly determining the state the panel is in and the appropriate padding height to set as a result. I found some workarounds but the problem was overall the performance and UX started to suffer as a result.

I'm not sure if this package can provide a specific solution for this use case, or what that would look like.

One thing I'm working on now is to just have a default behavior where scrolling to the bottom of the list expands the panel, so I don't have to set the height dynamically.

[graig12]

Guys how can we set the height of the Pannel, i have tried using the height={20} however the height still take up the entire device screen.

[alejandroclvi]

I just calculated the height of the available view that is occupied by the panel when fully open and pass that value as a prop to the slidingpanel component

[gabycasper007]

I've put something like sliding-up-panel with scrollview inside the sliding-up-panel there's a view and after that there's a scrollview inside that view and I've used flatlist inside the scrollview but I don't why some of the doesn't render. When the slidin-up-panel is half opened intially some 3 and half row doesn't get displayed and when I switch to full height last 1 row or 1 and half row doesn't get displayed. P.S And when I provide a paddingBottom it gives me certain part of records. Please can anyone help me out with this ?

Wrap the ScrollView or FlatList in another View and give height to that View. Like this

<View style={{ height: 236 }}> 
    <FlatList
         data={this.state.locations} 
         renderItem={({ item }) => <YourListItem location={item} />} 
         keyExtractor={item => item.id.toString()} 
    />
</View>

[mboettcher]

@gabycasper007 suggestion works for me, however I changed the height to:

height: height*0.8-14 (height of slideUpPanel - margin inside of the slideUpPanel)

[efratyo]

I had the same problem. Managed to fix it by setting SlidingUpPanel's height this way:

const draggableRange = {
    top: height - 200,
    bottom: 85,
};

and then -

 <SlidingUpPanel
     draggableRange={draggableRange}
     height={draggableRange.top}
     ...
  >

[Darkensses]

thank you @efratyo your solution works for me too!