diff --git a/src/InnerShadow.js b/src/InnerShadow.js index 0391a02..761bddf 100644 --- a/src/InnerShadow.js +++ b/src/InnerShadow.js @@ -13,8 +13,8 @@ export default class InnerShadow extends React.PureComponent { insideViewStyle, allShadowProps, } = transformStyleProps(style); - const { backgroundColor, width, height, borderRadius } = allShadowProps; - const viewStyle = { borderRadius, width, height }; + const { backgroundColor, width, height, borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopRightRadius, borderTopLeftRadius } = allShadowProps; + const viewStyle = { borderRadius, width, height, borderBottomLeftRadius, borderBottomRightRadius, borderTopRightRadius, borderTopLeftRadius }; return ( diff --git a/src/InnerShadowART.js b/src/InnerShadowART.js index db06484..85f189e 100644 --- a/src/InnerShadowART.js +++ b/src/InnerShadowART.js @@ -32,10 +32,16 @@ export default class InnerShadowART extends React.PureComponent { } else { stroke += absOffsetY; } + + const adaptedBorderRadius = borderRadius + stroke / 2; + const path = getPathWithRadius( width + stroke + 2, height + stroke + 2, - borderRadius + stroke / 2, + adaptedBorderRadius, + adaptedBorderRadius, + adaptedBorderRadius, + adaptedBorderRadius, ); return ( diff --git a/src/OuterShadow.js b/src/OuterShadow.js index 17290d1..3f43306 100644 --- a/src/OuterShadow.js +++ b/src/OuterShadow.js @@ -26,8 +26,8 @@ export default class OuterShadow extends React.PureComponent { insideViewStyle, allShadowProps, } = transformStyleProps(style); - const { width, height, borderRadius } = allShadowProps; - const viewStyle = { borderRadius, width, height }; + const { width, height, borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopRightRadius, borderTopLeftRadius } = allShadowProps; + const viewStyle = { borderRadius, width, height, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius }; return ( diff --git a/src/OuterShadowART.js b/src/OuterShadowART.js index 1ef970d..76c2ec5 100644 --- a/src/OuterShadowART.js +++ b/src/OuterShadowART.js @@ -10,6 +10,10 @@ export default class OuterShadowART extends React.PureComponent { width = 0, height = 0, borderRadius, + borderBottomLeftRadius, + borderBottomRightRadius, + borderTopRightRadius, + borderTopLeftRadius, shadowRadius, shadowOffset, shadowOpacity, @@ -24,7 +28,7 @@ export default class OuterShadowART extends React.PureComponent { shadowColor, }); - const path = getPathWithRadius(width, height, borderRadius); + const path = getPathWithRadius(width, height, borderBottomLeftRadius || borderRadius, borderBottomRightRadius || borderRadius, borderTopRightRadius || borderRadius, borderTopLeftRadius || borderRadius); const absOffsetX = Math.abs(shadowOffset.x); const absOffsetY = Math.abs(shadowOffset.y); diff --git a/src/helpers.js b/src/helpers.js index a4b6941..bf390ca 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -1,21 +1,17 @@ /* eslint-disable no-bitwise */ import { Platform, StyleSheet } from 'react-native'; -export function getPathWithRadius(width, height, borderRadius) { - if (borderRadius) { - const APrefix = `A ${borderRadius}, ${borderRadius}, 0 0 1`; - const ATopLeft = `${APrefix} ${borderRadius},0`; - const ATopRight = `${APrefix} ${width},${borderRadius}`; - const ABottomRight = `${APrefix} ${width - borderRadius},${height}`; - const ABottomLeft = `${APrefix} 0,${height - borderRadius}`; - return `M 0,${borderRadius} ${ATopLeft} H ${ - width - borderRadius - } ${ATopRight} V ${ - height - borderRadius - } ${ABottomRight} H ${borderRadius} ${ABottomLeft} Z`; - } else { - return `M 0,0 H ${width} V ${height} H 0 Z`; - } +export function getPathWithRadius(width, height, borderBottomLeftRadius = 0, borderBottomRightRadius = 0, borderTopRightRadius = 0, borderTopLeftRadius = 0) { + const APrefix = `A ${borderBottomLeftRadius}, ${borderBottomRightRadius}, 0 0 1`; + const ATopLeft = `${APrefix} ${borderTopLeftRadius},0`; + const ATopRight = `${APrefix} ${width},${borderTopRightRadius}`; + const ABottomRight = `${APrefix} ${width - borderBottomRightRadius},${height}`; + const ABottomLeft = `${APrefix} 0,${height - borderBottomLeftRadius}`; + return `M 0,${borderTopLeftRadius} ${ATopLeft} H ${ + width - borderTopRightRadius + } ${ATopRight} V ${ + height - borderBottomRightRadius + } ${ABottomRight} H ${borderBottomLeftRadius} ${ABottomLeft} Z`; } export function transformShadowPropsForAndroid(props) { @@ -122,6 +118,10 @@ export function transformStyleProps(styleProps, neomorph) { width, height, borderRadius: borderRadius < 0 ? 0 : borderRadius, + borderBottomLeftRadius: borderBottomLeftRadius < 0 ? 0 : borderBottomLeftRadius, + borderBottomRightRadius: borderBottomRightRadius < 0 ? 0 : borderBottomRightRadius, + borderTopLeftRadius: borderTopLeftRadius < 0 ? 0 : borderTopLeftRadius, + borderTopRightRadius: borderTopRightRadius < 0 ? 0 : borderTopRightRadius, backgroundColor: backgroundColor === 'transparent' ? '#00000000' : backgroundColor, shadowOpacity,