Mixed blur and shadow

[ghost]

Hey there, i'm trying to reproduce the tab bar but I can't because we see the shadow behind the component and I don't know how to hide it and just keep it out of the Rect

[ghost]

Can someone help me please, thanks you =)

[louix]

I'm not 100% sure what your question is, but this is one example of doing a similar tab bar. You can remove the shadow quite easily:

import * as skia from "@shopify/react-native-skia";
import React from "react";

const Icon = ({ cx, cy, r }: skia.ScalarCircleDef) =>
  (
    <skia.Circle r={r} cx={cx} cy={cy} color={0}>
      <skia.Paint color={0xddffffff} style={"stroke"} strokeWidth={3}/>
    </skia.Circle>
  )

const TabBar = () => {
  const roundedRect = skia.rrect(
    skia.rect(25, 125, 250, 50),
    25,
    25
  );

  return (
    <skia.Group>
      {/* tab bar background */}
      <skia.BackdropBlur blur={4} clip={roundedRect}>
        <skia.Fill color={0x11000000}/>
      </skia.BackdropBlur>

      {/* tab bar icons */}
      <Icon cx={75} cy={150} r={10}/>
      <Icon cx={150} cy={150} r={15}/>
      <Icon cx={225} cy={150} r={10}/>

      {/* tab bar shadow */}
      <skia.RoundedRect rect={roundedRect} color={0xff000000} clip={roundedRect} invertClip={true}>
        <skia.Shadow dx={0} dy={6} blur={3} color={0x66000000}/>
      </skia.RoundedRect>
    </skia.Group>
  );
}

export const App = () =>
  (
    <skia.Canvas style={{ flex: 1 }}>
      {/* canvas background */}
      <skia.Rect x={0} y={0} width={1024} height={256}>
        <skia.FractalNoise freqX={0.05} freqY={0.05} octaves={4}/>
      </skia.Rect>
      {/* tab bar */}
      <TabBar/>
    </skia.Canvas>
  );

export default App;

Hope it helps.