6 examples of 'boxshadow react native' in JavaScript

Every line of 'boxshadow react native' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
30render() {
31 const _a = this.props, { settings, children } = _a, others = __rest(_a, ["settings", "children"]);
32 const { width = 0, height = 0, color = "#000", border = 0, radius = 0, opacity = 1, x = 0, y = 0, } = settings;
33 const lineWidth = border, rectWidth = width - radius * 2, rectHeight = height - radius * 2;
34 const outerWidth = lineWidth + radius;
35 const middleOffset = radius / outerWidth;
36 return (React.createElement(react_native_1.View, Object.assign({}, others),
37 React.createElement(Svg, { height: height + lineWidth * 2 + radius * 2, width: width + lineWidth * 2 + radius * 2, style: { position: "absolute", top: y - lineWidth, left: x - lineWidth } },
38 React.createElement(Defs, null,
39 React.createElement(LinearGradient, { id: "top", x1: "0", y1: `${lineWidth}`, x2: "0", y2: "0" }, this.linear('BoxTop', opacity, color)),
40 React.createElement(LinearGradient, { id: "bottom", x1: "0", y1: "0", x2: "0", y2: `${lineWidth}` }, this.linear('BoxBottom', opacity, color)),
41 React.createElement(LinearGradient, { id: "left", x1: `${lineWidth}`, y1: "0", x2: "0", y2: "0" }, this.linear('BoxLeft', opacity, color)),
42 React.createElement(LinearGradient, { id: "right", x1: "0", y1: "0", x2: `${lineWidth}`, y2: "0" }, this.linear('BoxRight', opacity, color)),
43 React.createElement(RadialGradient, { id: "border-left-top", r: outerWidth, cx: outerWidth, cy: outerWidth, fx: outerWidth, fy: outerWidth }, this.radial('BoxLeftTop', opacity, color, middleOffset)),
44 React.createElement(RadialGradient, { id: "border-left-bottom", r: outerWidth, cx: outerWidth, cy: 0, fx: outerWidth, fy: 0 }, this.radial('BoxLeftBottom', opacity, color, middleOffset)),
45 React.createElement(RadialGradient, { id: "border-right-top", r: outerWidth, cx: 0, cy: outerWidth, fx: 0, fy: outerWidth }, this.radial('BoxRightTop', opacity, color, middleOffset)),
46 React.createElement(RadialGradient, { id: "border-right-bottom", r: outerWidth, cx: 0, cy: 0, fx: 0, fy: 0 }, this.radial('BoxRightBottom', opacity, color, middleOffset))),
47 React.createElement(Path, { d: `M 0 ${outerWidth},Q 0 0 ${outerWidth} 0,v ${lineWidth},q ${-radius} 0 ${-radius} ${radius},h ${-lineWidth},z`, fill: "url(#border-left-top)" }),
48 React.createElement(Path, { d: `M ${rectWidth + lineWidth + radius} 0,q ${outerWidth} 0 ${outerWidth} ${outerWidth},h ${-lineWidth},q 0 ${-radius} ${-radius} ${-radius},v ${-lineWidth},z`, fill: "url(#border-right-top)" }),
49 React.createElement(Path, { d: `M ${rectWidth + lineWidth + 2 * radius} ${rectHeight + lineWidth + radius},h ${lineWidth},q 0 ${outerWidth} -${outerWidth} ${outerWidth},v ${-lineWidth},q ${radius} 0 ${radius} ${-radius},z`, fill: "url(#border-right-bottom)" }),
50 React.createElement(Path, { d: `M 0 ${rectHeight + lineWidth + radius},q 0 ${outerWidth} ${outerWidth} ${outerWidth},v ${-lineWidth},q ${-radius} 0 ${-radius} ${-radius},h ${-lineWidth},z`, fill: "url(#border-left-bottom)" }),
51 React.createElement(Rect, { x: outerWidth, y: "0", width: rectWidth, height: lineWidth, fill: "url(#top)" }),
52 React.createElement(Rect, { x: "0", y: outerWidth, width: lineWidth, height: rectHeight, fill: "url(#left)" }),
53 React.createElement(Rect, { x: rectWidth + lineWidth + 2 * radius, y: outerWidth, width: lineWidth, height: rectHeight, fill: "url(#right)" }),
54 React.createElement(Rect, { x: outerWidth, y: rectHeight + lineWidth + 2 * radius, width: rectWidth, height: lineWidth, fill: "url(#bottom)" }),
55 React.createElement(Path, { d: `M ${outerWidth} ${lineWidth},h ${rectWidth},q ${radius} 0 ${radius} ${radius},v ${rectHeight},q 0 ${radius} -${radius} ${radius},h -${rectWidth},q -${radius} 0 -${radius} -${radius},v -${rectHeight},q 0 -${radius} ${radius} -${radius}`, fill: alpha(color, opacity) })),
56 children));
57}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

147var boxShadow = function boxShadow(dp) {
148 if (dp === 0) return 'none';
149 var shadow = '0px ';
150 var ambientY = dp;
151 var ambientBlur = dp == 1 ? 3 : dp * 2;
152 var ambientAlpha = (dp + 10 + dp / 9.38) / 100;
153 shadow += ambientY + 'px ' + ambientBlur + 'px rgba(0, 0, 0, ' + ambientAlpha + '), 0px ';
154 var directY = dp < 10 ? dp % 2 == 0 ? dp - (dp / 2 - 1) : dp - (dp - 1) / 2 : dp - 4;
155 var directBlur = dp == 1 ? 3 : dp * 2;
156 var directAlpha = (24 - Math.round(dp / 10)) / 100;
157 shadow += directY + 'px ' + directBlur + 'px rgba(0, 0, 0, ' + directAlpha + ')';
158 return shadow;
159};
27var returnBoxShadow = function returnBoxShadow(color) {
28
29 return '0 1.4rem 2.6rem -1.2rem ' + hexa(color, 0.42) + ', 0 .4rem 2.3rem 0 rgba(0,0,0,0.12), 0 .8rem 1rem -.5rem ' + hexa(color, 0.2);
30};
8export function boxShadow(
9 offsetX: number,
10 offsetY: number,
11 blurRadius: number,
12 spreadRadius: number,
13 color?: ?string,
14): string {
15 if (color === none || color == null) {
16 return none;
17 }
18 return `${offsetX}px ${offsetY}px ${blurRadius}px ${spreadRadius}px ${color}`;
19}
22patchReactNativeWithZone(zone: any): void {}
26render() {
27 return createElement(Page, this.props);
28}

Related snippets