Update to latest Expo version and fix project warnings associated wit… (

#423)

Co-authored-by: Eli Zibin <elizibin@gmail.com>

.changeset/metal-cougars-lie.md

@@ -0,0 +1,5 @@
+---
+"victory-native": patch
+---
+
+Fix warnings associated with newer versions of Reanimated

example/app.json

@@ -1,6 +1,7 @@
 {
   "expo": {
     "name": "Victory",
+    "newArchEnabled": true,
     "slug": "victory-native-xl-demo",
     "version": "1.0.0",
     "orientation": "portrait",
@@ -12,9 +13,7 @@
       "resizeMode": "cover",
       "backgroundColor": "#000000"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "platforms": ["android", "ios", "web"],
     "ios": {
       "supportsTablet": true,
@@ -25,10 +24,7 @@
       "userInterfaceStyle": "automatic",
       "package": "com.formidable.victorynativexldemo"
     },
-    "plugins": [
-      "expo-router",
-      "expo-asset"
-    ],
+    "plugins": ["expo-router", "expo-asset"],
     "extra": {
       "router": {
         "origin": false

example/app/_layout.tsx

@@ -4,7 +4,7 @@ import { Platform, StyleSheet, Text, View } from "react-native";
 import { useAssets } from "expo-asset";
 import { Image, type ImageSource } from "expo-image";
 import { useDarkMode } from "react-native-dark";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 
 const titleCaseName = (name: string) =>
   name

example/app/axis-configuration.tsx

@@ -20,9 +20,9 @@ import {
 import { InputColor } from "example/components/InputColor";
 import { InputText } from "example/components/InputText";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 
 const parseTickValues = (tickString?: string) =>
   tickString

example/app/bar-chart.tsx

@@ -22,12 +22,12 @@ import {
   withTiming,
 } from "react-native-reanimated";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InputSwitch } from "../components/InputSwitch";
 import { InputSlider } from "../components/InputSlider";
 import { Button } from "../components/Button";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 import { InputSegment } from "../components/InputSegment";
 import { InputColor } from "../components/InputColor";
 

example/app/bar-charts-custom-bars.tsx

@@ -6,7 +6,7 @@ import { Bar, CartesianChart, useChartPressState } from "victory-native";
 import { useDarkMode } from "react-native-dark";
 import { Text } from "example/components/Text";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 
 const DATA = (length: number = 10) =>
   Array.from({ length }, (_, index) => ({

example/app/bar-group.tsx

@@ -3,12 +3,12 @@ import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
 import { BarGroup, CartesianChart } from "victory-native";
 import { LinearGradient, useFont, vec } from "@shopify/react-native-skia";
 import { useDarkMode } from "react-native-dark";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import inter from "../assets/inter-medium.ttf";
 import { Button } from "../components/Button";
 import { InputSlider } from "../components/InputSlider";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 
 const DATA = (length: number = 10) =>
   Array.from({ length }, (_, index) => ({

example/app/bar-with-tooltip.tsx

@@ -21,8 +21,8 @@ import {
 import { BarGroup, CartesianChart, useChartPressState } from "victory-native";
 import inter from "../assets/inter-medium.ttf";
 import { InfoCard } from "../components/InfoCard";
-import { appColors } from "./consts/colors";
-import { descriptionForRoute } from "./consts/routes";
+import { appColors } from "../consts/colors";
+import { descriptionForRoute } from "../consts/routes";
 
 const DATA = Array.from({ length: 6 }, (_, index) => {
   const low = Math.round(20 + 20 * Math.random());

example/app/constant-line-chart.tsx

@@ -17,7 +17,7 @@ import {
   optionsReducer,
 } from "example/hooks/useOptionsReducer";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 
 const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 25;
 

example/app/custom-drawing.tsx

@@ -5,11 +5,11 @@ import { CartesianChart } from "victory-native";
 import { useDarkMode } from "react-native-dark";
 import { useState } from "react";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InputSlider } from "../components/InputSlider";
 import { InputColor } from "../components/InputColor";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 
 const DATA = Array.from({ length: 13 }, (_, index) => ({
   day: index + 1,

example/app/custom-gesture.tsx

@@ -11,7 +11,7 @@ import type { SharedValue } from "react-native-reanimated";
 import { Gesture } from "react-native-gesture-handler";
 import { useRef } from "react";
 import { InfoCard } from "example/components/InfoCard";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import inter from "../assets/inter-medium.ttf";
 
 export default function CustomGestureScreen() {

example/app/custom-shaders.tsx

@@ -15,9 +15,9 @@ import {
   withTiming,
 } from "react-native-reanimated";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 import { Button } from "../components/Button";
 
 const generateData = () =>
@@ -135,7 +135,7 @@ float f(vec3 p) {
     return .1 - length(cos(p.xy) + sin(p.yz));
 }
 
-vec4 main(vec2 FC) { 
+vec4 main(vec2 FC) {
     vec3 d = .5 - FC.xy1 / resH;
     vec3 p=vec3(0);
     for (int i = 0; i < 32; i++) {

example/app/dashed-axes.tsx

@@ -8,9 +8,9 @@ import * as React from "react";
 import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
 import { Area, CartesianChart, Line } from "victory-native";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 import { Button } from "../components/Button";
 
 const generateData = () =>

example/app/donut-chart.tsx

@@ -4,8 +4,8 @@ import { LinearGradient, vec } from "@shopify/react-native-skia";
 import { Pie, PolarChart } from "victory-native";
 import { InfoCard } from "example/components/InfoCard";
 import { Button } from "example/components/Button";
-import { appColors } from "./consts/colors";
-import { descriptionForRoute } from "./consts/routes";
+import { appColors } from "../consts/colors";
+import { descriptionForRoute } from "../consts/routes";
 
 function calculateGradientPoints(
   radius: number,

example/app/guides/getting-started.tsx

@@ -4,9 +4,9 @@ import { CartesianChart, Line, useChartPressState } from "victory-native";
 import { Circle, useFont } from "@shopify/react-native-skia";
 import type { SharedValue } from "react-native-reanimated";
 import { Button } from "example/components/Button";
-import { appColors } from "../consts/colors";
+import { appColors } from "../../consts/colors";
 import inter from "../../assets/inter-medium.ttf";
-import { urlForRoute } from "../consts/routes";
+import { urlForRoute } from "../../consts/routes";
 
 export default function GettingStartedScreen(props: { segment: string }) {
   const font = useFont(inter, 12);

example/app/guides/multi-press.tsx

@@ -4,11 +4,11 @@ import { CartesianChart, Line, useChartPressState } from "victory-native";
 import { Circle, useFont } from "@shopify/react-native-skia";
 import type { SharedValue } from "react-native-reanimated";
 import { Button } from "example/components/Button";
-import { appColors } from "../consts/colors";
+import { appColors } from "../../consts/colors";
 import inter from "../../assets/inter-medium.ttf";
-import { urlForRoute } from "../consts/routes";
+import { urlForRoute } from "../../consts/routes";
 
-const initChartPressState = { x: 0, y: { highTmp: 0 } } as const;
+const initChartPressState = { x: 0, y: { highTmp: 0 } };
 
 export default function GettingStartedScreen(props: { segment: string }) {
   const font = useFont(inter, 12);

example/app/horizontal-bands-line.tsx

@@ -15,11 +15,11 @@ import {
 import { useEffect } from "react";
 import { useDarkMode } from "react-native-dark";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InfoCard } from "../components/InfoCard";
 import { AnimatedText } from "../components/AnimatedText";
 import { Text } from "../components/Text";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 
 interface HorizontalBandsShaderProps {
   yScale: Scale;

example/app/index.tsx

@@ -8,11 +8,11 @@ import {
   Linking,
 } from "react-native";
 import { ChartCard } from "../components/ChartCard";
-import { appColors } from "./consts/colors";
-import { ChartRoutes } from "./consts/routes";
+import { appColors } from "../consts/colors";
+import { ChartRoutes } from "../consts/routes";
 import { InfoCard } from "../components/InfoCard";
 import { Button } from "../components/Button";
-import { VICTORY_OSS_URL } from "./consts/urls";
+import { VICTORY_OSS_URL } from "../consts/urls";
 import { Text } from "../components/Text";
 
 export default function LandingPage() {

example/app/line-chart.tsx

@@ -21,10 +21,10 @@ import {
 import { InputColor } from "example/components/InputColor";
 import { InputText } from "example/components/InputText";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { Button } from "../components/Button";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 
 const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 25;
 

example/app/missing-data.tsx

@@ -9,7 +9,7 @@ import {
   useChartPressState,
 } from "victory-native";
 import { Circle, useFont } from "@shopify/react-native-skia";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import inter from "../assets/inter-medium.ttf";
 import { Button } from "../components/Button";
 import { InputSegment } from "../components/InputSegment";

example/app/multiple-y-axes.tsx

@@ -18,7 +18,7 @@ import {
   withTiming,
 } from "react-native-reanimated";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InputSlider } from "../components/InputSlider";
 import { InfoCard } from "../components/InfoCard";
 

example/app/negative-bar-charts.tsx

@@ -4,11 +4,11 @@ import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
 import { Bar, BarGroup, CartesianChart, StackedBar } from "victory-native";
 import { useDarkMode } from "react-native-dark";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { Button } from "../components/Button";
 import { InfoCard } from "../components/InfoCard";
 import { Text } from "../components/Text";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 import { Checkbox } from "../components/Checkbox";
 
 const STACKED_DATA = (length: number = 5) =>

example/app/ordinal-data.tsx

@@ -16,11 +16,11 @@ import {
 import { useEffect } from "react";
 import { useDarkMode } from "react-native-dark";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InfoCard } from "../components/InfoCard";
 import { AnimatedText } from "../components/AnimatedText";
 import { Text } from "../components/Text";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 
 const colors = [appColors.tint, "#818cf8"];
 

example/app/pan-zoom.tsx

@@ -22,7 +22,7 @@ import {
   useFont,
 } from "@shopify/react-native-skia";
 import { useState } from "react";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import inter from "../assets/inter-medium.ttf";
 
 import { Button } from "../components/Button";

example/app/pie-and-donut-charts.tsx

@@ -10,8 +10,8 @@ import {
 import { Pie, PolarChart } from "victory-native";
 import { InfoCard } from "example/components/InfoCard";
 import { Text } from "example/components/Text";
-import { appColors } from "./consts/colors";
-import { descriptionForRoute } from "./consts/routes";
+import { appColors } from "../consts/colors";
+import { descriptionForRoute } from "../consts/routes";
 
 function calculateGradientPoints(
   radius: number,

example/app/pie-chart.tsx

@@ -19,10 +19,10 @@ import { Button } from "example/components/Button";
 import { InputSlider } from "example/components/InputSlider";
 import { InputColor } from "example/components/InputColor";
 import { InputSegment } from "example/components/InputSegment";
-import { appColors } from "./consts/colors";
-import { descriptionForRoute } from "./consts/routes";
+import { appColors } from "../consts/colors";
+import { descriptionForRoute } from "../consts/routes";
 import inter from "../assets/inter-medium.ttf";
-import { PieChartCustomLabel } from "./pie-chart-custom-label";
+import { PieChartCustomLabel } from "../components/pie-chart-custom-label";
 
 const randomNumber = () => Math.floor(Math.random() * (50 - 25 + 1)) + 125;
 function generateRandomColor(): string {

example/app/scatter.tsx

@@ -9,11 +9,11 @@ import {
 } from "victory-native";
 import { useDarkMode } from "react-native-dark";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InputSlider } from "../components/InputSlider";
 import { Button } from "../components/Button";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 import { InputSegment } from "../components/InputSegment";
 
 const DATA = (length: number = 10) =>

example/app/scrollview-charts.tsx

@@ -5,7 +5,7 @@ import { Circle, useFont } from "@shopify/react-native-skia";
 import type { SharedValue } from "react-native-reanimated";
 import { InfoCard } from "example/components/InfoCard";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 
 const DATA = Array.from({ length: 31 }, (_, i) => ({
   day: i,

example/app/stacked-area-complex.tsx

@@ -11,9 +11,9 @@ import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
 import { CartesianChart, StackedArea } from "victory-native";
 import { Text } from "example/components/Text";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 import { Button } from "../components/Button";
 
 const generateData = () =>

example/app/stacked-area.tsx

@@ -10,9 +10,9 @@ import { SafeAreaView, ScrollView, StyleSheet, View } from "react-native";
 import { CartesianChart, StackedArea } from "victory-native";
 import { Text } from "example/components/Text";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 import { InfoCard } from "../components/InfoCard";
-import { descriptionForRoute } from "./consts/routes";
+import { descriptionForRoute } from "../consts/routes";
 
 const d = [
   { high: 5, low: 3, med: 4, month: "Jan" },

example/app/stacked-bar-charts-complex.tsx

@@ -5,7 +5,7 @@ import { StackedBar, CartesianChart, useChartPressState } from "victory-native";
 import { useDarkMode } from "react-native-dark";
 import { Text } from "example/components/Text";
 import inter from "../assets/inter-medium.ttf";
-import { appColors } from "./consts/colors";
+import { appColors } from "../consts/colors";
 
 const DATA = (length: number = 10) =>
   Array.from({ length }, (_, index) => ({