step2. painting overview

SkiaPractice/App.tsx

@@ -10,6 +10,7 @@ import { SafeAreaView } from 'react-native';
 import { useContextBridge, FiberProvider } from 'its-fine';
 import { Canvas, Circle, Group } from '@shopify/react-native-skia';
 import CanvasPractice from './src/components/Canvas';
+import { Painting, PaintingInheritance } from './src/components/Painting';
 import { ThemeProvider } from './src/components/Canvas/Theme/Theme';
 
 function App(): JSX.Element {
@@ -28,6 +29,8 @@ function App(): JSX.Element {
         </Group>
       </Canvas> */}
         <CanvasPractice />
+        <Painting />
+        <PaintingInheritance />
         {/* </SafeAreaView> */}
       </ThemeProvider>
     </FiberProvider>

SkiaPractice/src/components/Painting/Painting.tsx

@@ -0,0 +1,35 @@
+import { Canvas, Circle, Paint, vec, Group } from '@shopify/react-native-skia';
+
+const width = 256;
+const height = 256;
+
+const Painting = () => {
+  const strokeWidth = 10;
+  const c = vec(width / 2, height / 2);
+  const r = (width - strokeWidth) / 2;
+  return (
+    <Canvas style={{ width, height }}>
+      <Circle c={c} r={r} color="red">
+        <Paint color="lightblue" />
+        <Paint color="#adbce6" style="stroke" strokeWidth={10} />
+        <Paint color="#ade6d8" style="stroke" strokeWidth={strokeWidth / 2} />
+      </Circle>
+    </Canvas>
+  );
+};
+
+const PaintingInheritance = () => {
+  const r = width / 6;
+  return (
+    <Canvas style={{ width, height }}>
+      <Group color="lightblue">
+        <Circle cx={r} cy={r} r={r} />
+        <Group style="stroke" strokeWidth={10}>
+          <Circle cx={3 * r} cy={3 * r} r={r} />
+        </Group>
+      </Group>
+    </Canvas>
+  );
+};
+
+export { Painting, PaintingInheritance };

SkiaPractice/src/components/Painting/index.ts

@@ -0,0 +1,3 @@
+import { Painting, PaintingInheritance } from './Painting';
+
+export { Painting, PaintingInheritance };