coinjar/react-native-wagmi-charts

Malformed calls from JS: fields size is different

AtlasGold opened this issue · 1 comments

the error below occurs when I interact with the charts line but only on the physical android device (the emulator works fine)

image

my charts component file

import React from "react";
import { View, Text } from "react-native";
import { StyleSheet } from "react-native";
import { LineChart, LineChartCursor } from "react-native-wagmi-charts";

const Chart = ({
  currentPrice,
  logoURL,
  name,
  priceChangePercentage7d,
  sparkLine,
}: any) => {
  return (
    <View style={chartStyle.chartRoot}>
      <Text style={{ color: "white", fontSize: 20, textAlignVertical:"bottom" }}>
      
        Last Prices Of
      </Text>
      <LineChart.Provider data={sparkLine}>
        <LineChart>
          <LineChart.Path color="rgba(255, 255, 255, 0.76)" />
          <LineChart.CursorCrosshair color="white">
          <LineChart.Tooltip textStyle={{ color: "white" }}/>
      <LineChart.Tooltip position="bottom" textStyle={{ color: "white" }}>
        <LineChart.DatetimeText style={{ color: "white" }}/>
      </LineChart.Tooltip>
          </LineChart.CursorCrosshair>
        </LineChart>
      </LineChart.Provider>
    </View>
  );
};

my home screen where i use this component

 <NewBottomSheet ref={ref} logo={selectedCoin?.["image"]}>
          <View style={modalStyle.insideBottomSheet}>
            <LinearGradient
              colors={[
          "rgba(15, 15, 15, 1)",
          "rgba(15, 15, 15, 0.96)",
          "rgba(15, 15, 15, 0.87)"
        ]}
              start={{ x: 0, y: 0.75 }}
              end={{ x: 1, y: 0.25 }}
              style={{ borderRadius:50, flex:1}}> 
            {selectedCoin ? (
              <Chart
                currentPrice={selectedCoin?.["current_price"]}
                logoURL={selectedCoin?.["image"]}
                name={selectedCoin?.["name"]}
                priceChangePercentage7d={
                  selectedCoin?.["priceChangePercentage7d"]
                }
                sparkLine={selectedCoin?.["sparkline_in_7d"]["price"]}
              />
            ) : null}
            </LinearGradient>
          </View>
        </NewBottomSheet>

I'm also facing this issue trying to implement the interactive cursor example. From my side, It only happens on debug mode on chrome. It seems that since this library uses react reanimated v2, debug JSI is no longer supported software-mansion/react-native-reanimated#1220