Natural top border to a rounded rect

[gaishimo]

How do I add a border to the top of a Rounded Rect like this image?

It is possible to use Path to draw the curve, but is there an easier way than that?

[gaishimo]

I achieved this by providing another RoundedRect of the same shape and shifting it up and clip it.

import { Canvas, Group, RoundedRect, Shadow } from '@shopify/react-native-skia';

export default function App() {
  const baseRect={x: 100, y: 100, width: 200, height: 160}
  return (
    <Canvas style={{flex: 1, backgroundColor: "#EAEAEA"}}>
      <Group clip={{x: baseRect.x -1, y: baseRect.y - 4, height: 32, width: baseRect.width + 1}}>
         <RoundedRect {...{...baseRect, y: baseRect.y - 1.5}} r={50} color="white" style="stroke" strokeWidth={1.5} />
      </Group>
      <RoundedRect {...baseRect} r={48} color="#ECECEC" style="fill">
        <Shadow dx={0} dy={0} blur={2} color="rgba(0, 0, 0, 0.1)" />
      </RoundedRect>
    </Canvas>
  );
}

[wcandillon]

hey @gaishimo 🙋🏼‍♂️

could you provide more information about this? Is the reference image done with Figma? if yes, how is it made? I am sure that we can map the concepts nicely.

[gaishimo]

@wcandillon Yes, it was created by Figma. It is a simple RoundedRect with a top border.

[wcandillon]

Here I would definitely recommend to draw the rounded rect as a path

path.addRRect(...);
path.trim(start, end, false); // trim the part you don't need (start and end are between 0 and 1) or you can use `true` to get the "invert"

[gaishimo]

Thanks a lot! I was able to achieve this by using Path 👍

import { Canvas, Path, rect, RoundedRect, rrect, Shadow, Skia } from '@shopify/react-native-skia';

const radius = 48
const baseRect = rrect(rect(100, 100, 200, 120), radius, radius)
const rectForTopBorder = rrect(rect(100, 99, 200, 160), radius + 2, radius + 2)

const borderPath = Skia.Path.Make()
borderPath.addRRect(rectForTopBorder)
borderPath.trim(0.125, 0.475, false)

export default function App() {

  return (
    <Canvas style={{flex: 1, backgroundColor: "#EAEAEA"}}>

      <Path path={borderPath} color="white" strokeWidth={1} style={"stroke"} />
      <RoundedRect rect={baseRect} r={radius} color="#ECECEC" style="fill">
        <Shadow dx={0} dy={0} blur={2} color="rgba(0, 0, 0, 0.1)" />
      </RoundedRect>
    </Canvas>
  );
}