How to properly add blur to radial gradient?

[Jalson1982]

Hello guys. Trying to make some glass effect in my app. But I have hard time to apply correctly blur.
Here is my code:

function Card({index, totalLength, perfomSwipe, boom}) {
  const offsetX = useSharedValue(0);

  const createPanGesture = cardIndex => {
    return Gesture.Pan()
      .onChange(event => {
        if (boom === 0 && event.translationX < 0) {
          return;
        }
        if (boom >= totalLength && event.translationX > 0) {
          return;
        }
        offsetX.value = event.translationX;
      })
      .onFinalize(event => {
        if (Math.abs(event.translationX) > 120) {
          if (cardIndex === 0 && event.translationX < 0) return;
          runOnJS(perfomSwipe)(event.translationX > 0 ? 'right' : 'left');
        }
        offsetX.value = withTiming(0);
      });
  };

  const panGesture = createPanGesture(index);
  const stylez = useAnimatedStyle(() => {
    return {
      position: 'absolute',
      opacity: 1,
      transform: [
        {translateX: offsetX.value},
        {
          scaleX: withTiming(index === 2 ? 1 : index === 0 ? 0.75 : 0.875),
        },
        {
          scaleY: withTiming(index === 2 ? 1 : index === 0 ? 0.9 : 0.92),
        },
        {
          translateY: withTiming(index === 2 ? 1 : index === 0 ? -50 : -25),
        },
      ],

      zIndex: 0,
    };
  });

  const cc =
    index === 2
      ? ['rgba(190, 87, 209, 0.60)', 'rgba(91, 44, 198, 0.60)']
      : index === 0
      ? ['rgba(190, 87, 209, 0.20)', 'rgba(91, 44, 198, 0.20)']
      : ['rgba(190, 87, 209, 0.40)', 'rgba(91, 44, 198, 0.40)'];

  return (
    <GestureDetector gesture={panGesture}>
      <Animated.View
        onLayout={event => {
          console.log('event', event.nativeEvent.layout);
        }}
        style={[
          {
            borderRadius: layout.borderRadius,
            shadowColor: 'white',
            shadowOffset: {width: 0, height: -1.5},
            shadowOpacity: 0.15,
            shadowRadius: 0.3,
            elevation: 4,
            width: newWidth,
          },
          stylez,
        ]}>
        <Canvas
          style={{
            position: 'absolute',
            width: newWidth,
            height: 199,
            borderRadius: layout.borderRadius,
            overflow: 'hidden',
          }}>
          <BlurMask blur={103} style="solid" />
          <Rect x={0} y={0} width={newWidth} height={199}>
            <RadialGradient
              c={vec(newWidth / 2, 199)}
              r={199}
              colors={cc}
              mode="clamp"
            />
          </Rect>

          <BackdropBlur blur={4}>
            <Fill color="rgba(0, 0, 0, 0.1)" />
          </BackdropBlur>
        </Canvas>
        {index === 2 && (
          <View
            style={{
              paddingHorizontal: 24,
              paddingTop: 28,
              paddingBottom: 20,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text
              style={{
                color: 'white',
                fontSize: 24,
                fontFamily: 'PTTelegraf-Regular',
              }}>
              Lower caffeine intake
            </Text>
            <Text
              style={{
                marginTop: 20,
                color: 'white',
                fontSize: 15,
                textAlign: 'center',
              }}>
              Caffeine is known to disrupt sleep. Your sleep quality lowers 19%
              on caffeinated days...
            </Text>
            <TouchableOpacity
              style={{
                borderRadius: 22,
                borderWidth: 1,
                borderColor: 'white',
                height: 44,
                width: '60%',
                marginTop: 20,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={{color: 'yellow', textAlign: 'center'}}>
                View Details
              </Text>
            </TouchableOpacity>
          </View>
        )}
      </Animated.View>
    </GestureDetector>
  );
}

What I get is actual this:

And what i am aiming to get is:

If you look closer design has more blur and i am not sure how to apply it correctly. Thx in advance for help.