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 👍