Skip to content

tabBarMinimizeBehavior stops working when tab screen content is wrapped in a styled View #3954

@DragomirAndrei19

Description

@DragomirAndrei19

Description

TLDR: Whenever a FlatList or Scrollview is wrapped in another view (weirdly enough, that's not problematic if it's not styled at all) tabBarMinimizeBehavior doesn't seem to work anymore. This is highly inconvenient, as moving the styling from that view to Flatlist/Scrollview isn't always feasible (eg: you have a view component that handles edge-to-edge or your screen has more than a simple Flatlist/Scrollview inside, screens with toolbars, filter icons around the FlatList etc)

FlatList wrapped in unstyled view/unwrapped FlatList wrapped in styled view
unstyled.mov
styled.mov

It looks like tabBarMinimizeBehavior works only when the ScrollView/FlatList is effectively the root content of the tab screen. If the list is wrapped in a normal React Native View that becomes a native UIView, for example because it has backgroundColor, the native iOS tab bar minimize behavior no longer works.

The likely cause from react-native-screens code:

RNSScrollViewFinder.findScrollViewInFirstDescendantChainFrom only follows subviews[0] until it finds a UIScrollView.
Some iOS 26 handling special-cases RNSSafeAreaViewComponentView, but still only finds a direct scroll view under that safe-area view.
A styled RN View between the tab screen and the FlatList becomes a real native UIView, and appears to break the scroll view association required for tabBarMinimizeBehavior.

Expected behavior

The tab bar should minimize when scrolling the descendant FlatList, even if the list is wrapped in a normal layout/styled View.

Actual behavior

The tab bar only minimizes when the FlatList is effectively the root/native first descendant scroll view.

Steps to reproduce

  1. Run the example as it is and notice how the bottom navigator doesn't minimize as it should
  2. Remove the styling from the wrapping view or the entire view and notice it's now working

eg:

wrapper: {
   backgroundColor: 'white',
 },

becomes

wrapper: {},

Snack or a link to a repository

https://github.com/DragomirAndrei19/RNScreensTabMinimizeRepro

Screens version

4.24.0

React Native version

0.85.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iOS 17 Pro (simulator)

Acknowledgements

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    platform:iosIssue related to iOS part of the libraryrepro-providedA reproduction with a snack or repo is provided

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions