SkeletonPlaceholder has black background on Android that cannot be changed

[trooperandz]

After upgrading to React Native version 0.79+, I started getting a black background on the SkeletonPlaceholder component on Android that will not go away. I tried multiple combinations of <View> containers in different positions with different backgrounds with no successful result. See examples below of applying a specific red background on iOS and Android so that you can see the difference in behavior.

Also see below my code sample. Note that I also tried adjusting my Android theme so that it is not dark and the problem still persisted. In addition, when the component first loads, it looks correct without the black background; then it flashes and the black persists.

Android

iOS

Example code

export const SkeletonListItem: React.FC = () => {
  const theme = useAppSelector(state => selectTheme(state));

  const lineStyle = {
    borderRadius: 12,
    height: 12,
  };

  return (
    <View style={styles.container}>
      <SkeletonPlaceholder highlightColor={theme.skeletonHighlight}>
        <View style={styles.wrapper}>
          <View style={styles.image} />

          <View
            style={{
              marginLeft: 16,
              width: 140,
            }}
          >
            <View style={lineStyle} />
            <View
              style={{
                ...lineStyle,
                marginTop: 10,
                width: 235,
              }}
            />
          </View>
        </View>
      </SkeletonPlaceholder>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    // backgroundColor: '#fff',
    backgroundColor: 'red',
    width: '100%',
    marginBottom: 26,
    paddingHorizontal: 6,
  },
  image: {
    borderRadius: 18,
    height: 36,
    width: 36,
  },
  wrapper: {
    backgroundColor: 'red',
    alignItems: 'center',
    width: '100%',
    flexDirection: 'row',
  },
});

_Note that I also tried using <SkeletonPlaceholder.Item> per the documentation example, and I got the same black background.

[lucasbachega]

I have the same problem. RN 0.76

[trooperandz]

@lucasbachega the issue can be solved by upgrading @react-native-masked-view/masked-view to version 0.3.2. I found this in another issue posted here

[lucasbachega]

@trooperandz it worked! Thanks

[maximilian]

@trooperandz It works but I ran into the dependency issue highlighted in #137

[lucasbachega]

@maximilian I faced the same issue. It's caused by a dependency conflict: react-native-skeleton-placeholder requires @react-native-masked-view/masked-view@"^0.2.8", but the project is using a newer version (0.3.2).

npm install --legacy-peer-deps

This allows npm to bypass the peer dependency conflict. It worked fine for me after that.

[carlgrob5171989]

I am getting same issue.. how can i resolve it?

[maximilian]

I have tried version 6 beta, but it is using an old version of react-native-svg, so again I was getting all sorts of conflicts.

Someone did make a PR request to update the masked view package on the latest release. Since it is not approved, I have gone ahead and published a npm package temporary fix. Hopefully the original PR request will be approved.

Test it out and let me know if it works fine for you npm install react-native-skeleton-placeholder-masked-view-fix. Remember to uninstall the original package to avoid conflict. This should avoid having to use --legacy-peer-deps @lucasbachega

[hanwenbo]

@lucasbachega the issue can be solved by upgrading @react-native-masked-view/masked-view to version 0.3.2. I found this in another issue posted 此问题可以通过升级到 @react-native-masked-view/masked-view 版本 0.3.2 来解决。我在发布的另一个问题中发现了这一点here

0.3.2 useless

[kimnagui]

@lucasbachega the issue can be solved by upgrading @react-native-masked-view/masked-view to version 0.3.2. I found this in another issue posted here

It's worked for me! Thanks :) Here are the package versions I'm using:

"react-native": "0.76.9",
"react-native-skeleton-placeholder": "5.2.4",
"react-native-svg": "15.12.0",
"@react-native-masked-view/masked-view": "0.3.2"

[dasler-fw]

Updating to "@react-native-masked-view/masked-view": "0.3.2" worked. Thanks for solution.

[Ankit91153]

it is working for me

"@react-native-masked-view/masked-view": "^0.3.1", "react-native-skeleton-placeholder": "^5.2.4",

it will removed background color issue and conflicts .

Thanks ........

[trushal-dev1111]

It’s also working for me too ✅

"@react-native-masked-view/masked-view": "^0.3.2", "react-native-skeleton-placeholder": "^5.2.4"

These updates 🔧 fixed the black background color issue 🎨 and removed conflicts 🚀

Thanks! 🙌✨

[ao-alexi]

fixed by installing @react-native-masked-view/[email protected], and the peer dependency conflict error can be avoided by adding the following to package.json:

"overrides": {
    "react-native-skeleton-placeholder": {
      "@react-native-masked-view/masked-view": "^0.3.2"
    }
  }

thank you @trooperandz and all