feat: upgrade expo, RN, and Skia (and deps)

.changeset/forty-turtles-explain.md

@@ -0,0 +1,7 @@
+---
+"victory-native": major
+---
+
+Bump Expo 51, RN 74, Skia 1.0+
+
+

.gitignore

@@ -7,6 +7,8 @@ node_modules/
 example/.expo/
 dist/
 web-build/
+example/android/*
+example/ios/*
 
 # Native
 *.orig.*

example/app.json

@@ -21,10 +21,12 @@
  "bundleIdentifier": "com.formidable.victorynativexldemo"
  },
  "android": {
- "userInterfaceStyle": "automatic"
+ "userInterfaceStyle": "automatic",
+ "package": "com.formidable.victorynativexldemo"
  },
  "plugins": [
- "expo-router"
+ "expo-router",
+ "expo-asset"
  ],
  "extra": {
  "router": {

example/app/scrollview-charts.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
-import { StyleSheet, View, SafeAreaView } from "react-native";
+import { StyleSheet, View, SafeAreaView, ScrollView } from "react-native";
 import { CartesianChart, Line, useChartPressState } from "victory-native";
-import { ScrollView } from "react-native-gesture-handler";
 import { Circle, useFont } from "@shopify/react-native-skia";
 import type { SharedValue } from "react-native-reanimated";
 import { InfoCard } from "example/components/InfoCard";
@@ -13,7 +12,7 @@ const DATA = Array.from({ length: 31 }, (_, i) => ({
  highTmp: 40 + 30 * Math.random(),
 }));
 
-const BarChart = () => {
+const LineChart = () => {
  const font = useFont(inter, 12);
  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });
  return (
@@ -45,7 +44,7 @@ export default function GettingStartedScreen() {
  {Array.from({ length: 5 }, (_, i) => (
  <React.Fragment key={i}>
  <View style={styles.chart}>
- <BarChart />
+ <LineChart />
  </View>
  <InfoCard style={styles.card}>
  Just a page with a number of charts nested within a ScrollView

example/app/stock-price.tsx

@@ -281,14 +281,6 @@ const StockArea = ({
  return path;
  });
 
- const gradColors = useDerivedValue(() => {
- if (!isWindowActive) return [appColors.tint, `${appColors.tint}33`];
-
- return isDeltaPositive.value
- ? [appColors.success[colorPrefix], `${appColors.success[colorPrefix]}33`]
- : [appColors.error[colorPrefix], `${appColors.error[colorPrefix]}33`];
- });
-
  const windowLineColor = useDerivedValue(() => {
  return isDeltaPositive.value
  ? appColors.success[colorPrefix]
@@ -329,7 +321,19 @@ const StockArea = ({
  <LinearGradient
  start={vec(0, 0)}
  end={vec(top, bottom)}
- colors={gradColors}
+ colors={
+ !isWindowActive
+ ? [appColors.tint, `${appColors.tint}33`]
+ : isDeltaPositive.value
+ ? [
+ appColors.success[colorPrefix],
+ `${appColors.success[colorPrefix]}33`,
+ ]
+ : [
+ appColors.error[colorPrefix],
+ `${appColors.error[colorPrefix]}33`,
+ ]
+ }
  />
  </Path>
  <Path

example/babel.config.js

@@ -3,10 +3,6 @@ module.exports = function (api) {
  api.cache(true);
  return {
  presets: ["babel-preset-expo"],
- plugins: [
- "react-native-dark/plugin",
- "react-native-reanimated/plugin",
- "expo-router/babel",
- ],
+ plugins: ["react-native-dark/plugin"],
  };
 };