Android - white screen appear randomly

[ofri-7chairs]

Description

On performing the simple navigation command:

import { useNavigation } from "@react-navigation/native"
const navigation = useNavigation()
// upon clicking on the CTA button:
navigation.navigate("subscription")

a white screen is appearing instead of the desired screen. when going to background and foreground the desired screen appear as expected. this behavior is inconsistent, sometimes its behaving as expected and sometimes not.
Also, there are no errors on the logs.
Happen both on debug and release mode.

XRecorder_07122022_115359.mp4

Steps to reproduce

1. Open app
2. Click on a banner that trigger the navigation to subscription screen
3. The screen is being open with a white screen on top or without, it's inconsistent.

Snack or a link to a repository

https://snack.expo.dev/0C1XtdIWA

Screens version

3.18.2

React Native version

0.67.5

Platforms

Android

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[ofri-7chairs]

its happen also when not calling enableScreens()

[koloboid]

@ofri-7chairs hi! are you managed to solve this? I've met the same issue on Pixel 4 (Samsung S10+ works fine)

[snowdigital]

+1 on issue
samsung S9

"react-native-screens": "^3.22.1",
"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"@react-navigation/stack": "^6.3.17",
"expo": "^49.0.3",

[TwistedMinda]

Still happening on the last react-native-screens 3.22.4

Anyone managed to understand what type of navigation causes this?
99% of my screens work but for some reason 1 or 2 trigger this.

For the 1% buggy screens, forcing them in a group with a specific animation fixes the issue:
It seems: default, fade, fade_from_bottom will all trigger the problem while slide_from_bottom prevents the bug.

 <MainStack.Group
     screenOptions={{
        animation: 'slide_from_bottom'
     }}
 >

[junioroga]

the same is happening to me.

"@react-navigation/bottom-tabs": "^6.5.8",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"react-native-screens": "^3.25.0",

your tip works @TwistedMinda, but i see strange behavior a when i used the slide_from_bottom animation.

there is a small flicker when the navigation returns to the previous screen.

[snowdigital]

the same is happening to me.

"@react-navigation/bottom-tabs": "^6.5.8",

"@react-navigation/native": "^6.1.7",

"@react-navigation/native-stack": "^6.9.13",

"react-native-screens": "^3.25.0",

your tip works @TwistedMinda, but i see strange behavior a when i used the slide_from_bottom animation.

there is a small flicker when the navigation returns to the previous screen.

@junioroga

Do you have some components that contains blur?

React native community blur
Or
Expo-blur?

For me this issue was related to them

[junioroga]

Yes @snowdigital ! great job my friend! I use expo-blur to make an effect on an some images.

[TwistedMinda]

Thanks @snowdigital
Same for me, was using react-native community blur on the page. Causing navigating to other screens the whitescreen.
Awesome

[koloboid]

Just mention - in my case, problems with blur occur only on Android <12. With Android 12 and 13 all seems ok

[tboba]

Hi @ofri-7chairs, thank you for reporting this issue! Sorry for quite late response 🙏

I've started to look into reproducing this problem, but unfortunately I'm not able to reproduce it in provided Snack 😩
I rewrote the main code a bit (I've removed GestureHandlerRootView component to make the application work, changed SubscriptionScreen to just Subscription - typo and added navigation.navigate declarations for performing simple navigation command, as in provided repro the banner that should redirect to the subscription screen doesn't exist) and I still cannot make the screen white 😕

Screen.Recording.2023-09-04.at.16.01.00.mov

As I can see there's still a bunch of people that is facing the problem (/cc @koloboid @snowdigital @junioroga @TwistedMinda) - could you provide new repro with steps to reproduce on the newest version of Screens? If problem is happening only with using blur-related libraries, please also attach those libs 🙌

[snowdigital]

@tboba Its hard to repeat, because it literally appears randomly. In our case not all android devices hade this issue.

As far as i know both Expo-blur and react-native-community-blur cause this issue. To reproduce this you need to use react navigation and navigate to page containing blur (In my case it was custom header component)

[liamjones]

We've just started encountering this after upgrading from RN 0.69 to 0.71 (and upgrading a lot of dependencies as a result). We didn't upgrade react-native-screens though, before and after it was on 3.18.2 (I'm going to try the latest version shortly). We're using Paper, not Fabric in RN.

On some devices it's fine, on others (a Huawei P30 lite w/ EMUI 12 & a Pixel 6 Pro w/ Android 12) it happens relatively reliably but not 100% of the time.

In our case our app starts, we have a loading spinner in a react-navigation screen then, once the app has bootstrapped a load of stuff the navigation changes the single loading screen navigator for a tab navigator containing stack navigators in each tab and, when things go wrong, you just end up with a white screen rather than the home screen in the first tab's stack.

We don't have either expo-blur or react-native-community-blur in our app.

The UI all seems to be there and usable, just not visible. If I tap blindly in the correct places to change tabs, dig down into a screen under one of the tabs, etc then background and foreground the app again I can see I've navigated to a different screen.

Layout inspector does show the elements as there when they're not visible:

Though 'show layout bounds' on the device itself doesn't show the elements:

We're still trying to work out the exact trigger here.

I was going to dig through the layout inspector tree to see if I could see something obviously different in the attributes but I want to try and generate a smaller tree first to make the job easier. It does seem to be, in some way, related to our home screen's contents - if I swap that screen out for one of the other tabs screens instead then the blank screen issue doesn't happen.

[liamjones]

I've finally discovered the trigger for our app. It's @sentry/react-native with the attachScreenshot option enabled and timing related. If a screenshot is captured at just the right time as a new screen is presented it blanks, if I delay the capture by a second after the screen displays then it doesn't blank.

I'm going to try and come up with a minimal repro to post separately to here / the Sentry repo.

[liamjones]

Sentry issue with minimal repro here for anyone interested: getsentry/sentry-react-native#3314

[tboba]

Hi everyone! Coming to this issue again and I want to ask couple of questions there:

1. About the Sentry case - as I can see currently the potential fix for the issue has been found and the PR with fixes has been raised - Use PixelCopy API for capturing screenshots on API level 24+ getsentry/sentry-java#3008 but what's more interesting, this issue has been applied to sentry-java library which means that the problem should also occur on regular Android/React Native (without rn-screens) apps. So I guess this problem should also occur if you don't use react-native-screens? Has anyone of you spotted similar behavior on regular React Native apps without using react-native-screens?

2. About the case with libraries responsible for blurring - as I read this issue I see that two of the libraries are causing this issue:

• react-native-community-blur
• expo-blur

I still wasn't able to reproduce the problem on our side, so I'm just wondering if there's already an issue raised in repos of those libraries - do you know if those libs have already opened issues with similar thing?

3. It seems that those two cases that are mentioned above are causing this problem. I'm just wondering - is anyone also facing this problem without using Sentry or blur-related libraries?

4. @liamjones awesome, thanks for investigating that and creating the PR in Sentry! If you still have an access to the project that is facing the problem, can you try to show the 3D perspective of the views, so I could see how they are being positioned?

[liamjones]

@tboba im off work today and tomorrow but could do so next week. I guess it's be better from the repro PoC as the view hierarchy would be simpler? Do you want Layout Inspector exports from Android Studio of when it works and when it doesn't?

[tboba]

@liamjones yeah, view hierarchy from PoC will do the thing 👍

Do you want Layout Inspector exports from Android Studio of when it works and when it doesn't?

Yep! I see that you've already attached the screenshots with view hierarchy, but in 2D. It would be great to see which view is covering the whole content. You can enable the 3D view with this button in the corner of the work area:

Also, please focus on the view from the list on the left side, so I could see the type of the view 😄

[liamjones]

Apologies for the delay @tboba, screenshots & Layout Inspector exports you can reimport to Android Studio are here: https://drive.google.com/drive/folders/18YzYn37uAZ1koFhyv2bi9vSNc2eeCfrC?usp=sharing

[tboba]

@liamjones Thanks! Could you allow to download files on this directory?

[liamjones]

@tboba I don't think they're blocked from downloading? Here's a zipped copy of the files anyway. I originally put it on drive because they were too big to put directly in GitHub but they seem to compress well: react-native-screens issue #1661-20231121T134816Z-001.zip

[alduzy]

I tried to reproduce the issue with the latest version and I can see that the screen transition animation is not smooth when using @react-native-community/blur, but I could not trigger the white screen.
Is there anyone still experiencing the white screen or is the transition jump the only problem now?

Screen.Recording.2024-08-05.at.12.45.33.mov

Reproduction code

import React from 'react';
import {Text, View, StyleSheet, Button} from 'react-native';
import {BlurView} from '@react-native-community/blur';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';

export const TabScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Button title="Go to blur" onPress={() => navigation.navigate('blur')} />
    </View>
  );
};

export const BlurScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>I'm the blurred text</Text>
      <BlurView
        style={styles.absolute}
        blurAmount={1}
        blurType="light"
        overlayColor="transparent"
        reducedTransparencyFallbackColor="black"
      />
      <Text style={styles.text}>I'm not the blurred text</Text>
    </View>
  );
};

const Tabs = createBottomTabNavigator();

export const TabsNavigator = () => {
  return (
    <Tabs.Navigator>
      <Tabs.Screen name="tab1" component={TabScreen} />
      <Tabs.Screen name="tab2" component={TabScreen} />
    </Tabs.Navigator>
  );
};

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="tabs" component={TabsNavigator} />
        <Stack.Screen name="blur" component={BlurScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  absolute: StyleSheet.absoluteFillObject,
  text: {
    fontSize: 32,
  },
});

[alduzy]

Related issues found: Kureev/react-native-blur#561, Kureev/react-native-blur#595