FlatList is not scrolling or scrollable with multiple items-CodePudding

I am using FlatList for list of video tiles but somehow it is not scrollable can someone please give an input what is wrong in here ?

const TileList = styled(FlatList)({ overflow: 'hidden' }, variant({
    prop: 'orientation',
    variants: {
        vertical: {
            height: '100%',
            width: '100%',
            flexGrow: 0,
            maxHeight: '40%',
        },
        horizontal: {
            width: 250,
            //height: '100%',
            maxWidth: 250,
            flex: 0,
        }
    }
}));



              <TileList
                testID="teams-other-list"
                data={remainingTiles}
                renderItem={renderItem}
                contentContainerStyle={containerStyle}
                horizontal={isHorizontal}
                inverted
                orientation={orientation}
                initialScrollIndex={0}
            />

CodePudding user response：

It's not scrollable because of overflow 'hidden' style option. It hides everything outside the component's frame. Remove it and the scroll will appear

CodePudding user response：

If you want to use initialScrollIndex prop, getItemLayout prop is required. Or the flatlist is not scrolled.

Check this out:
https://reactnative.dev/docs/flatlist#getitemlayout https://reactnative.dev/docs/flatlist#initialscrollindex