How to render multiple shadows on one element? - css

Question

For example, how to accomplish
box-shadow: 2px 2px 4px rgba(0, 0, 0, .05), -2px -2px 4px rgba(0, 0, 0, .05);
in react native stylesheet?

Answer 1

I don't think you can, but the hack of wrapping your component with another just for another layer of shadow is the worst hack of the century either:
<div style={{ boxShadow: "2px 2px 4px rgba(0, 0, 0, .05)"}}>
<div style={{ boxShadow: "-2px -2px 4px rgba(0, 0, 0, .05)"}}>
{ content }
</div>
</div>

Answer 2

I created a react component that automatically creates multiple View components for every shadow you need. It is likely to have some quirks, but it worked fine for my situation.
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import * as _ from 'lodash';
const partitionByKeys = (keys, obj) => {
let pass = {};
let fail = {};
for (const key of Object.keys(obj)) {
if (keys.includes(key)) {
pass[key] = obj[key];
} else {
fail[key] = obj[key];
}
}
return [pass, fail];
};
const innerStyleKeys = [
'padding', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight',
'paddingHorizontal', 'paddingVertical',
'backgroundColor', 'flexDirection', 'justifyContent', 'alignItems',
'minHeight', 'minHeight',
];
const ShadowView = ({ level = 0, shadows, children, style, ...props }) => {
const shadow = _.head(shadows);
const [innerStyle, outerStyle] = style ? partitionByKeys(innerStyleKeys, style) : [{}, {}];
return (
<View
{...props}
style={{
shadowColor: shadow.color,
shadowOffset: shadow.offset,
shadowOpacity: shadow.opacity,
shadowRadius: shadow.radius,
...(level === 0 ? outerStyle : {}),
...(shadows.length === 1 ? innerStyle : {}),
}}
>
{ shadows.length === 1 ?
children :
<ShadowView level={level + 1} shadows={_.tail(shadows)} style={style}>{children}</ShadowView>
}
</View>
);
};
export default ShadowView;
Usage:
<ShadowView shadows={[{
color: '#FF0000',
opacity: 0.5,
offset: {
width: 0,
height: 10,
},
radius: 60,
}, {
color: '#00FF00',
opacity: 0.5,
offset: {
width: 0,
height: 3,
},
radius: 20,
}]}>...</ShadowView>