React Native + Styled Component/native + typescript + box shadow = problem

[KatuGT]

Hello!

I can´t do the box-shadow appear in android
This is what I have know

export const TabContainer = styled.View`
    display: flex;
    flex-direction: row;
    padding: 15px;
    margin: 20px;
    shadow-opacity: 1;
    shadow-radius: 5px;
    shadow-color: #000;
    shadow-offset: 10px 10px;
`;

I also tried the shorthand box-shadow: 10px 5px 5px black; but nothing

At first I was having the "unknown property" error with all the "shadow-xxx" properties. I instaled the plugin for Typescript
and set up this property

{
        "name": "typescript-styled-plugin",
        "lint": {
          "validProperties": [
            "shadow-color",
            "shadow-opacity",
            "shadow-offset",
            "shadow-radius",
            "padding-horizontal",
            "padding-vertical",
            "margin-vertical",
            "margin-horizontal",
            "tint-color",
            "aspect-ratio",
            "elevation",
            "include-font-padding",
            "text-align-vertical"
          ]
        }
}

[thisisnotdevin]

looks like you're applying a box-shadow to a View component in React Native using styled-components, but box-shadow property is not supported in React Native. Try using the elevation property

export const TabContainer = styled.View
  display: flex;
  flex-direction: row;
  padding: 15px;
  margin: 20px;
  elevation: 5;

or if that doesnt work, you could checkout react-native-shadow lib 👍

[quantizor]

box-shadow is not supported in React Native. React Native has its own shadow system:

• iOS: Use shadowColor, shadowOffset, shadowOpacity, shadowRadius
• Android: Use elevation

export const TabContainer = styled.View`
  shadow-color: #000;
  shadow-offset: 0px 2px;
  shadow-opacity: 0.25;
  shadow-radius: 3.84px;
  elevation: 5;
`;

This is a React Native platform limitation, not a styled-components issue. css-to-react-native translates CSS property names to their RN equivalents, but the underlying platform must support them.