Merge pull request #483 from Shopify/fix/skia-value-name

Rename SkiaValue to SkiaMutableValue and SkiaReadonlyValue to SkiaValue

Author: chrfalch

example/src/Examples/Animation/AnimationWithTouchHandler2.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { StyleSheet, Dimensions } from "react-native";
-import type { AnimationState, SkiaValue } from "@shopify/react-native-skia";
+import type {
+  AnimationState,
+  SkiaMutableValue,
+} from "@shopify/react-native-skia";
 import {
   ValueApi,
   Canvas,
@@ -21,7 +24,10 @@ interface PhysicsAnimationState extends AnimationState {
   velocity: number;
 }
 
-const runBouncing = (translate: SkiaValue<number>, initialVelocity: number) => {
+const runBouncing = (
+  translate: SkiaMutableValue<number>,
+  initialVelocity: number
+) => {
   translate.animation = ValueApi.createAnimation<PhysicsAnimationState>(
     (now, state) => {
       if (state === undefined) {

example/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx

@@ -1,8 +1,5 @@
 import React from "react";
-import type {
-  CubicBezierHandle,
-  SkiaReadonlyValue,
-} from "@shopify/react-native-skia";
+import type { CubicBezierHandle, SkiaValue } from "@shopify/react-native-skia";
 import {
   Skia,
   isEdge,
@@ -45,7 +42,7 @@ const rectToColors = (
 ) => [colors[tl], colors[tr], colors[br], colors[bl]] as const;
 
 const useRectToPatch = (
-  mesh: SkiaReadonlyValue<CubicBezierHandle[]>,
+  mesh: SkiaValue<CubicBezierHandle[]>,
   indices: readonly number[]
 ) =>
   useDerivedValue(() => {
@@ -207,7 +204,7 @@ interface RectPatchProps {
   debug?: boolean;
   lines?: boolean;
   colors: string[];
-  mesh: SkiaReadonlyValue<CubicBezierHandle[]>;
+  mesh: SkiaValue<CubicBezierHandle[]>;
   defaultMesh: CubicBezierHandle[];
 }
 

example/src/Examples/Aurora/components/Cubic.tsx

@@ -1,8 +1,5 @@
 import React from "react";
-import type {
-  SkiaReadonlyValue,
-  CubicBezierHandle,
-} from "@shopify/react-native-skia";
+import type { SkiaValue, CubicBezierHandle } from "@shopify/react-native-skia";
 import {
   Line,
   Paint,
@@ -13,7 +10,7 @@ import {
 import { symmetric } from "./Math";
 
 interface CubicProps {
-  mesh: SkiaReadonlyValue<CubicBezierHandle[]>;
+  mesh: SkiaValue<CubicBezierHandle[]>;
   index: number;
   color: string;
 }

example/src/Examples/Aurora/components/Curves.tsx

@@ -1,9 +1,9 @@
-import type { PatchProps, SkiaReadonlyValue } from "@shopify/react-native-skia";
+import type { PatchProps, SkiaValue } from "@shopify/react-native-skia";
 import { useDerivedValue, Path, Skia } from "@shopify/react-native-skia";
 import React from "react";
 
 interface CurvesProps {
-  patch: SkiaReadonlyValue<PatchProps["patch"]>;
+  patch: SkiaValue<PatchProps["patch"]>;
 }
 
 export const Curves = ({ patch }: CurvesProps) => {

example/src/Examples/Aurora/components/useHandles.ts

@@ -1,5 +1,5 @@
 import type {
-  SkiaValue,
+  SkiaMutableValue,
   CubicBezierHandle,
   SkRect,
 } from "@shopify/react-native-skia";
@@ -18,7 +18,7 @@ type TouchSelection = null | {
 };
 
 export const useHandles = (
-  mesh: SkiaValue<CubicBezierHandle[]>,
+  mesh: SkiaMutableValue<CubicBezierHandle[]>,
   defaultMesh: CubicBezierHandle[],
   window: SkRect
 ) => {

example/src/Examples/Breathe/Breathe.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Dimensions, StyleSheet } from "react-native";
-import type { SkiaReadonlyValue } from "@shopify/react-native-skia";
+import type { SkiaValue } from "@shopify/react-native-skia";
 import {
   useDerivedValue,
   useLoop,
@@ -23,7 +23,7 @@ const center = vec(width / 2, height / 2 - 64);
 
 interface RingProps {
   index: number;
-  progress: SkiaReadonlyValue<number>;
+  progress: SkiaValue<number>;
 }
 
 const Ring = ({ index, progress }: RingProps) => {

example/src/Examples/Matrix/Symbol.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import type { SkiaReadonlyValue, SkFont } from "@shopify/react-native-skia";
+import type { SkiaValue, SkFont } from "@shopify/react-native-skia";
 import {
   useDerivedValue,
   interpolateColors,
@@ -17,7 +17,7 @@ const pos = vec(0, 0);
 interface SymbolProps {
   i: number;
   j: number;
-  timestamp: SkiaReadonlyValue<number>;
+  timestamp: SkiaValue<number>;
   stream: number[];
   font: SkFont;
   symbols: number[];

example/src/Examples/Neumorphism/Dashboard/components/Control.tsx

@@ -8,7 +8,7 @@ import {
   Text,
   Circle,
 } from "@shopify/react-native-skia";
-import type { SkiaReadonlyValue, SkFont } from "@shopify/react-native-skia";
+import type { SkiaValue, SkFont } from "@shopify/react-native-skia";
 import type { ReactNode } from "react";
 import React from "react";
 
@@ -19,7 +19,7 @@ const r = 25;
 interface ControlProps {
   x: number;
   y: number;
-  progress: SkiaReadonlyValue<number>;
+  progress: SkiaValue<number>;
   label: string;
   children: ReactNode;
   active: boolean;

example/src/Examples/Neumorphism/Dashboard/components/Mode.tsx

@@ -1,4 +1,4 @@
-import type { SkiaReadonlyValue } from "@shopify/react-native-skia";
+import type { SkiaValue } from "@shopify/react-native-skia";
 import {
   BackdropBlur,
   rect,
@@ -15,7 +15,7 @@ import React from "react";
 const clip = rrect(rect(0, 596, 390, 844), 40, 40);
 
 interface ModeProps {
-  translateY: SkiaReadonlyValue<number>;
+  translateY: SkiaValue<number>;
 }
 
 export const Mode = ({ translateY }: ModeProps) => {

example/src/Examples/Neumorphism/Dashboard/components/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import type { SkiaReadonlyValue } from "@shopify/react-native-skia";
+import type { SkiaValue } from "@shopify/react-native-skia";
 import {
   BoxShadow,
   rect,
@@ -28,7 +28,7 @@ const fromCircle = (cx: number, cy: number, r: number) =>
   rrect(rect(cx - r, cy - r, 2 * r, 2 * r), r, r);
 
 interface ProgressBarProps {
-  progress: SkiaReadonlyValue<number>;
+  progress: SkiaValue<number>;
 }
 
 const colors = ["#2FB8FF", "#9EECD9"];