Skip to content

Commit

Permalink
Merge branch 'main' into wcandillon-patch-54
Browse files Browse the repository at this point in the history
  • Loading branch information
wcandillon authored Dec 18, 2024
2 parents 10056ec + 39f08a0 commit 29f50c8
Showing 1 changed file with 0 additions and 33 deletions.
33 changes: 0 additions & 33 deletions apps/docs/docs/canvas/contexts.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,6 @@ However, if you need to use a React context within your drawing, you must re-inj

We found [its-fine](https://github.com/pmndrs/its-fine), also used by [react-three-fiber](https://github.com/pmndrs/react-three-fiber), to provide an elegant solution to this problem.

## Manual Context Injection

```tsx twoslash
import React from "react";
import { Canvas, Fill } from "@shopify/react-native-skia";
import {useTheme, ThemeProvider} from "./docs/getting-started/Theme";

const MyDrawing = () => {
const { primary } = useTheme();
return <Fill color={primary} />;
};

export const Layer = () => {
const theme = useTheme();
return (
<Canvas style={{ flex: 1 }}>
{/* We need to re-inject the context provider here. */}
<ThemeProvider primary={theme.primary}>
<MyDrawing />
</ThemeProvider>
</Canvas>
);
};

export const App = () => {
return (
<ThemeProvider primary="red">
<Layer />
</ThemeProvider>
);
};
```

## Using `its-fine`

```tsx twoslash
Expand Down

0 comments on commit 29f50c8

Please sign in to comment.