React-Native FlatList is not scrolling

Question

I am quite new to react native. I have created a FlatList for rendering this list of items, however, it is not scrolling. I've googled it for hours and tried nearly everything suggested in stack overflow threads - removed flex, added flex, wrapped it in a view, but nothing seems to work.

Here is my code (the issue is in the second FlatList) -

                return(
                    <View style = {{ height: '100%' }}>
    
                        <View style = {{ width: '100%' }}>
                            <AppHeader />
                        </View>
    
                        <View style = {{ width: '100%'}}>
    
                            <View style = {{ width: '70%', alignSelf: 'center', flex: 1 }}>
     
                                <View>
                                    <FlatList
                                        data = {this.getTodayDay()}
                                        renderItem = {this.renderItemDays}
                                        keyExtractor = {this.keyExtractor}
                                    />
                                </View>
    
                                    <FlatList
                                        data = {this.getVisibleHours()}
                                        renderItem = {this.renderItem}
                                        keyExtractor = {this.keyExtractor}
                                        scrollEnabled = {true}
                                    />

                
                            </View>
    
                        </View>
    
                    </View>

this.renderItem -

renderItem = () => {

// irrelevant code


        
        if( isClass === true ){
            return(
                <ListItem bottomDivider = {true} style = {styles.renderItemActiveClass}>
                    <ListItem.Content>

                        <TouchableOpacity
                            onPress = {()=>{
                                this.props.navigation.navigate('ClassDetailsScreen', { "data": classData })
                            }}>
                                <ListItem.Title>{ definiteClassTime }</ListItem.Title>
                                <ListItem.Subtitle>{ classData.class_name }</ListItem.Subtitle>
                        </TouchableOpacity>

                    </ListItem.Content>
                </ListItem>
            )
        }
        else{
            return(
                <ListItem bottomDivider = {true} style = {styles.renderItemClass} 
                containerStyle = {styles.renderItemContent}>
                    <ListItem.Content>
                        <ListItem.Title>{item}:00</ListItem.Title>
                        <ListItem.Subtitle>No Class</ListItem.Subtitle>
                    </ListItem.Content>
                </ListItem>
            )
        }

}

the StyleSheet -

    renderItemClass: {
        borderColor: 'purple',
        borderWidth: 2
    }, 

    renderItemActiveClass: {
        borderColor: 'green',
        borderWidth: 2
    },

    renderItemContent: {
    },

Could somebody please tell me what I'm doing wrong?

Answer 1

Add a height to both the flatlist. And also wrap your second flatlist within a seperate view. Here is an example:

return (
  <View style={{ height: "100%" }}>
    <View style={{ width: "100%" }}>
      <AppHeader />
    </View>

    <View style={{ width: "100%" }}>
      <View style={{ width: "70%", alignSelf: "center", flex: 1 }}>
        <View style={{ height: 60, alignSelf: "center" }}>
          <FlatList
            data={this.getTodayDay()}
            renderItem={this.renderItemDays}
            keyExtractor={this.keyExtractor}
          />
        </View>
        <View style={{ height: 60, alignSelf: "center" }}>
          <FlatList
            data={this.getVisibleHours()}
            renderItem={this.renderItem}
            keyExtractor={this.keyExtractor}
            scrollEnabled={true}
          />
        </View>
      </View>
    </View>
  </View>
);