Shopify Question posted in
The Shopify help center can be found here.

Shopify – Render Error Element Type is invalid: expected a string

I’m looking to move from Victory Native to Victory Native XL. I’m however, getting a Render Error Element type is invalid error message.

import * as React from "react";
import { View } from "react-native";
import { CartesianChart, Line, useChartPressState } from "victory-native";
import { Circle, useFont } from "@shopify/react-native-skia";
import type { SharedValue } from "react-native-reanimated";
import inter from "../../assets/inter-medium.ttf"; // Wherever your font actually lives

function MyChart() {
  const font = useFont(inter, 12);
  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });

  return (
    <View style={{ height: 300 }}>
      <CartesianChart
        data={DATA}
        xKey="day"
        yKeys={["highTmp"]}
        axisOptions={{
          font,
        }}
        chartPressState={state}
      >
        {({ points }) => (
          <>
            <Line points={points.highTmp} color="red" strokeWidth={3} />
            {isActive && (
              <ToolTip x={state.x.position} y={state.y.highTmp.position} />
            )}
          </>
        )}
      </CartesianChart>
    </View>
  );
}

function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) {
  return <Circle cx={x} cy={y} r={8} color="black" />;
}

const DATA = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  highTmp: 40 + 30 * Math.random(),
}));`

I’m currently looking to run the complete code in the Getting Started section:

https://commerce.nearform.com/open-source/victory-native/getting-started

I have updated Android Studio to the latest version

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Seems to have been an issue with the package manager. I reinstalled each dependency separately using npm instead of yarn and now it works.


  2. 0

    Following example works for me:

    import * as React from "react";
import { View } from "react-native";
import { CartesianChart, Line, useChartPressState } from "victory-native";
import { Circle, useFont } from "@shopify/react-native-skia";
import type { SharedValue } from "react-native-reanimated";
//import inter from "../../assets/inter-medium.ttf"; // Wherever your font actually lives

export default function MyChart() {
  //const font = useFont(inter, 12);
  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });

  return (
    <View style={{ height: 300 }}>
      <CartesianChart
        data={DATA}
        xKey="day"
        yKeys={["highTmp"]}
        // axisOptions={{
        //   font,
        // }}
        chartPressState={state}
      >
        {({ points }) => (
          <>
            <Line points={points.highTmp} color="red" strokeWidth={3} />
            {isActive && (
              <ToolTip x={state.x.position} y={state.y.highTmp.position} />
            )}
          </>
        )}
      </CartesianChart>
    </View>
  );
}

function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) {
  return <Circle cx={x} cy={y} r={8} color="black" />;
}

const DATA = Array.from({ length: 31 }, (_, i) => ({
  day: i,
  highTmp: 40 + 30 * Math.random(),
}));

    My package.json:

      "dependencies": {
    "@shopify/react-native-skia": "0.1.221",
    "force": "^0.0.3",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-reanimated": "3.6.2",
    "react-native-svg": "14.1.0",
    "victory-native": "*",
    "react-native-paper": "4.9.2"
  },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search