Black background appearing when using React Native 0.76 and expo SDK 52 [Android]

[alterx]

I've added a View with a red background to make it more apparent. This wasn't happening with RN 0.74.5 and Expo SDK 51.

I have a minimal reproduction example I can send (since Expo Snack is still using SDK 51) but this can be easily reproduced by creating a new expo app using yarn create expo-app --template blank, installing the latest version of @react-native-masked-view/masked-view (0.3.2) and using the example in this repo's README file or paste. Then, you can run Expo Go or a dev client, this bug happens on Android (14 in my device)

import { StyleSheet, Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';

export default function App() {
  return (
    <View style={styles.container}>
      <View
        style={{
          height: 130,
          width: '100%',
          backgroundColor: 'red',
          padding: 20,
        }}
      >
        <MaskedView
          style={{
            flexDirection: 'row',
            flex: 1,
          }}
          maskElement={
            <View
              style={{
                backgroundColor: 'transparent',
              }}
            >
              <Text
                style={{
                  fontSize: 60,
                  color: 'black',
                  fontWeight: 'bold',
                }}
              >
                Basic Mask
              </Text>
            </View>
          }
        >
          {/* Shows behind the mask, you can put anything here, such as an image */}
          <View
            style={{ flex: 1, height: '100%', backgroundColor: '#324376' }}
          />
          <View
            style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }}
          />
          <View
            style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }}
          />
          <View
            style={{ flex: 1, height: '100%', backgroundColor: '#e1e1e1' }}
          />
        </MaskedView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

in the App.js file.

For reference, these are the package versions I'm using:

    "@react-native-masked-view/masked-view": "^0.3.2",
    "expo": "~52.0.3",
    "react": "18.3.1",
    "react-native": "0.76.1"

[colinchadwick]

Having the same issue.

[Kawyanethma]

Same issue with expo SDK 52, But In SDK 51 it is fine

[VanThanh258]

Same issue

[bikoevD]

Same issue

[JariKooij]

Same issue

[Hattorius]

Same issue !

[jayasme]

For me, the black background flashes at the first frame on Android, after I revert #228, or I turn to hardware rendering, the problem fixed.

[brentvatne]

fixed in expo/expo@58c7c91 - it will go out in the next release of expo go, updated the recommended version right away so run npx expo install --fix and rebuild your dev build to pull in the change.