White Screen Flash between navigating

[Vrunalbenke]

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

This Issue is only when disablePageAnimations: false,
While navigating between tab a white screen flash(See Attached Video)

I have Also setRootViewBackgroundColor to theme color using Unistyles.setRootViewBackgroundColor and it is working properly on Start fo Application

Library version

^0.8.3

Environment info

"@bottom-tabs/react-navigation": "^0.8.3",
 "react-native-bottom-tabs": "^0.8.3",
 "react-native": "0.77.0",

Steps to reproduce

whiteScreenFlash.webm

1. …
2. …

Reproducible sample code

import {createNativeBottomTabNavigator} from '@bottom-tabs/react-navigation';
import Home from '../screens/home';
import Chats from '../screens/chats';
import Favorite from '../screens/favorite';
import Profile from '../screens/profile';
import {Colors} from '../constants/color';

const BottomTab = createNativeBottomTabNavigator({
  initialRouteName: 'Home',
  screenOptions: {
    lazy: true,
  },
  labeled: true,
  tabBarActiveTintColor: Colors.deepOrange,
  tabBarInactiveTintColor: Colors.bottomIcon,
  tabBarStyle: {
    backgroundColor: Colors.navyBlue,
  },
  hapticFeedbackEnabled: true,
  scrollEdgeAppearance: 'opaque',
  translucent: true,
  screens: {
    Home: {
      screen: Home,
      options: {
        tabBarIcon: () => require('../../assets/svg/home.svg'),
        tabLabelStyle: {
          fontSize: 20,
          fontFamily: 'Lexend Regular',
        },
      },
    },
    Chat: {
      screen: Chats,
      options: {
        tabBarIcon: () => require('../../assets/svg/chat.svg'),
        tabLabelStyle: {
          fontSize: 16,
          fontFamily: 'Lexend Regular',
        },
      },
    },
    Favorite: {
      screen: Favorite,
      options: {
        tabBarIcon: () => require('../../assets/svg/favorite.svg'),
        tabLabelStyle: {
          fontSize: 16,
          fontFamily: 'Lexend Regular',
        },
      },
    },
    Profile: {
      screen: Profile,
      options: {
        tabBarIcon: () => require('../../assets/svg/profile.svg'),
        tabLabelStyle: {
          fontSize: 16,
          fontFamily: 'Lexend Regular',
        },
      },
    },
  },
});

export default BottomTab;

[guillaumehcht]

Hey @Vrunalbenke , I don’t believe this is a bug. I’m also using Unistyles and encountered the same issue.

What fixed it for me was adding contentStyle to the Stack screens like so:

<Stack
      screenOptions={{
        contentStyle: { backgroundColor: theme.app.background.primary },
      }}
    >
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="chat-detail" options={{ headerShown: false }} />
      <Stack.Screen name="user-detail" options={{ headerShown: false }} />
</Stack>

As you can see, the (tabs) screen is part of the Stack where I applied contentStyle with my app’s theme background. This ensures it switches between white and black depending on whether light or dark mode is active.

Hope that helps! @okwasniewski might need to confirm whether this is actually a bug, but I don’t think it is.

[Vrunalbenke]

Thanks, contentStyle Worked!
I think it is bug cause in light and dark mode i am getting white screen flash when disablePageAnimations: false
When disablePageAnimations: true it working properly without contentStyle
@okwasniewski can confirm it

[okwasniewski]

Hey @Vrunalbenke @guillaumehcht

I believe that @guillaumehcht is right. This is not a bug. The built-in Android transition expects to have a background of the container, so for the split second that the views are transitioning, you need to have the correct background set.