[Android] FlashList receives zero dimensions during native tab transitions

[beau-house]

Description

When using FlashList within a native bottom tab navigator on Android, warnings appear about FlashList's rendered size being unusable (< 2px) despite being wrapped in a view with a valid size. This occurs specifically during tab transitions, where layout measurements temporarily report zero dimensions before stabilizing.

https://github.com/user-attachments/assets/037a167c-9a8d-4f51-a48d-899915f34f0d

Minimal Reproduction

Reproduction Steps

1. Set up a React Native project with react-native-bottom-tabs
2. Add at least two screens to a native bottom tab navigator
3. Include a FlashList components within a tab screen
4. Switch between tabs

Expected Behavior

• FlashList should maintain stable dimensions during tab transitions
• No warnings about unusable rendered size should appear

Actual Behavior

• Warning appears during tab transitions: "FlashList's rendered size is not usable. Either the height or width is too small (<2px)"
• Layout measurements temporarily report 0x0 dimensions before correcting
• Issue is specific to Android and doesn't occur on iOS

Findings

• Using onLayout events shows dimensions temporarily reporting as 0x0 on Android during tab switches
• Layout events occur / dimensions re-log on every navigation (not seen on iOS)
• Issue appears related to how native navigation handles component mount/unmount cycles
• Current workaround involves wrapping FlashList in a component that tracks dimension stability

Environment

react-native version: 0.74.5

expo version: 51.0.38

react-native-bottom-tabs Version: 0.3.1

@shopify/flash-list Version: 1.6.4

[beau-house]

As a temporary workaround I'm wrapping FlashList in the following, which only renders its children (FlashList) when stable dimensions are available.

import { LayoutChangeEvent, View } from 'react-native'
import { useCallback, useState } from 'react'

export default function StableViewWrapper({ children }: { children: React.ReactNode }) {
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
    isStable: false,
  })

  const handleLayout = useCallback((event: LayoutChangeEvent) => {
    const { width, height } = event.nativeEvent.layout

    setDimensions((prev) => {
      // Only update if dimensions actually changed
      if (prev.width === width && prev.height === height) {
        return prev
      }

      return {
        width,
        height,
        isStable: width > 0 && height > 0,
      }
    })
  }, [])

  return (
    <View style={{ flex: 1 }} onLayout={handleLayout}>
      {dimensions.isStable ? children : null}
    </View>
  )
}

[okwasniewski]

Hey thanks for reporting the issue, can you try with the latest version?

This should be fixed 👍🏻

[beau-house]

I just tried with the latest version – it's fixed 👍🏻

Thank you for this library. It's awesome! Looking forward to watching it improve the React Native ecosystem as it grows.