React-native-svg-charts: Example XAxisScaleTimeExample not working

[BBenGit]

What is the problem?

Error

TypeError: undefined is not an object (evaluating '_dateFns.default.setHours')

When trying XAxisScaleTimeExample.

What platform?

• [X] iOS
• [X] Android

react-native version: 0.61.5
react-native-svg-charts version: 5.3.0
react-native-svg version: 11.0.1

Code to reproduce

import React from "react";
import { AreaChart, XAxis, Grid } from "react-native-svg-charts";
import { View } from "react-native";
import * as scale from "d3-scale";
import * as shape from "d3-shape";
import dateFns from "date-fns";

const data = [
  {
    value: 50,
    date: dateFns.setHours(new Date(2018, 0, 0), 6)
  },
  {
    value: 10,
    date: dateFns.setHours(new Date(2018, 0, 0), 9)
  },
  {
    value: 150,
    date: dateFns.setHours(new Date(2018, 0, 0), 15)
  },
  {
    value: 10,
    date: dateFns.setHours(new Date(2018, 0, 0), 18)
  },
  {
    value: 100,
    date: dateFns.setHours(new Date(2018, 0, 0), 21)
  },
  {
    value: 20,
    date: dateFns.setHours(new Date(2018, 0, 0), 24)
  }
];

export default function App() {
  return (
    <View style={{ height: 200, padding: 20 }}>
      <AreaChart
        style={{ flex: 1 }}
        data={data}
        yAccessor={({ item }) => item.value}
        xAccessor={({ item }) => item.date}
        xScale={scale.scaleTime}
        contentInset={{ top: 10, bottom: 10 }}
        svg={{ fill: "rgba(134, 65, 244, 0.5)" }}
        curve={shape.curveLinear}
      >
        <Grid />
      </AreaChart>
      <XAxis
        data={data}
        svg={{
          fill: "black",
          fontSize: 8,
          fontWeight: "bold",
          rotation: 20,
          originY: 30,
          y: 5
        }}
        xAccessor={({ item }) => item.date}
        scale={scale.scaleTime}
        numberOfTicks={6}
        style={{ marginHorizontal: -15, height: 20 }}
        contentInset={{ left: 10, right: 25 }}
        formatLabel={value => dateFns.format(value, "HH:mm")}
      />
    </View>
  );
}

Stacktrace (if crash)

TypeError: undefined is not an object (evaluating '_dateFns.default.setHours')
<global>
    App.js:9:2
loadModuleImplementation
    require.js:322:6
<global>
    AppEntry.js:5
loadModuleImplementation
    require.js:322:6
guardedLoadModule
    require.js:201:45
global code
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:166617:4

[brendan1809]

Having the same problem

[peterkuiper]

Change the date-fns import:

import * as dateFns from 'date-fns'

[BBenGit]

Change the date-fns import:

import * as dateFns from 'date-fns'

@peterkuiper I did the change but I got a new error ...

Exception thrown while executing UI block: -[__NSCFNumber firstObject]: unrecognized selector sent to instance 0xec7dba9d817037c4

__53-[ABI36_0_0RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
    ABI36_0_0RCTUIManager.m:1166
__53-[ABI36_0_0RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.418
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0

[DonsWayo]

Same error here with latest expo sdk (empty new project)

[garrett-gottlieb]

Looks like an outdated example with a simple fix. dateFns may need to be imported as import * as dateFns. They probably updated the version since the example was written.

[BBenGit]

@garrett-gottlieb I already tried but I got another error. Maybe you know about this one ?

Change the date-fns import:

import * as dateFns from 'date-fns'

@peterkuiper I did the change but I got a new error ...

Exception thrown while executing UI block: -[__NSCFNumber firstObject]: unrecognized selector sent to instance 0xec7dba9d817037c4

__53-[ABI36_0_0RCTUIManager flushUIBlocksWithCompletion:]_block_invoke
    ABI36_0_0RCTUIManager.m:1166
__53-[ABI36_0_0RCTUIManager flushUIBlocksWithCompletion:]_block_invoke.418
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0