Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Example XAxisScaleTimeExample not working

See original GitHub issue

What is the problem?

Error

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

When trying XAxisScaleTimeExample.

What platform?

iOS
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

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:6

Top GitHub Comments

3reactions

peterkuipercommented, Feb 26, 2020

Change the date-fns import:

import * as dateFns from 'date-fns'

0reactions

BBenGitcommented, Apr 6, 2020

@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