Skip to content

Commit

Permalink
docs: getting started (#1920)
Browse files Browse the repository at this point in the history
---------

Co-authored-by: William Candillon <[email protected]>
  • Loading branch information
benschac and wcandillon authored Oct 17, 2023
1 parent bd1ae93 commit e9177f2
Showing 1 changed file with 12 additions and 13 deletions.
25 changes: 12 additions & 13 deletions docs/docs/getting-started/hello-world.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,27 @@ slug: /getting-started/hello-world
React Native Skia provides a declarative API using its own React Renderer.

```tsx twoslash
import {Canvas, Circle, Group} from "@shopify/react-native-skia";
import React from "react";
import { Canvas, Circle, Group } from "@shopify/react-native-skia";

export const HelloWorld = () => {
const size = 256;
const r = size * 0.33;
const App = () => {
const width = 256;
const height = 256;
const r = width * 0.33;
return (
<Canvas style={{ flex: 1 }}>
<Canvas style={{ width, height }}>
<Group blendMode="multiply">
<Circle cx={r} cy={r} r={r} color="cyan" />
<Circle cx={size - r} cy={r} r={r} color="magenta" />
<Circle
cx={size/2}
cy={size - r}
r={r}
color="yellow"
/>
<Circle cx={width - r} cy={r} r={r} color="magenta" />
<Circle cx={width / 2} cy={width - r} r={r} color="yellow" />
</Group>
</Canvas>
);
};

export default App;
```

### Result

<img src={require("/static/img/getting-started/hello-world/blend-modes.png").default} width="256" height="256" alt="Hello World" />
<img src={require("/static/img/getting-started/hello-world/blend-modes.png").default} width="256" height="256" alt="Hello World" />

0 comments on commit e9177f2

Please sign in to comment.