Items don't start a new row as expected on android device
daoma90 opened this issue · 2 comments
So I'm using Flatgrid to render a grid of dynamic length items. If an item would overflow on the current row, the expected behavior should be that the item renders on a new row instead.
(On android device)
But this is what happens when I test on a real android device. As you can see, the first row behaves as expected, by rendering the item on a new row instead of overflowing. But the following rows don't do the same.
On an android emulator it works as expected, there is no overflow, if an item is too long to fit it will render on a new row.
(On android emulator)
Here is the component that renders the Flatgrid.
const ExpertCategoriesGrid: FC<Props> = ({categories}) => {
return (
<FlatGrid
spacing={10}
additionalRowStyle={{
marginBottom: 10,
paddingBottom: 0,
}}
scrollEnabled={false}
data={categories}
itemContainerStyle={{width: 'auto'}}
style={{
marginHorizontal: 12,
marginVertical: 5,
paddingBottom: 14,
paddingTop: 0,
}}
renderItem={({item}) => {
return (
<CategoryContainer>
<CategoryText>{item}</CategoryText>
</CategoryContainer>
);
}}
/>
);
};
I can't figure out why it's not working on the android device, but works fine on the emulator.
I just made my own gridview component, it was much easier