React-native-web: Flatlist does not scroll on web, works fine on mobile

[buffaloDeveloper]

Flatlist will not scroll on the web (chrome), but works fine on mobile (android). Should I find an alternative component?

I'm not doing anything too fancy here.

Parent:

    <View style={getStyle('container')}>
      <PostsFlatList />
    </View>

The parent view just has a background color set and "flex:1"

PostsFlatList:

<View style={{marginVertical: 5}}>
      <FlatList
        numColumns={COLUMNS}
        data={posts}
        renderItem={ ({item}) => ( <PostItem item={item} /> ) }
        keyExtractor={ (item, index) => item._id }
        onEndReachedThreshold={0.5}
        onEndReached={_loadMore} />
</View>

The PostItem:

import React, {useEffect, useRef, useState, memo} from 'react';
import { Image, Text, Button, StyleSheet, 
  TouchableHighlight, View, FlatList, ActivityIndicator } from 'react-native';
import { useUserContext } from "../../../context/UserContext";
import Colors from "../../../constants/Colors";
import { HeaderText, BodyText } from "../../../components/StyledText";

const PostItem = props => {

    const { theme } = useUserContext();

    return (

        <TouchableHighlight onPress={props.onPress} style={getStyle('container', theme)}>
            <View style={getStyle('postContainer', theme)}>
                <HeaderText>{props.item.title}</HeaderText>
                <BodyText>{props.item.body}</BodyText>
            </View>
        </TouchableHighlight>
    )

}

const getStyle = (style, theme) => {

  const styles = {
  container:{
    flex: 1,
        padding: 10,
        margin: 5,
        borderRadius: 5,
        borderWidth: 1,
        borderColor: Colors[theme].border1,
    },
    postContainer:{
        borderRadius: 5,
        padding: 5,
    }

  }
  return StyleSheet.flatten(styles[style]);
};

export default memo(PostItem);

[buffaloDeveloper]

After more digging, the issue only occurs when using the Flatlist with react navigation. I'll try creating an expo snack.

[kashishgrover]

<View style={{ flex: 1, flexDirection: 'row' }}>
  <FlatList
    data={filteredList}
    renderItem={this.renderCard}
    keyExtractor={(item: any) => String(item.id)}
    onLayout={this.onLayout}
    numColumns={columnCount}
    style={styles.list}
  />
  {windowWidth > 900 ? <View style={{ width: 600 }}>{}</View> : null}
</View>

FlatList scroll seems to works only when parent View has a flex property

[hosseinmd]

@kashishgrover this work for me, thanks.