Applying shadows in react native

im getting this error when applying shadow to components.

View #128489 of type ABI49_0_0RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

these are the css where shadow is applied. I wanted to keep SHADOW seperate so i can use different background colours

const SHADOW = {
    // For iOS
    light: {
      shadowColor: COLORS.black,
      shadowOffset: {
        width: 0,
        height: 2,
      },
      shadowOpacity: 0.1,
      shadowRadius: 4,
    },
    medium: {
      shadowColor: COLORS.black,
      shadowOffset: {
        width: 0,
        height: 4,
      },
      shadowOpacity: 0.2,
      shadowRadius: 2,
    },
    // For Android
    android: {
      elevation: 5,
    },
  };

const BUTTON = {
    padding: 15,
    backgroundColor: COLORS.button,
    borderRadius: 10,
    marginBottom: 10,
    alignItems: 'center',
    ...Platform.select({
      ios: {
        ...SHADOW.medium,
      },
      android: {
        ...SHADOW.android,
      },
    }),
}

const CARD = {
  padding: 15,
  backgroundColor: 'rgba(48, 48, 48, 1)',
  borderRadius: 8,
  marginBottom: 10,
  alignItems: 'center',
  ...Platform.select({
    ios: {
      ...SHADOW.medium,
    },
    android: {
      ...SHADOW.android,
    },
  }),
}

I was expecting to not get warning errors

Resolved issue by making backgroundColor of CARD solid. adding opacity to background colour triggers the warn message