React Native ScrollView/FlatList not scrolling

Question

I have a list of data that I want to place inside a FlatList (i.e. ScrollView) and whenever I try to scroll down to view more of the list, the ScrollView just bounces back up to the top of the list so I cannot ever see the bottom of the list.

I am using Expo and the strange thing is that if I just create a new project or copy/paste some code into Snack then the scrolling works just fine. It is only in my current project that I cannot get the list to scroll. I have even gone into the main.js file and just pasted my example code in there and the issue still persists.

My example code is located here: https://snack.expo.io/ryDPtO5-b I have pasted this exact code into my project and it is not working as expected.

Versions: RN 0.44 / Expo SDK 17.0.0 / React: 16.0.0-alpha.6

My actual use case for my project involves placing a FlatList component at the bottom-third of the screen to show a list of jobs. This is where I discovered the error and when I started to try and debug the issue. In my project I have a parent View with a style of {flex: 1 with a child of List that contains the FlatList... List comes from react-native-elements

EDIT

Here is the code I am actually trying to use:

 <View style={styles.container}>
<View style={containerStyles.headerContainerStyle}>
    <Text style={[textStyles.h2, { textAlign: "center" }]}>
        Territory: {this.props.currentTerritory}
    </Text>
</View>
<View style={styles.mapContainer}>
    <MapView
        provider="google"
        onRegionChangeComplete={this.onRegionChangeComplete}
        region={this.state.region}
        style={{ flex: 1 }}
    >
        {this.renderMapMarkers()}
    </MapView>
</View>
<Badge containerStyle={styles.badgeStyle}>
    <Text>Orders Remaining: {this.props.jobsList.length}</Text>
</Badge>
<List containerStyle={{ flex: 1 }}>
    <FlatList
        data={this.props.jobsList}
        keyExtractor={item => item.id}
        renderItem={this.renderJobs}
        removeClippedSubviews={false}
    />
  </List>
 </View>;

And all my styles

const styles = StyleSheet.create({
container: {
    flex: 1,
},
mapContainer: {
    height: 300,
},
badgeStyle: {
    backgroundColor: 'green',
    alignSelf: 'center',
    marginTop: 15,
    width: 300,
    height: 35,
},
});

and lastly, my renderItem function:

 renderJobs = ({ item }) => {
const { fullAddress, pickupTime } = item;

return (
    <ListItem
        containerStyle={
            item.status === "active" && { backgroundColor: "#7fbf7f" }
        }
        title={fullAddress}
        titleStyle={{ fontSize: 14 }}
        subtitle={pickupTime}
        subtitleStyle={{ fontSize: 12, color: "black" }}
        onPress={() =>
            this.props.navigation.navigate("jobActions", { job: item })
        }
    />
);
};

Do not provide external links to your code. Create an MCVE instead: stackoverflow.com/help/mcve — CinCout
– CinCout, Commented May 30, 2017 at 5:37

frhd · Accepted Answer · 2018-03-14 13:43:31Z

6

I was able to solve this problem.

The Solution is to use flatlist component <View style={{flex:1}}> after renderRow return component <View style={{flex:1}}>

edited Mar 14, 2018 at 13:43

frhd

10.4k5 gold badges27 silver badges43 bronze badges

answered Mar 14, 2018 at 13:07

mbilalbark

941 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gura Over a year ago

I still have the problem with your solution. My solution : I had to remove the marginTop and marginBottom in renderItem. Do you know why it works now ?

Andrew Breen · Accepted Answer · 2017-05-30 05:15:24Z

3

I am confused - are you using a FlatList or a ScrollView - these two elements have completely different lifecycle events (a FlatList requires you to define how individual rows will render and their keys, whereas a ScrollView expects the children to be rendered inline with the component).

Regardless, I think the issue is in your structure, it sounds like the List element requires a height attribute as well ({flex: 1}) as the absolute parent is filling it's space, but the List component is not having a pre-defined height.

answered May 30, 2017 at 5:15

Andrew Breen

6953 silver badges11 bronze badges

3 Comments

cruz02148 Over a year ago

I added some more code in my question to help clarify... I want to use a FlatList component but it wasn't working so I tried to test out a regular ScrollView in my app, but it also was not working. I added the { flex: 1} to the list component but that didn't solve the problem...

Andrew Breen Over a year ago

Reading about List from react-native-elements - it itself is a replacement for FlatList, not a wrapping component. Either remove the List and use FlatList, or use the underlying ListItem component that List is designed to be used with.

cruz02148 Over a year ago

So I tried both solutions. I removed FlatList completely and just used List and then mapped over the data set returning a ListItem for each item in the data set. I then tried just using a FlatList component without a parent List and just rendered a bunch of Text components but still got the error. I used this blog post as my guide when first implementing this solution: medium.com/react-native-development/… I got it to work just fine in a new project but not my existing one...

cruz02148 · Accepted Answer · 2017-05-31 03:20:42Z

0

So after debugging this a bit more today and I ended up just creating a brand new Expo project and copy/pasting all my source code into the new project, changing my Github project name to the new name, and setting the remote origin to my github repo (the one where I changed the name) on my new local project.

For some reason there appeared to be a problem with the Expo project. It almost seemed like the actual NAME of the project was causing issues as I attempted to change the NEW project's name to that of the original project, but it didn't work. It only worked when doing a brand new project, but using the exact same source code.

answered May 31, 2017 at 3:20

cruz02148

511 gold badge1 silver badge4 bronze badges

Collectives™ on Stack Overflow

React Native ScrollView/FlatList not scrolling

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related