Black background on android

[4yki]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

For some reason I see the black background on android (both emulator/real device (pixel 7a)). Note: I use react-native-unistyles, expo-router, react-native-edge-to-edge, react-native-bootsplash (latest stable versions).

Library version

0.8.9

Environment info

System:
  OS: macOS 15.3.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 175.03 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.0
    path: /opt/homebrew/Cellar/node@20/20.11.0/bin/node
  Yarn:
    version: 4.6.0
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.4
    path: /opt/homebrew/Cellar/node@20/20.11.0/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 33.0.3
      - 34.0.0
      - 35.0.0
    System Images:
      - android-33 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-35 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
    Android NDK: 21.4.7075529
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.3
    wanted: latest
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.1
    wanted: 0.77.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

1. …
2. …

Reproducible sample code

import { Platform } from 'react-native';

import {
  createNativeBottomTabNavigator,
  NativeBottomTabNavigationEventMap,
  NativeBottomTabNavigationOptions
} from '@bottom-tabs/react-navigation';
import Icon from '@react-native-vector-icons/material-design-icons';
import { ParamListBase, TabNavigationState } from '@react-navigation/native';
import { withLayoutContext } from 'expo-router';

const BottomTabNavigator = createNativeBottomTabNavigator().Navigator;

const Tabs = withLayoutContext<
  NativeBottomTabNavigationOptions,
  typeof BottomTabNavigator,
  TabNavigationState<ParamListBase>,
  NativeBottomTabNavigationEventMap
>(BottomTabNavigator);

const homeIcon = Icon.getImageSourceSync('home', 24);
const ticketsIcon = Icon.getImageSourceSync('ticket-confirmation', 24);

export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: 'red'
      }}>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ focused }) =>
            Platform.select({
              ios: { sfSymbol: focused ? 'house.fill' : 'house' },
              android: homeIcon as any
            })
        }}
      />
      <Tabs.Screen
        name="tickets"
        options={{
          title: 'Tickets',
          tabBarIcon: ({ focused }) =>
            Platform.select({
              ios: { sfSymbol: focused ? 'wallet.pass.fill' : 'wallet.pass' },
              android: ticketsIcon as any
            })
        }}
      />
    </Tabs>
  );
}

export default function AppLayout() {
  const { authenticated } = useAuthenticated();

  if (authenticated === null) {
    return <View style={{ flex: 1 }} />;
  }

  // if (!authenticated) {
  //   return <Redirect href="/(auth)/intro" />;
  // }

  return (
    <Stack
      screenOptions={{
        headerShown: false
      }}>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
    </Stack>
  );
}

import React from 'react';

import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
import { DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { QueryClientProvider } from '@tanstack/react-query';
import { Slot } from 'expo-router';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { KeyboardProvider } from 'react-native-keyboard-controller';
import { UnistylesProvider } from 'react-native-unistyles';

import { queryClient } from '@/data';
import { useAppDefaults } from '@/state';

import 'react-native-reanimated';
import '../src/view/theme';
import '../src/utils/localization';

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <UnistylesProvider>
        <ThemeProvider value={DefaultTheme}>
          <KeyboardProvider>
            <GestureHandlerRootView>
              <BottomSheetModalProvider>
                <Slot />
                <AppDefaults />
              </BottomSheetModalProvider>
            </GestureHandlerRootView>
          </KeyboardProvider>
        </ThemeProvider>
      </UnistylesProvider>
    </QueryClientProvider>
  );
}

// eslint-disable-next-line react/display-name
const AppDefaults = () => {
  useAppDefaults();
  return null;
};

[4yki]

I've created reproduction project