androidreact-native

Skeleton Loading Animation have background black in Android


I am using the react-native-skeleton-placeholder library to implement skeleton loading animations in my React Native app. However, I'm experiencing an issue where the skeleton loader has a black background on Android but works as expected on iOS. import SkeletonPlaceholder from "react-native-skeleton-placeholder";

                   <SkeletonPlaceholder
                            backgroundColor="#e0e0e0"
                            highlightColor="#f5f5f5"
                        >
                            <SkeletonPlaceholder.Item
                                flexDirection="column"
                                alignItems="flex-start"
                            >
                                <SkeletonPlaceholder.Item
                                    width={300}
                                    height={20}
                                    borderRadius={4}
                                    marginBottom={10}
                                />
                                <SkeletonPlaceholder.Item
                                    width={370}
                                    height={180}
                                    borderRadius={8}
                                    marginTop={10}
                                />
                                <SkeletonPlaceholder.Item
                                    width={370}
                                    height={180}
                                    borderRadius={8}
                                    marginTop={10}
                                />
                                <SkeletonPlaceholder.Item
                                    width={370}
                                    height={180}
                                    borderRadius={8}
                                    marginTop={10}
                                />
                            </SkeletonPlaceholder.Item>
                        </SkeletonPlaceholder>```
  https://i.sstatic.net/Cbfc1tBr.png

Solution

  • Need to install package npm install "@react-native-masked-view/masked-view" , but in my situation i had installed @react-native-community/masked-view and i got trouble with background enter image description here