Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Android] ListView/FlatList not able to scroll inside Content component

See original GitHub issue

I have a FlatList inside a Content component with some other components that make the Content over height and scrollable. The problem I have that the FlatList was not able to scroll when Content scrollable.

react-native, react and native-base version

react: 16.0.0-alpha.12 react-native: 0.45.1 native-base: 2.2.0

Expected behaviour

The List should scrollable

Steps to reproduce (code snippet or screenshot)

My list: <FlatList style={{ width: '100%', borderWidth: 1, borderColor: '#e0e1e2', marginTop: 10, height: 270, flex: 1 }} data={positions} renderItem={this.renderPosition} keyExtractor={(item, index) => item.id} />

Is the bug present in both ios and android or in any one of them?

Android only

Issue Analytics

State:
Created 6 years ago
Reactions:2
Comments:10 (3 by maintainers)

Top GitHub Comments

2reactions

shivrajkumarcommented, Sep 12, 2017

@thienlhh Remove the height from the FlatList. If you really need the list to be taking up only that much of space. Wrap it with a View maybe and apply the height there

2reactions

sachithamhcommented, Sep 12, 2017

same issu

Top Results From Across the Web

React Native ScrollView/FlatList not scrolling - Stack Overflow

It is only in my current project that I cannot get the list to scroll. I have even gone into the main.

How to use the FlatList Component — React Native Basics

There have been a quite a few ways to create a scrolling list in React Native, most notably they have been the ScrollView...

Optimizing Flatlist Configuration - React Native

The more complex your components are, the slower they will render. Try to avoid a lot of logic and nesting in your list...

Displaying a List in React Native: Map Method or FlatList ...

FlatList is a React Native component that provides scrolling features by default. The FlatList component comes with: Header, Footer, Horizontal scrolling, ...

[Solved]-Not scrolling down to bottom-React Native

React Native tab bar app upside down not rotating · React-native Listview inside Scrollview not scrolling in android · React native Flatlist does...