Text component (#89)

docs/docs/image-svg.md

@@ -0,0 +1,41 @@
+---
+id: image-svg
+title: Image SVG
+sidebar_label: SVG
+slug: /images-svg
+---
+
+Draw an SVG
+
+| Name      | Type      |  Description                                                  |
+|:----------|:----------|:--------------------------------------------------------------|
+| source    | `require` or `string` | Source of the SVG or an HTTP(s) URL. |
+| width?     | `number`  | Width of the destination image.                               |
+| height?    | `number`  | Height of the destination image.                              |
+
+### Example
+
+```tsx twoslash
+import {
+  Canvas,
+  ImageSVG,
+  useSVG
+} from "@shopify/react-native-skia";
+
+const ImageSVGDemo = () => {
+  // Alternatively, you can pass an image URL directly
+  // for instance: const source = useSVG("https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg");
+  const source = useSVG(require("../../assets/tiger.svg"));
+  return (
+    <Canvas style={{ flex: 1 }}>
+      { source && (
+        <ImageSVG
+          source={source}
+          width={256}
+          height={256}
+        />)
+      }
+    </Canvas>
+  );
+};
+```

docs/docs/image.md

@@ -9,7 +9,7 @@ Images can be draw by specifying the output rectangle and how the image should f
 
 | Name      | Type      |  Description                                                  |
 |:----------|:----------|:--------------------------------------------------------------|
-| source    | `require` | Source of the image.                                          |
+| source    | `require` or `string` | Source of the image or an HTTP(s) URL. |
 | x         | `number`  | Left position of the destination image.                       |
 | y         | `number`  | Right position of the destination image.                      |
 | width     | `number`  | Width of the destination image.                               |
@@ -22,19 +22,25 @@ Images can be draw by specifying the output rectangle and how the image should f
 import {
   Canvas,
   Image,
+  useImage
 } from "@shopify/react-native-skia";
 
 const ImageDemo = () => {
+  // Alternatively, you can pass an image URL directly
+  // for instance: const source = useImage("https://bit.ly/3fkulX5");
+  const source = useImage(require("../../assets/oslo.jpg"));
   return (
     <Canvas style={{ flex: 1 }}>
-      <Image
-        source={require("../../assets/oslo.jpg")}
-        fit="contain"
-        x={0}
-        y={0}
-        width={256}
-        height={256}
-      />
+      { source && (
+        <Image
+          source={source}
+          fit="contain"
+          x={0}
+          y={0}
+          width={256}
+          height={256}
+        />)
+      }
     </Canvas>
   );
 };

docs/docs/shaders/gradients.md

@@ -9,6 +9,8 @@ slug: /shaders/gradients
 
 Below are the properties common to all gradient components.
 
+| Name       | Type           |  Description                    |
+|:-----------|:---------------|:--------------------------------|
 | colors     | `string[]`     | Colors to be distributed between start and end. |
 | positions? | `number[]`     | The relative positions of colors. If supplied, it must be of the same length as colors. |
 | mode?      | `TileMode`     | Can be `clamp`, `repeat`, `mirror`, or `decal`. |

docs/docs/text/fonts.md

@@ -0,0 +1,52 @@
+---
+id: fonts
+title: Fonts
+sidebar_label: Fonts
+slug: /text/fonts
+---
+
+By default all the fonts available within your app are available in your Canvas. For instance, you can write the following.
+
+```tsx twoslash
+import {Canvas, Text} from "@shopify/react-native-skia";
+
+export const HelloWorld = () => {
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Text
+        x={0}
+        y={0}
+        value="Hello World"
+        familyName="serif"
+        size={16}
+      />
+    </Canvas>
+  );
+};
+```
+
+Alternatively, you can use your own set of custom fonts to be available in the canvas, as seen below.
+
+```tsx twoslash
+import {Canvas, Text, useFontMgr} from "@shopify/react-native-skia";
+
+export const HelloWorld = () => {
+  const fontMgr = useFontMgr([
+    require("./my-custom-font.otf")
+  ]);
+  if (fontMgr === null) {
+    return null;
+  }
+  return (
+    <Canvas style={{ flex: 1 }} fontMgr={fontMgr}>
+      <Text
+        x={0}
+        y={0}
+        value="Hello World"
+        familyName="My Custom Font"
+        size={16}
+      />
+    </Canvas>
+  );
+};
+```

docs/docs/text/text.md

@@ -0,0 +1,36 @@
+---
+id: text
+title: Text
+sidebar_label: Text
+slug: /text/text
+---
+
+The text component can be used to draw a simple text.
+The font family and the font size must be specified.
+The fonts available in the canvas are described in [here](/docs/text/fonts).
+
+| Name       | Type      |  Description                                                  |
+|:-----------|:----------|:--------------------------------------------------------------|
+| value      | `string`  | Text to draw                                                  |
+| familyName | `string`  | Font family name                                              |
+| size       | `number`  | Font size                                                     |
+
+### Example
+
+```tsx twoslash
+import {Canvas, Text} from "@shopify/react-native-skia";
+
+export const HelloWorld = () => {
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Text
+        x={0}
+        y={0}
+        value="Hello World"
+        familyName="serif"
+        size={32}
+      />
+    </Canvas>
+  );
+};
+```

docs/sidebars.js

@@ -36,9 +36,16 @@ const sidebars = {
       id: "group",
     },
     {
-      type: "doc",
+      collapsed: false,
+      type: "category",
       label: "Image",
-      id: "image",
+      items: ["image", "image-svg"],
+    },
+    {
+      collapsed: false,
+      type: "category",
+      label: "Text",
+      items: ["text/fonts", "text/text"],
     },
     {
       collapsed: false,

example/ios/Podfile.lock

@@ -274,32 +274,32 @@ PODS:
     - glog
   - react-native-safe-area-context (3.3.2):
     - React-Core
-  - react-native-skia (1.0.0):
+  - react-native-skia (0.1.37):
     - React
     - React-callinvoker
     - React-Core
-    - react-native-skia/Api (= 1.0.0)
-    - react-native-skia/Jsi (= 1.0.0)
-    - react-native-skia/RNSkia (= 1.0.0)
-    - react-native-skia/SkiaHeaders (= 1.0.0)
-    - react-native-skia/Utils (= 1.0.0)
-  - react-native-skia/Api (1.0.0):
+    - react-native-skia/Api (= 0.1.37)
+    - react-native-skia/Jsi (= 0.1.37)
+    - react-native-skia/RNSkia (= 0.1.37)
+    - react-native-skia/SkiaHeaders (= 0.1.37)
+    - react-native-skia/Utils (= 0.1.37)
+  - react-native-skia/Api (0.1.37):
     - React
     - React-callinvoker
     - React-Core
-  - react-native-skia/Jsi (1.0.0):
+  - react-native-skia/Jsi (0.1.37):
     - React
     - React-callinvoker
     - React-Core
-  - react-native-skia/RNSkia (1.0.0):
+  - react-native-skia/RNSkia (0.1.37):
     - React
     - React-callinvoker
     - React-Core
-  - react-native-skia/SkiaHeaders (1.0.0):
+  - react-native-skia/SkiaHeaders (0.1.37):
     - React
     - React-callinvoker
     - React-Core
-  - react-native-skia/Utils (1.0.0):
+  - react-native-skia/Utils (0.1.37):
     - React
     - React-callinvoker
     - React-Core
@@ -550,7 +550,7 @@ SPEC CHECKSUMS:
   React-jsinspector: b08b2d5e86cef9dc4bb69f0aa0bbe6d210fb7da5
   React-logger: faee236598b0f7e1a5e3b68577016ac451f1f993
   react-native-safe-area-context: 584dc04881deb49474363f3be89e4ca0e854c057
-  react-native-skia: 758d6910e36060aa2893edaf648a71cf9dff7a1b
+  react-native-skia: 86af817c38ce5c69ec995e88a6b622fc09dcd586
   React-perflogger: 5ab487cacfe6ec19bfe3d3f8072bf71eb07d63da
   React-RCTActionSheet: 03f25695e095fb5aa003828620943c74cc281fec
   React-RCTAnimation: eaf82da39f0c36fb0ef2a28df797c5f73a2a98ea
@@ -569,4 +569,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 0d604cea46612e9e4319325604a6c8bb09823b5e
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.11.2

example/ios/RNSkia.xcodeproj/project.pbxproj

@@ -687,4 +687,4 @@
 /* End XCConfigurationList section */
 	};
 	rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
-}
+}

example/src/App.tsx

@@ -1,37 +1,49 @@
 import { NavigationContainer } from "@react-navigation/native";
 import React from "react";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { StatusBar } from "react-native";
 
 import { AnimationExample, DrawingExample } from "./Examples";
 import { API } from "./Examples/API";
 import { Breathe } from "./Examples/Breathe";
 import { Filters } from "./Examples/Filters";
 import { Gooey } from "./Examples/Gooey";
 import { Hue } from "./Examples/Hue";
+import { Matrix } from "./Examples/Matrix";
 import { HomeScreen } from "./Home";
 
 const App = () => {
   const Stack = createNativeStackNavigator();
   return (
-    <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{
-            title: "🎨 Skia",
-          }}
-        />
+    <>
+      <StatusBar hidden />
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Screen
+            name="Home"
+            component={HomeScreen}
+            options={{
+              title: "🎨 Skia",
+            }}
+          />
 
-        <Stack.Screen name="API" component={API} />
-        <Stack.Screen name="Breathe" component={Breathe} />
-        <Stack.Screen name="Filters" component={Filters} />
-        <Stack.Screen name="Gooey" component={Gooey} />
-        <Stack.Screen name="Hue" component={Hue} />
-        <Stack.Screen name="Drawing" component={DrawingExample} />
-        <Stack.Screen name="Animation" component={AnimationExample} />
-      </Stack.Navigator>
-    </NavigationContainer>
+          <Stack.Screen name="API" component={API} />
+          <Stack.Screen name="Breathe" component={Breathe} />
+          <Stack.Screen name="Filters" component={Filters} />
+          <Stack.Screen name="Gooey" component={Gooey} />
+          <Stack.Screen name="Hue" component={Hue} />
+          <Stack.Screen
+            name="Matrix"
+            component={Matrix}
+            options={{
+              header: () => null,
+            }}
+          />
+          <Stack.Screen name="Drawing" component={DrawingExample} />
+          <Stack.Screen name="Animation" component={AnimationExample} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </>
   );
 };
 

example/src/Examples/API/List.tsx

@@ -38,6 +38,10 @@ const examples = [
     screen: "Path",
     title: "🥾 Paths",
   },
+  {
+    screen: "SVG",
+    title: "🖋 SVG",
+  },
 ] as const;
 
 const styles = StyleSheet.create({

example/src/Examples/API/Routes.ts

@@ -8,4 +8,5 @@ export type Routes = {
   Transform: undefined;
   ColorFilter: undefined;
   Gradients: undefined;
+  SVG: undefined;
 };

example/src/Examples/API/SVG.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Dimensions } from "react-native";
+import { Canvas, ImageSVG, useSVG } from "@shopify/react-native-skia";
+
+const { width, height } = Dimensions.get("window");
+
+export const SVG = () => {
+  const svg = useSVG(require("./tiger.svg"));
+  if (svg === null) {
+    return null;
+  }
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <ImageSVG
+        source={svg}
+        x={0}
+        y={0}
+        width={width / 2}
+        height={height / 2}
+      />
+    </Canvas>
+  );
+};