FlashList won't render properly in android. #411
Description
I wrote a demo based on the official example. The code is from '/example/src/FlashList.tsx'.
But when i opened it in android simualtor, i got a warning: ' FlashList's rendered size is not usable. Either the height or width is too small (<2px). Please make sure that the parent view of the list has a valid size. FlashList will match the size of the parent.'
And the content area was blank. FlashList was not rendered properly. But it works fine on IOS plantform.
I think it maybe the android 'flex:1' problem. So I go to the source code 'src/Container.tsx'.
<AnimatedPagerView
ref={containerRef}
onPageScroll={pageScrollHandler}
initialPage={index.value}
{...pagerProps}
style={[pagerProps?.style, StyleSheet.absoluteFill]}
>
{tabNamesArray.map((tabName, i) => {
return (
<View key={i}>
<TabNameContext.Provider value={tabName}>
<Lazy
startMounted={lazy ? undefined : true}
cancelLazyFadeIn={!lazy ? true : !!cancelLazyFadeIn}
// ensure that we remount the tab if its name changes but the index doesn't
key={tabName}
>
{
React.Children.toArray(children)[
i
] as React.ReactElement
}
</Lazy>
</TabNameContext.Provider>
</View>
)
})}
</AnimatedPagerView>
And find the function tabNamesArray.map() returns the View Component, where the FlashList would be rendered.
But only have key={i} in its props.
If I add style={{ flex: 1}}, it will render FlashList properly.
<View key={i} style={{ flex: 1}}>
<TabNameContext.Provider value={tabName}>
<Lazy
startMounted={lazy ? undefined : true}
cancelLazyFadeIn={!lazy ? true : !!cancelLazyFadeIn}
// ensure that we remount the tab if its name changes but the index doesn't
key={tabName}
>
{
React.Children.toArray(children)[
i
] as React.ReactElement
}
</Lazy>
</TabNameContext.Provider>
</View>
Is this a bug or I did not use the Tab.FlashList rightly? all my demo codes are from Example folder.
But some days ago i did not face the problem.
Thanks.