fix(iOS, Tabs): use clearColor background to prevent flash during tab transitions

[jpancotti]

Previously using systemBackgroundColor, which could cause a visible flash of white or black background during tab transitions in apps with custom themes. Using clearColor ensures the background is transparent, preventing any visual artifacts regardless of the app's color scheme.

Fixes #3472

Description

When using NativeTabs with custom app themes (especially dark themes), there can be a brief flash of the system background color during tab transitions. Using clearColor makes the background fully transparent, preventing any flash regardless of the app's color scheme.

Changes

• Changed self.backgroundColor from [UIColor systemBackgroundColor] to [UIColor clearColor] in RNSBottomTabsScreenComponentView.mm

Test code and steps to reproduce

import { Tabs } from 'expo-router/tabs';

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarStyle: { backgroundColor: '#1a1a2e' },
      }}
    >
      <Tabs.Screen name="index" options={{ title: 'Home' }} />
      <Tabs.Screen name="settings" options={{ title: 'Settings' }} />
    </Tabs>
  );
}

1. Create app with dark theme
2. Switch between screens rapidly
3. Before: Brief flash of system background color visible around edges
4. After: No flash, smooth transitions

Checklist

• Included code example that can be used to test this change
• Updated TS types
• Updated documentation:
  • https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
  • https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
  • https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
  • https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
• Ensured that CI passes

[kligarski]

Hi, @jpancotti. Thank you for the PR.

Unfortunately, this is not as simple as it seems 😔. When you switch between tabs with similar color after tabs are rendered for the first time, there is another flash even with clearColor approach (for details see: #3492). Also, we added background color to tab screen to mitigate problems with liquid glass tab bar appearance adapting to the background (more details here: #3279). I'm not sure how it behaves with clearColor - this will require more testing.

We decided to expose in react-native-screens full configuration of background color (for host container and every tab screen) in this PR: #3492. This will allow you to modify background color as you like (including approach similar to this PR with tab screen being transparent).

As #3492 allows this configuration and more, I'll close this PR.