#1524 support null for image, svg and font properties (#1538)

* Switched order of boolean check To ensure the cheapest check to be tested first, I've swapped these two. * Removed required on image property for Image and ImageShader nodes * Added support for accepting null/undefined in image props * Added declaration support for empty image in Image/Shader node * Updated docs and examples to use image without null check. * Fixed ImageShader and ImageShader Javascript nodes * Added extra test for changed to ensure update of matrix * Added support for null for Svg prop * Updated examples and docs with accepting null for font prop. * Added support for accepting null for font prop - Removed required from props in C++ - Removed required from props in TS - Added tests to not render if font is null. * Lint * Linting * Fixed some example TS errors In some places we use fonts to calculate stuff, and then we need a null check. * Fixed some issues in the docs --------- Co-authored-by: William Candillon <[email protected]>
Shopify · May 3, 2023 · 702d4d2 · 702d4d2
1 parent 00dd26f
commit 702d4d2
Show file tree

Hide file tree

Showing 44 changed files with 431 additions and 428 deletions.
diff --git a/docs/docs/backdrop-filters.md b/docs/docs/backdrop-filters.md
@@ -10,14 +10,22 @@ In Skia, backdrop filters are equivalent to their [CSS counterpart](https://deve
 The [clipping mask](/docs/group#clipping-operations) will be used to restrict the area of the backdrop filter.
 
 ## Backdrop Filter
+
 Applies an image filter to the area behind the canvas or behind a defined clipping mask. The first child of a backdrop filter is the image filter to use. All properties from the [group component](/docs/group) can be applied to a backdrop filter.
 
 ### Example
 
 Apply a black and white color matrix to the clipping area:
 
 ```tsx twoslash
-import { Canvas, BackdropFilter, Fill, Image, ColorMatrix, useImage } from "@shopify/react-native-skia";
+import {
+  Canvas,
+  BackdropFilter,
+  Fill,
+  Image,
+  ColorMatrix,
+  useImage,
+} from "@shopify/react-native-skia";
 
 // https://kazzkiq.github.io/svg-color-filter/
 const BLACK_AND_WHITE = [
@@ -26,19 +34,10 @@ const BLACK_AND_WHITE = [
 
 const Filter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
-  if (!image) {
-    return null;
-  }
+
   return (
     <Canvas style={{ width: 256, height: 256 }}>
-      <Image
-        image={image}
-        x={0}
-        y={0}
-        width={256}
-        height={256}
-        fit="cover"
-      />
+      <Image image={image} x={0} y={0} width={256} height={256} fit="cover" />
       <BackdropFilter
         clip={{ x: 0, y: 128, width: 256, height: 128 }}
         filter={<ColorMatrix matrix={BLACK_AND_WHITE} />}
@@ -54,39 +53,34 @@ const Filter = () => {
 
 Creates a backdrop blur. All properties from the [group component](/docs/group) can be applied to a backdrop filter.
 
-| Name      | Type                |  Description                                             |
-|:----------|:--------------------|:---------------------------------------------------------|
-| blur      | `number`            | Blur radius                                              |
+| Name | Type     | Description |
+| :--- | :------- | :---------- |
+| blur | `number` | Blur radius |
 
 ## Example
 
 ```tsx twoslash
-import { Canvas, Fill, Image, BackdropBlur, ColorMatrix, useImage } from "@shopify/react-native-skia";
+import {
+  Canvas,
+  Fill,
+  Image,
+  BackdropBlur,
+  ColorMatrix,
+  useImage,
+} from "@shopify/react-native-skia";
 
 const Filter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
-  if (!image) {
-    return null;
-  }
+
   return (
     <Canvas style={{ width: 256, height: 256 }}>
-      <Image
-        image={image}
-        x={0}
-        y={0}
-        width={256}
-        height={256}
-        fit="cover"
-      />
-      <BackdropBlur
-        blur={4}
-        clip={{ x: 0, y: 128, width: 256, height: 128 }}
-      >
+      <Image image={image} x={0} y={0} width={256} height={256} fit="cover" />
+      <BackdropBlur blur={4} clip={{ x: 0, y: 128, width: 256, height: 128 }}>
         <Fill color="rgba(0, 0, 0, 0.2)" />
       </BackdropBlur>
     </Canvas>
   );
 };
 ```
 
-<img src={require("/static/img/blur-backdrop-filter.png").default} width="256" height="256" />
+<img src={require("/static/img/blur-backdrop-filter.png").default} width="256" height="256" />
diff --git a/docs/docs/color-filters.md b/docs/docs/color-filters.md
@@ -8,37 +8,33 @@ slug: /color-filters
 ## Color Matrix
 
 Creates a color filter using the provided color matrix.
-A playground to build color matrices is available [here](https://fecolormatrix.com/). 
+A playground to build color matrices is available [here](https://fecolormatrix.com/).
 
-| Name      | Type          |  Description                               |
-|:----------|:--------------|:-------------------------------------------|
+| Name      | Type          | Description                                |
+| :-------- | :------------ | :----------------------------------------- |
 | matrix    | `number[]`    | Color Matrix (5x4)                         |
 | children? | `ColorFilter` | Optional color filter to be applied first. |
 
 ```tsx twoslash
-import { Canvas, ColorMatrix, Image, useImage } from "@shopify/react-native-skia";
+import {
+  Canvas,
+  ColorMatrix,
+  Image,
+  useImage,
+} from "@shopify/react-native-skia";
 
 const MatrixColorFilter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
-  if (!image) {
-    return null;
-  }
+
   return (
     <Canvas style={{ flex: 1 }}>
-      <Image
-          x={0}
-          y={0}
-          width={256}
-          height={256}
-          image={image}
-          fit="cover"
-        >
-          <ColorMatrix
-            matrix={[
-              -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015,
-              1.69, -0.703, 0, 0, 0, 0, 0, 1, 0,
-            ]}
-          />
+      <Image x={0} y={0} width={256} height={256} image={image} fit="cover">
+        <ColorMatrix
+          matrix={[
+            -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
+            -0.703, 0, 0, 0, 0, 0, 1, 0,
+          ]}
+        />
       </Image>
     </Canvas>
   );
@@ -51,15 +47,15 @@ const MatrixColorFilter = () => {
 
 Creates a color filter with the given color and blend mode.
 
-| Name       | Type          |  Description                                      |
-|:-----------|:--------------|:--------------------------------------------------|
-| color      | `Color`       | Color                                             |
-| mode       | `BlendMode`   | see [blend modes](paint/properties.md#blend-mode).|
-| children?  | `ColorFilter` | Optional color filter to be applied first.        |
+| Name      | Type          | Description                                        |
+| :-------- | :------------ | :------------------------------------------------- |
+| color     | `Color`       | Color                                              |
+| mode      | `BlendMode`   | see [blend modes](paint/properties.md#blend-mode). |
+| children? | `ColorFilter` | Optional color filter to be applied first.         |
 
 ```tsx twoslash
 import { Canvas, BlendColor, Group, Circle } from "@shopify/react-native-skia";
- 
+
 const MatrixColorFilter = () => {
   const r = 128;
   return (
@@ -80,19 +76,23 @@ const MatrixColorFilter = () => {
 
 Creates a color filter that is linearly interpolated between two other color filters.
 
-| Name      | Type          |  Description                               |
-|:----------|:--------------|:-------------------------------------------|
-| t         | `number`      | Value between 0 and 1.                     |
-| children  | `ColorFilter` | The two filters to interpolate from.       |
+| Name     | Type          | Description                          |
+| :------- | :------------ | :----------------------------------- |
+| t        | `number`      | Value between 0 and 1.               |
+| children | `ColorFilter` | The two filters to interpolate from. |
 
 ```tsx twoslash
-import { Canvas,ColorMatrix, Image, useImage, Lerp } from "@shopify/react-native-skia";
+import {
+  Canvas,
+  ColorMatrix,
+  Image,
+  useImage,
+  Lerp,
+} from "@shopify/react-native-skia";
 
 const MatrixColorFilter = () => {
   const image = useImage(require("./assets/oslo.jpg"));
-  if (!image) {
-    return null;
-  }
+
   const blackAndWhite = [
     0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
   ];
@@ -101,22 +101,11 @@ const MatrixColorFilter = () => {
   ];
   return (
     <Canvas style={{ flex: 1 }}>
-      <Image
-          x={0}
-          y={0}
-          width={256}
-          height={256}
-          image={image}
-          fit="cover"
-        >
-          <Lerp t={0.5}>
-            <ColorMatrix
-              matrix={purple}
-            />
-            <ColorMatrix
-              matrix={blackAndWhite}
-            />
-          </Lerp>
+      <Image x={0} y={0} width={256} height={256} image={image} fit="cover">
+        <Lerp t={0.5}>
+          <ColorMatrix matrix={purple} />
+          <ColorMatrix matrix={blackAndWhite} />
+        </Lerp>
       </Image>
     </Canvas>
   );
@@ -127,13 +116,19 @@ const MatrixColorFilter = () => {
 
 Creates a color filter that converts between linear colors and sRGB colors.
 
-| Name       | Type          |  Description                                      |
-|:-----------|:--------------|:--------------------------------------------------|
-| children?  | `ColorFilter` | Optional color filter to be applied first.        |
+| Name      | Type          | Description                                |
+| :-------- | :------------ | :----------------------------------------- |
+| children? | `ColorFilter` | Optional color filter to be applied first. |
 
 ```tsx twoslash
-import { Canvas, BlendColor, Group, Circle, LinearToSRGBGamma } from "@shopify/react-native-skia";
-
+import {
+  Canvas,
+  BlendColor,
+  Group,
+  Circle,
+  LinearToSRGBGamma,
+} from "@shopify/react-native-skia";
+
 const MatrixColorFilter = () => {
   const r = 128;
   return (
@@ -153,13 +148,19 @@ const MatrixColorFilter = () => {
 
 Creates a color filter that converts between sRGB colors and linear colors.
 
-| Name       | Type          |  Description                                      |
-|:-----------|:--------------|:--------------------------------------------------|
-| children?  | `ColorFilter` | Optional color filter to be applied first.        |
+| Name      | Type          | Description                                |
+| :-------- | :------------ | :----------------------------------------- |
+| children? | `ColorFilter` | Optional color filter to be applied first. |
 
 ```tsx twoslash
-import { Canvas, BlendColor, Group, Circle, SRGBToLinearGamma } from "@shopify/react-native-skia";
-
+import {
+  Canvas,
+  BlendColor,
+  Group,
+  Circle,
+  SRGBToLinearGamma,
+} from "@shopify/react-native-skia";
+
 const MatrixColorFilter = () => {
   const r = 128;
   return (