diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 71a41863b..6b73be152 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -331,7 +331,7 @@ PODS: - glog - react-native-safe-area-context (4.8.2): - React-Core - - react-native-skia (0.1.236): + - react-native-skia (1.0.4): - RCT-Folly (= 2021.07.22.00) - React - React-callinvoker @@ -425,7 +425,7 @@ PODS: - RNGestureHandler (2.14.1): - RCT-Folly (= 2021.07.22.00) - React-Core - - RNReanimated (3.6.2): + - RNReanimated (3.8.1): - RCT-Folly (= 2021.07.22.00) - React-Core - ReactCommon/turbomodule/core @@ -644,7 +644,7 @@ SPEC CHECKSUMS: React-jsinspector: d5ce2ef3eb8fd30c28389d0bc577918c70821bd6 React-logger: 9332c3e7b4ef007a0211c0a9868253aac3e1da82 react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89 - react-native-skia: de2c58edde106819e7497fff61a2dfb69744a86f + react-native-skia: 69482406004911464f57cfb901348ddf3c4032bb React-perflogger: 43392072a5b867a504e2b4857606f8fc5a403d7f React-RCTActionSheet: c7b67c125bebeda9fb19fc7b200d85cb9d6899c4 React-RCTAnimation: c2de79906f607986633a7114bee44854e4c7e2f5 @@ -660,7 +660,7 @@ SPEC CHECKSUMS: ReactCommon: 0c43eaeaaee231d7d8dc24fc5a6e4cf2b75bf196 RNCAsyncStorage: 618d03a5f52fbccb3d7010076bc54712844c18ef RNGestureHandler: fe2be3be5598dc74329b211c58c9f2d231461769 - RNReanimated: 738543ef6ec0024ea0bc9f4ab3ac99af6f068448 + RNReanimated: 4943d1e286130877c0539f053c3f36a22d8c66f5 RNScreens: 3c5b9f4a9dcde752466854b6109b79c0e205dad3 RNSVG: 3a79c0c4992213e4f06c08e62730c5e7b9e4dc17 SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 diff --git a/package.json b/package.json index 7ed94f154..ebbd6ac0d 100644 --- a/package.json +++ b/package.json @@ -45,12 +45,12 @@ "@react-navigation/bottom-tabs": "^6.5.18", "@react-navigation/native": "^6.1.9", "@react-navigation/native-stack": "^6.9.17", - "@shopify/react-native-skia": "^0.1.234", + "@shopify/react-native-skia": "^1.0.4", "react": "18.2.0", "react-native": "0.71.6", "react-native-calendars": "^1.1294.0", "react-native-gesture-handler": "^2.14.1", - "react-native-reanimated": "^3.6.1", + "react-native-reanimated": "^3.8.1", "react-native-safe-area-context": "^4.8.2", "react-native-screens": "^3.29.0", "react-native-svg": "13.6.0", @@ -96,4 +96,4 @@ "typescript": "^4.9.5", "winston": "^3.8.1" } -} \ No newline at end of file +} diff --git a/packages/chart/src/BarChart/index.tsx b/packages/chart/src/BarChart/index.tsx index fe4723b6a..6ef8e003f 100644 --- a/packages/chart/src/BarChart/index.tsx +++ b/packages/chart/src/BarChart/index.tsx @@ -1,12 +1,17 @@ import { Canvas, Group, + Skia, Text, useCanvasRef, useFont, } from '@shopify/react-native-skia'; import {useSafeAreaFrame} from 'react-native-safe-area-context'; -import {useDerivedValue, useSharedValue} from 'react-native-reanimated'; +import { + interpolateColor, + useDerivedValue, + useSharedValue, +} from 'react-native-reanimated'; import {useTheme, View} from '@lad-tech/mobydick-core'; import {StyleProp, ViewStyle} from 'react-native'; @@ -17,9 +22,9 @@ import { defaultChartHeightDivider, } from '../utils/constants'; import Coordinates from '../components/Coordinates'; -import Line from '../components/Line'; import {generatePeriodsWithBarPaths} from '../utils/generatePeriodsWithBarPaths'; import Section from '../components/Section'; +import Line from '../components/Line'; export interface IBarChartProps { title?: string; @@ -74,13 +79,28 @@ export const BarChart = ({ const chartPath = useDerivedValue(() => { const {current, next} = state.value; - const start = periodsWithPaths[current]; - const end = periodsWithPaths[next]; + const start = periodsWithPaths[current]?.chartPath ?? Skia.Path.Make(); + const end = periodsWithPaths[next]?.chartPath ?? Skia.Path.Make(); - if (start === undefined || end === undefined) { - throw Error('start === undefined || end === undefined'); + if (end.isInterpolatable(start)) { + return end.interpolate(start, transition.value)!; } - return end.chartPath.interpolate(start.chartPath, transition.value)!; + + return end; + }); + + const colorsBar = useDerivedValue(() => { + const {current, next} = state.value; + const start = periodsWithPaths[current]?.colors ?? []; + const end = periodsWithPaths[next]?.colors ?? []; + + return end.map((endColor, i) => + interpolateColor( + transition.value, + [0, 1], + [start[i] ?? endColor, endColor], + ), + ); }); const maxY = useDerivedValue(() => { @@ -159,9 +179,9 @@ export const BarChart = ({ /> )} ({ + const state = useSharedValue({ next: 0, current: 0, }); - const chartPath = useDerivedValue(() => { - const {current, next} = state.value; - const start = periodsWithPaths[current]; - const end = periodsWithPaths[next]; - - if (start === undefined || end === undefined) { - throw Error('start === undefined || end === undefined'); - } - return end.chartPath.interpolate(start.chartPath, transition.value)!; - }); - const maxY = useDerivedValue(() => { const {current, next} = state.value; const start = periodsWithPaths[current]; @@ -136,7 +125,7 @@ export const LineChart = ({ throw Error('start === undefined || end === undefined'); } - return end.coordinatesLength; + return end.maxCoordinatesLength; }); return ( @@ -158,7 +147,12 @@ export const LineChart = ({ font={font} /> )} - + { - colors: (typeof defaultTheme.colors)[0]; - path: Readonly>; +import {COLORS} from '../utils'; + +interface IChartProps + extends Omit, 'path'> { + chartPath: SharedValue; width: number; + colors?: SharedValue; } -export const COLORS = [ - '#E0F5E9', - '#9BE1DA', - '#56CDCB', - '#3B8B8E', - '#EF1E1C', - '#F43B1D', - '#F9571D', - '#FF8A57', -]; - -export const Line = ({path, width, colors, ...rest}: IChartProps) => { +export const Line = ({chartPath, width, colors, ...rest}: IChartProps) => { return ( - + ); }; diff --git a/packages/chart/src/components/LineOfPeriod.tsx b/packages/chart/src/components/LineOfPeriod.tsx new file mode 100644 index 000000000..4a14b2c1d --- /dev/null +++ b/packages/chart/src/components/LineOfPeriod.tsx @@ -0,0 +1,57 @@ +import {PathProps, Skia, SkiaDefaultProps} from '@shopify/react-native-skia'; +import {interpolateColor, useDerivedValue} from 'react-native-reanimated'; + +import {IChartTransition, ISharedChartState} from '../types'; +import {IPeriodsWithPaths} from '../utils'; + +import Line from './Line'; + +interface IChartProps + extends Omit, 'path'> { + periodsWithPaths: IPeriodsWithPaths; + index: number; + width: number; + transition: IChartTransition; + state: ISharedChartState; + lineColors?: string[] | undefined; +} + +export const LineOfPeriod = ({ + periodsWithPaths, + index, + width, + transition, + state, +}: IChartProps) => { + const chartPath = useDerivedValue(() => { + const {current, next} = state.value; + + const start = + periodsWithPaths[current]?.lines[index]?.path ?? Skia.Path.Make(); + const end = periodsWithPaths[next]?.lines[index]?.path ?? Skia.Path.Make(); + + if (end.isInterpolatable(start)) { + return end.interpolate(start, transition.value)!; + } + + return end; + }); + + const colors = useDerivedValue(() => { + const {current, next} = state.value; + const start = periodsWithPaths[current]?.lines[index]?.colors ?? []; + const end = periodsWithPaths[next]?.lines[index]?.colors ?? []; + + return end.map((endColor, i) => + interpolateColor( + transition.value, + [0, 1], + [start[i] ?? endColor, endColor], + ), + ); + }); + + return ; +}; + +export default LineOfPeriod; diff --git a/packages/chart/src/components/Lines.tsx b/packages/chart/src/components/Lines.tsx new file mode 100644 index 000000000..d7f69e6f9 --- /dev/null +++ b/packages/chart/src/components/Lines.tsx @@ -0,0 +1,51 @@ +import {SkPath} from '@shopify/react-native-skia'; +import {useDerivedValue} from 'react-native-reanimated'; + +import {IPeriodsWithPaths} from '../utils'; +import {IChartTransition, ISharedChartState} from '../types'; + +import LineOfPeriod from './LineOfPeriod'; + +export interface ILine { + name?: string | undefined; + path: SkPath; + colors?: string[] | undefined; +} + +interface ILinesProps { + periodsWithPaths: IPeriodsWithPaths; + width: number; + transition: IChartTransition; + state: ISharedChartState; +} + +export const Lines = ({ + periodsWithPaths, + width, + state, + transition, +}: ILinesProps) => { + const lines = useDerivedValue(() => { + const {next} = state.value; + + const end = periodsWithPaths[next]?.lines ?? []; + + return end; + }); + + return ( + <> + {lines.value.map(({colors}, index) => ( + + ))} + + ); +}; diff --git a/packages/chart/src/components/Section.tsx b/packages/chart/src/components/Section.tsx index f4b61d650..e023c5a64 100644 --- a/packages/chart/src/components/Section.tsx +++ b/packages/chart/src/components/Section.tsx @@ -2,12 +2,12 @@ import {StyleProp, View, ViewStyle} from 'react-native'; import {SharedValue} from 'react-native-reanimated'; import {createStyles, useStyles} from '@lad-tech/mobydick-core'; -import {IDataset, IGraphState, IRenderSectionItem} from '../types'; +import {IChartState, IDataset, IRenderSectionItem} from '../types'; import SectionButton from './SectionButton'; export interface ISelectionProps { - state: SharedValue; + state: SharedValue; transition: SharedValue; dataset: IDataset; renderSectionItem: IRenderSectionItem; diff --git a/packages/chart/src/components/SectionButton.tsx b/packages/chart/src/components/SectionButton.tsx index 655003452..e6222343a 100644 --- a/packages/chart/src/components/SectionButton.tsx +++ b/packages/chart/src/components/SectionButton.tsx @@ -4,14 +4,14 @@ import {createStyles, Pressable, useStyles} from '@lad-tech/mobydick-core'; import { IChartTransition, IRenderSectionItem, - ISharedGraphState, + ISharedChartState, } from '../types'; export interface ISectionButtonProps { renderSectionItem: IRenderSectionItem; period: string; index: number; - state: ISharedGraphState; + state: ISharedChartState; transition: IChartTransition; } diff --git a/packages/chart/src/components/index.ts b/packages/chart/src/components/index.ts index b026dd141..214e6f160 100644 --- a/packages/chart/src/components/index.ts +++ b/packages/chart/src/components/index.ts @@ -1,4 +1,5 @@ export * from './Coordinates'; export * from './Line'; +export * from './Lines'; export * from './Section'; export * from './SectionButton'; diff --git a/packages/chart/src/types.tsx b/packages/chart/src/types.tsx index 09a576b27..63705275e 100644 --- a/packages/chart/src/types.tsx +++ b/packages/chart/src/types.tsx @@ -31,16 +31,16 @@ export type IRenderSectionItem = ( transition, }: { period: string; - state: ISharedGraphState; + state: ISharedChartState; transition: IChartTransition; }, index: number, ) => ReactElement; -export interface IGraphState { +export interface IChartState { next: number; current: number; } -export type ISharedGraphState = SharedValue; +export type ISharedChartState = SharedValue; export type IChartTransition = SharedValue; diff --git a/packages/chart/src/utils/constants.ts b/packages/chart/src/utils/constants.ts index d391ccf0e..07e3e9348 100644 --- a/packages/chart/src/utils/constants.ts +++ b/packages/chart/src/utils/constants.ts @@ -1,3 +1,13 @@ export const chartPaddingHorizontal = 40; export const chartPaddingVertical = 20; export const defaultChartHeightDivider = 4; +export const COLORS = [ + '#E0F5E9', + '#9BE1DA', + '#56CDCB', + '#3B8B8E', + '#EF1E1C', + '#F43B1D', + '#F9571D', + '#FF8A57', +]; diff --git a/packages/chart/src/utils/generateLinePath.ts b/packages/chart/src/utils/generateLinePath.ts index 4447cd8c4..3e4f2551e 100644 --- a/packages/chart/src/utils/generateLinePath.ts +++ b/packages/chart/src/utils/generateLinePath.ts @@ -9,34 +9,21 @@ export const generateLinePath = ({ height, width, coordinates, + maxY, + maxX, + minY, + minX, }: { coordinates: ICoordinates[]; height: number; width: number; + maxY: number; + maxX: number; + minY: number; + minX: number; }) => { 'worklet'; const path = Skia.Path.Make(); - let {maxX, maxY, minY, minX} = { - maxX: 0, - maxY: 0, - minY: Infinity, - minX: Infinity, - }; - - coordinates.forEach(({x, y}) => { - if (maxX < x) { - maxX = x; - } - if (x < minX) { - minX = x; - } - if (maxY < y) { - maxY = y; - } - if (y < minY) { - minY = y; - } - }); coordinates.forEach(({x, y}, index) => { const xCoordinate = interpolate( @@ -68,9 +55,5 @@ export const generateLinePath = ({ return { path, - maxX, - maxY, - minX, - minY, }; }; diff --git a/packages/chart/src/utils/generatePeriodsWithBarPaths.tsx b/packages/chart/src/utils/generatePeriodsWithBarPaths.tsx index 4fe363f87..337b5941e 100644 --- a/packages/chart/src/utils/generatePeriodsWithBarPaths.tsx +++ b/packages/chart/src/utils/generatePeriodsWithBarPaths.tsx @@ -14,7 +14,7 @@ export const generatePeriodsWithBarPaths = ({ const lines = dataset[period] as IChart[]; const firstLine = lines[0] as IChart; - const {coordinates} = firstLine; + const {coordinates, colors} = firstLine; const { path: chartPath, maxX, @@ -36,6 +36,7 @@ export const generatePeriodsWithBarPaths = ({ minX, minY, coordinatesLength, + colors, }; }); }; diff --git a/packages/chart/src/utils/generatePeriodsWithLinePaths.tsx b/packages/chart/src/utils/generatePeriodsWithLinePaths.tsx index 0909deb76..5556b3c28 100644 --- a/packages/chart/src/utils/generatePeriodsWithLinePaths.tsx +++ b/packages/chart/src/utils/generatePeriodsWithLinePaths.tsx @@ -1,41 +1,67 @@ import {IChart, IGeneratePeriodsWithPaths} from '../types'; +import {ILine} from '../components/Lines'; import {generateLinePath} from './generateLinePath'; +import {getLinesMinMax} from './getLinesMinMax'; +import {COLORS} from './constants'; + +export type IPeriodsWithPaths = { + maxY: number; + minY: number; + maxX: number; + minX: number; + maxCoordinatesLength: number; + lines: ILine[]; +}[]; export const generatePeriodsWithLinePaths = ({ dataset, width, height, -}: IGeneratePeriodsWithPaths) => { +}: IGeneratePeriodsWithPaths): IPeriodsWithPaths => { 'worklet'; const periods = Object.keys(dataset); return periods.map(period => { const lines = dataset[period] as IChart[]; - const firstLine = lines[0] as IChart; - const {coordinates} = firstLine; - const { - path: chartPath, - maxX, - maxY, - minX, - minY, - } = generateLinePath({ - width, - height, - coordinates, - }); + const {maxY, maxX, minY, minX} = getLinesMinMax(lines); + + let maxCoordinatesLength = 0; - const coordinatesLength = coordinates.length; + const temp = lines.map(line => { + const {coordinates, colors, name} = line; + + const {path: chartPath} = generateLinePath({ + width, + height, + coordinates, + maxY, + maxX, + minY, + minX, + }); + + const coordinatesLength = coordinates.length; + + if (coordinates.length > maxCoordinatesLength) { + maxCoordinatesLength = coordinatesLength; + } + + return { + path: chartPath, + colors: colors ?? COLORS, + name, + }; + }); return { - chartPath, maxX, maxY, - minX, minY, - coordinatesLength, + minX, + maxCoordinatesLength: maxCoordinatesLength, + lines: temp, }; }); }; diff --git a/packages/chart/src/utils/getLinesMinMax.tsx b/packages/chart/src/utils/getLinesMinMax.tsx new file mode 100644 index 000000000..0fbeeee95 --- /dev/null +++ b/packages/chart/src/utils/getLinesMinMax.tsx @@ -0,0 +1,30 @@ +import {IChart} from '../types'; + +export const getLinesMinMax = ( + lines: IChart[], +): { + maxX: number; + maxY: number; + minX: number; + minY: number; +} => { + 'worklet'; + return lines.reduce( + ({maxX, maxY, minX, minY}, {coordinates}) => { + coordinates.forEach(({x, y}) => { + maxX = Math.max(x, maxX); + minX = Math.min(x, minX); + maxY = Math.max(y, maxY); + minY = Math.min(y, minY); + }); + + return {maxX, maxY, minX, minY}; + }, + { + maxX: 0, + maxY: 0, + minX: Infinity, + minY: Infinity, + }, + ); +}; diff --git a/packages/chart/src/utils/index.ts b/packages/chart/src/utils/index.ts index 808a74c7c..08c61379c 100644 --- a/packages/chart/src/utils/index.ts +++ b/packages/chart/src/utils/index.ts @@ -5,3 +5,4 @@ export * from './generateLinePath'; export * from './generatePeriodsWithBarPaths'; export * from './generatePeriodsWithLinePaths'; export * from './getCoordinateValues'; +export * from './getLinesMinMax'; diff --git a/src/shared/lib/test/data/chart.ts b/src/shared/lib/test/data/chart.ts index 2e4c85936..00d82abe5 100644 --- a/src/shared/lib/test/data/chart.ts +++ b/src/shared/lib/test/data/chart.ts @@ -1,8 +1,8 @@ import { ICoordinates, IDataset } from '@lad-tech/mobydick-chart/src/types'; const random = Math.random() * 100; -export const mockChart = () => - new Array(20).fill(0).map((_value, index) => { +export const mockChart = (n: number) => + new Array(n).fill(0).map((_value, index) => { return { x: random * index, y: 10 + Math.random() * index, @@ -10,16 +10,68 @@ export const mockChart = () => }); export const mockChartDataset: IDataset = { - period: [ + 'period 1': [ { - coordinates: mockChart(), - name: '1 line', + coordinates: mockChart(20), + name: '3 line', + colors: [ + '#ff0000', + '#f4e91d', + ] + }, + { + coordinates: mockChart(10), + name: '4 line', + colors: [ + '#c7b2b2', + '#cbbdbd', + + ] + }, + { + coordinates: mockChart(5), + name: '5 line', + colors: [ + '#bcff06', + '#00e7ff', + + ] }, ], - 'period 1': [ + period: [ { - coordinates: mockChart(), + coordinates: mockChart(20), name: '1 line', + colors: [ + '#ba80ff', + '#9BE1DA', + '#56CDCB', + '#3B8B8E', + ] + }, + { + coordinates: mockChart(10), + name: '2 line', + }, + { + coordinates: mockChart(3), + name: '2 line', + colors: [ + '#d5ff80', + '#9BE1DA', + '#5658cd', + '#3B8B8E', + ] + }, + { + coordinates: mockChart(2), + name: '2 line', + colors: [ + '#d5ff80', + '#9BE1DA', + '#5658cd', + '#3B8B8E', + ] }, ], }; diff --git a/src/widgets/Chart/ui/RenderSectionItem.tsx b/src/widgets/Chart/ui/RenderSectionItem.tsx index c6dd970a0..8d811ed76 100644 --- a/src/widgets/Chart/ui/RenderSectionItem.tsx +++ b/src/widgets/Chart/ui/RenderSectionItem.tsx @@ -6,14 +6,14 @@ import Animated, { import { createStyles, IChartTransition, - ISharedGraphState, + ISharedChartState, Typography, useStyles, } from 'shared/ui'; interface IProps { period: string; - state: ISharedGraphState; + state: ISharedChartState; transition: IChartTransition; index: number; } diff --git a/yarn.lock b/yarn.lock index d8dd16c67..7847a380f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -187,6 +187,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg== +"@babel/helper-plugin-utils@^7.24.0": + version "7.24.0" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz#945681931a52f15ce879fd5b86ce2dae6d3d7f2a" + integrity sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w== + "@babel/helper-remap-async-to-generator@^7.18.9", "@babel/helper-remap-async-to-generator@^7.22.20": version "7.22.20" resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0" @@ -533,6 +538,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" +"@babel/plugin-transform-arrow-functions@^7.0.0-0": + version "7.24.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz#2bf263617060c9cc45bcdbf492b8cc805082bf27" + integrity sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw== + dependencies: + "@babel/helper-plugin-utils" "^7.24.0" + "@babel/plugin-transform-async-generator-functions@^7.23.7": version "7.23.7" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz#3aa0b4f2fa3788b5226ef9346cf6d16ec61f99cd" @@ -756,6 +768,14 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" +"@babel/plugin-transform-nullish-coalescing-operator@^7.0.0-0": + version "7.24.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988" + integrity sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw== + dependencies: + "@babel/helper-plugin-utils" "^7.24.0" + "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3" + "@babel/plugin-transform-nullish-coalescing-operator@^7.23.4": version "7.23.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.23.4.tgz#45556aad123fc6e52189ea749e33ce090637346e" @@ -772,13 +792,6 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-numeric-separator" "^7.10.4" -"@babel/plugin-transform-object-assign@^7.16.7": - version "7.23.3" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.23.3.tgz#64177e8cf943460c7f0e1c410277546804f59625" - integrity sha512-TPJ6O7gVC2rlQH2hvQGRH273G1xdoloCj9Pc07Q7JbIZYDi+Sv5gaE2fu+r5E7qK4zyt6vj0FbZaZTRU5C3OMA== - dependencies: - "@babel/helper-plugin-utils" "^7.22.5" - "@babel/plugin-transform-object-rest-spread@^7.23.4": version "7.23.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.23.4.tgz#2b9c2d26bf62710460bdc0d1730d4f1048361b83" @@ -806,6 +819,15 @@ "@babel/helper-plugin-utils" "^7.22.5" "@babel/plugin-syntax-optional-catch-binding" "^7.8.3" +"@babel/plugin-transform-optional-chaining@^7.0.0-0": + version "7.24.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz#26e588acbedce1ab3519ac40cc748e380c5291e6" + integrity sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg== + dependencies: + "@babel/helper-plugin-utils" "^7.24.0" + "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5" + "@babel/plugin-syntax-optional-chaining" "^7.8.3" + "@babel/plugin-transform-optional-chaining@^7.23.3", "@babel/plugin-transform-optional-chaining@^7.23.4": version "7.23.4" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.23.4.tgz#6acf61203bdfc4de9d4e52e64490aeb3e52bd017" @@ -913,6 +935,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" +"@babel/plugin-transform-shorthand-properties@^7.0.0-0": + version "7.24.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz#ba9a09144cf55d35ec6b93a32253becad8ee5b55" + integrity sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA== + dependencies: + "@babel/helper-plugin-utils" "^7.24.0" + "@babel/plugin-transform-spread@^7.0.0", "@babel/plugin-transform-spread@^7.23.3": version "7.23.3" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.23.3.tgz#41d17aacb12bde55168403c6f2d6bdca563d362c" @@ -935,6 +964,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.22.5" +"@babel/plugin-transform-template-literals@^7.0.0-0": + version "7.24.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz#15e2166873a30d8617e3e2ccadb86643d327aab7" + integrity sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g== + dependencies: + "@babel/helper-plugin-utils" "^7.24.0" + "@babel/plugin-transform-typeof-symbol@^7.23.3": version "7.23.3" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.23.3.tgz#9dfab97acc87495c0c449014eb9c547d8966bca4" @@ -2418,13 +2454,13 @@ lodash-es "^4.17.21" read-pkg-up "^11.0.0" -"@shopify/react-native-skia@^0.1.234": - version "0.1.236" - resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-0.1.236.tgz#a7532873a5176fd16435c66f02181cc76cd833a4" - integrity sha512-yE4+AAKgZNflhqQU/nt5OZdNU4sC5TcV8JD1W9SyJsSRADcG0piVKO8PnmrEPT8t316EbVSz7+V0PmgOZmObzQ== +"@shopify/react-native-skia@^1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@shopify/react-native-skia/-/react-native-skia-1.0.4.tgz#17049742eed595ac2abc21c343dce5899e476f56" + integrity sha512-nRAtW4Xv54Eb774PPZXwgTQNevknZ/5JIh6DldzQ9te57TQbh9fP4en+6m7GK1qfN5HhC+6M8NOWdXDbd6YN4g== dependencies: canvaskit-wasm "0.39.1" - react-reconciler "^0.27.0" + react-reconciler "0.27.0" "@sideway/address@^4.1.4": version "4.1.4" @@ -9275,12 +9311,16 @@ react-native-gradle-plugin@^0.71.17: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.19.tgz#3379e28341fcd189bc1f4691cefc84c1a4d7d232" integrity sha512-1dVk9NwhoyKHCSxcrM6vY6cxmojeATsBobDicX0ZKr7DgUF2cBQRTKsimQFvzH8XhOVXyH8p4HyDSZNIFI8OlQ== -react-native-reanimated@^3.6.1: - version "3.6.2" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.2.tgz#8a48c37251cbd3b665a659444fa9778f5b510356" - integrity sha512-IIMREMOrxhtK35drfpzh2UhxNqAOHnuvGgtMofj7yHcMj16tmWZR2zFvMUf6z2MfmXv+aVgFQ6TRZ6yKYf7LNA== +react-native-reanimated@^3.8.1: + version "3.8.1" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.8.1.tgz#45c13d4bedebef8df3d5a8756f25072de65960d7" + integrity sha512-EdM0vr3JEaNtqvstqESaPfOBy0gjYBkr1iEolWJ82Ax7io8y9OVUIphgsLKTB36CtR1XtmBw0RZVj7KArc7ZVA== dependencies: - "@babel/plugin-transform-object-assign" "^7.16.7" + "@babel/plugin-transform-arrow-functions" "^7.0.0-0" + "@babel/plugin-transform-nullish-coalescing-operator" "^7.0.0-0" + "@babel/plugin-transform-optional-chaining" "^7.0.0-0" + "@babel/plugin-transform-shorthand-properties" "^7.0.0-0" + "@babel/plugin-transform-template-literals" "^7.0.0-0" "@babel/preset-typescript" "^7.16.7" convert-source-map "^2.0.0" invariant "^2.2.4" @@ -9360,7 +9400,7 @@ react-native@0.71.6: whatwg-fetch "^3.0.0" ws "^6.2.2" -react-reconciler@^0.27.0: +react-reconciler@0.27.0: version "0.27.0" resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.27.0.tgz#360124fdf2d76447c7491ee5f0e04503ed9acf5b" integrity sha512-HmMDKciQjYmBRGuuhIaKA1ba/7a+UsM5FzOZsMO2JYHt9Jh8reCb7j1eDC95NOyUlKM9KRyvdx0flBuDvYSBoA==