react-native box-shadow with styled-components

Question

I use styled-components in my expo app.
I need to use this box-shadow:

box-shadow: 0px 6px 8px rgba(25, 50, 47, 0.08),0px 3px 4px rgba(18, 71, 52, 0.02), 0px 1px 16px rgba(18, 71, 52, 0.03);

But when i put it in my styled component like this:

const BackButton = styled.TouchableOpacity`
  flex-direction: row;
  width: 40px;
  height: 40px;
  align-items: center;
  position: absolute;
  left: ${normalize(26)}px;
  justify-content: center;
  padding: 0px 20px 2px;
  border-radius: 12px;
  background-color: ${EAppColors.BASIC_LIGHT_BLUE};
 box-shadow: 0px 6px 8px rgba(25, 50, 47, 0.08),0px 3px 4px rgba(18, 71, 52, 0.02), 0px 1px 16px rgba(18, 71, 52, 0.03);
`;

I have this error:

how I can apply this box-sahdow in your opinion?

Answer 1

See if this fits your use case: https://github.com/styled-components/styled-components/issues/709#issuecomment-295274475

Also worth noting, Android does not support colored box shadows, so if you are building for android I would suggest using react-native-drop-shadow. .