react-sparklines – component name capitalization error

How to / Third Party Tooling
1

i’m trying to figure out how to get react-sparklines to work in my Expo project

i think i’ve got it right (as per the examples in the demo) but i keep getting errors on the component names

<Sparklines data={[5, 10, 5, 20]} > <SparklinesLine /> </Sparklines>

results in

Invariant Violation: View config not found for name circle. Make sure to start component name with a capital letter.

This error is located at: in circle (created by SparklinesLine)...

unfortunately the project doesn’t seem to be updated often, so i’m wondering if there’s a way around this component capitalization issue, or if there’s another great sparklines that’s better to use!

2

The problem is it is outputting SVGs, but not using react-native-svg (obviously, because it’s not written for React Native). So it contains code like this:

      <g transform="scale(1,-1)">
        {points.map((p, i) =>
          <rect
            key={i}
            x={p.x - (width + strokeWidth) / 2}
            y={-height}
            width={width}
            height={Math.max(0, height - p.y)}
            style={style}
            onMouseMove={onMouseMove && onMouseMove.bind(this, p)}
          />,
        )}
      </g>

when it would need something like this instead:

import Svg, { G, Rect } from 'react-native-svg';

// ...

      <G transform="scale(1,-1)">
        {points.map((p, i) =>
          <Rect
            key={i}
            x={p.x - (width + strokeWidth) / 2}
            y={-height}
            width={width}
            height={Math.max(0, height - p.y)}
            style={style}
            onMouseMove={onMouseMove && onMouseMove.bind(this, p)}
          />,
        )}
      </G>

But I think it should be pretty easy to get it to work if you fork it and basically search and replace all the SVG tags and add the necessary imports.

EDIT: Actually, I just noticed the onMouseMove stuff. Not sure what you’d need to do with that :thinking: