Ad

Image Overrides BackgroundColor Of Elements After Upgrade To React-native 0.61.0

- 1 answer

I have very strange problem after upgrade react-native library in my app from version 0.59.9 to 0.61.0. The problem occurred only on Android (simulators and device).

Firstly, I should mention that the problem has not occurred since the first turn on the application. The most often appear after logging to app. After processing the data, the rendering of elements in the application unexpectedly changes.

The problem looks like:

enter image description here

enter image description here

As you can see, the image overrides backgroundColor, but strangely it does not cover the inscription inside. Have any of you encountered such a problem? How to solve it? What can it be caused by?

I put the code snippet below. Once again, I emphasize: The problem does not occur when the application is initialized, and everything worked correctly before upgrading the libraries.

const ProfileHead = () => (
   <View>
      <LinearGradient
        colors={["rgba(3, 7, 20, 0)", "#030714"]}
        style={styles.backgroundGradient}
        start={{ x: 0.0, y: 0.0 }}
        end={{ x: 0.0, y: 1.0 }}
        locations={[0, 1]}
      />
      <Image
        source={require("../../assets/images/focusly_08.jpg")}
        style={styles.imageBackground}
      />
 </View>
);

<MainContainer style={{ paddingTop: 0 }} navbarHidden={true}>
  <StretchScroll
    stretchHeight={300}
    stretchComponent={<ProfileHead />}
    style={styles.scroll}
  >
    <View style={styles.userProfile}>
      <ProfileOval title={user.name ? user.name.charAt(0) : ""} />
      <Header style={styles.header}>{user.name}</Header>
    </View>
 ...
backgroundGradient: {
   position: "absolute",
   width: Dimensions.get("window").width,
   height: 200,
   zIndex: 2,
},
imageBackground: {
   width: Dimensions.get("window").width,
   position: "absolute",
   height: 200,
},
scroll: {
   zIndex: 3,
},
userProfile: {
   alignItems: "center",
   marginTop: 130,
},
Ad

Answer

Try upgrading to v0.61.2

According to the changelog:

This release fixes shadow issues that were happening on Android as well as improves StatusBar API to better support iOS 13 dark mode.

Ad
source: stackoverflow.com
Ad