FlashList won't render properly in android.

[isToThyMoon]

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.

[virendrasingh-tech]

Adding { flex: 1} really did the trick, thanks.

[chen8520]

same question

[ursnj]

Same issue with my also getting this error in android but working fine in ios, any idea please suggest.

[pangxzi]

Same issue with my also getting this error in android but working fine in ios, any idea please suggest.

+1

[maherzaidoune]

This patch should help react-native-collapsible-tab-view+8.0.0.patch

[gkartalis]

Had the same issue right after we bumped react-native from 73 to 75 - patching the library with the fix from https://github.com/PedroBern/react-native-collapsible-tab-view/pull/448 worked for us thanks @maherzaidoune

[ursnj]

This patch should help react-native-collapsible-tab-view+8.0.0.patch

Some how this patch is not working with latest expo code.