I am using a Windows computer and working on a React Native project using Yarn and Expo. I am trying to use "@rainbow-me/animated-charts".
Here are the summarized steps I took to install their package, as per their documentation.
Installed react-native-reanimated (~2.3.1).
Adjusted my babel.config.js file.
Installed @rainbow-me/animated-charts (^1.0.0-alpha.6)
Cleared Expo bundler cache using "expo start --clear"
I created a separate Screen to replicate this issue using the example code provided in their Github repo:https://github.com/rainbow-me/react-native-animated-charts
import React from "react";
import { View, Text, Dimensions } from "react-native";
import {
ChartDot,
ChartPath,
ChartPathProvider,
monotoneCubicInterpolation,
} from "@rainbow-me/animated-charts";
export const { width: SIZE } = Dimensions.get("window");
const data = [
{ x: 1453075200, y: 1.47 },
{ x: 1453161600, y: 1.37 },
{ x: 1453248000, y: 1.53 },
{ x: 1453334400, y: 1.54 },
{ x: 1453420800, y: 1.52 },
{ x: 1453507200, y: 2.03 },
{ x: 1453593600, y: 2.1 },
{ x: 1453680000, y: 2.5 },
{ x: 1453766400, y: 2.3 },
{ x: 1453852800, y: 2.42 },
{ x: 1453939200, y: 2.55 },
{ x: 1454025600, y: 2.41 },
{ x: 1454112000, y: 2.43 },
{ x: 1454198400, y: 2.2 },
];
// const points = monotoneCubicInterpolation({ data, range: 40 });
const TestingScreen = () => {
return (
<View style={{ backgroundColor: "black" }}>
<ChartPathProvider data={{ points, smoothingStrategy: "bezier" }}>
<ChartPath height={SIZE / 2} stroke="yellow" width={SIZE} />
<ChartDot style={{ backgroundColor: "blue" }} />
</ChartPathProvider>
</View>
);
};
export default TestingScreen;
Here is the issue
As soon as I add the imports line:
import {
ChartDot,
ChartPath,
ChartPathProvider,
monotoneCubicInterpolation,
} from "@rainbow-me/animated-charts";
Expo crashes, see below:
Is there a solution to this?
