npx expo install @shopify/react-native-skia react-native-skia-gesture
...return (<View style={styles.container}><StatusBar style="light" /><Touchable.Canvas style={{ flex: 1 }}><Group layer={paint}><Path path={path}> {/** The circles */}<SweepGradientc={vec(0, 0)}colors={['cyan', 'blue', 'cyan']}/></Path></Group><Touchable.Circle {/** The fake transparent circle */}cx={secondCx}cy={secondCy}r={(RADIUS / 60) * 30}{...secondCircleGesture}color={'transparent'}/><Touchable.Circle {/** The fake transparent circle */}cx={firstCx}cy={firstCy}r={(RADIUS / 60) * 30}{...circleGesture}color={'transparent'}/></Touchable.Canvas></View>);
...const { width, height } = useWindowDimensions();const firstCx = useValue(width / 2);const firstCy = useValue(height / 2);const circleGesture = useGestureHandler<{x: number;y: number;}>({onStart: (_, context) => {context.x = firstCx.current;context.y = firstCy.current;},onActive: ({ translationX, translationY }, context) => {firstCx.current = context.x + translationX;firstCy.current = context.y + translationY;},});const secondCx = useValue(width / 2);const secondCy = useValue(height / 2);const secondCircleGesture = useGestureHandler<{x: number;y: number;}>({onStart: (_, context) => {context.x = secondCx.current;context.y = secondCy.current;},onActive: ({ translationX, translationY }, context) => {secondCx.current = context.x + translationX;secondCy.current = context.y + translationY;},});...
...const path = useComputedValue(() => {const circles = Skia.Path.Make();circles.addCircle(firstCx.current, firstCy.current, RADIUS);circles.addCircle(secondCx.current, secondCy.current, RADIUS);circles.simplify();return circles;}, [firstCx, firstCy, secondCx, secondCy]);...
...const paint = useMemo(() => {return (<Paint><Blur blur={30} /><ColorMatrixmatrix={[// R, G, B, A, Position1, 0, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 60, -30,]}/></Paint>);}, []);...
...const paint = useMemo(() => {return (<Paint><Blur blur={30} /></Paint>);}, []);...
...const paint = useMemo(() => {return (<Paint><Blur blur={30} /><ColorMatrixmatrix={[// R, G, B, A, Position1, 0, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 1, 0,]}/></Paint>);}, []);...
...const paint = useMemo(() => {return (<Paint><Blur blur={30} /><ColorMatrixmatrix={[// R, G, B, A, Position1, 0, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 60, 0,]}/></Paint>);}, []);...
...const paint = useMemo(() => {return (<Paint><Blur blur={30} /><ColorMatrixmatrix={[// R, G, B, A, Position1, 0, 0, 0, 0,0, 1, 0, 0, 0,0, 0, 1, 0, 0,0, 0, 0, 60, -30,]}/></Paint>);}, []);...
Every week I send out a newsletter sharing new things.