react-native-graph: Skia line graphs for React Native wallets

The problem react-native-graph targets: token history that scrubs at 120 FPS

The README states the library is used in the Bamboo app "to power thousands of token graphs every day." That sentence is the clearest statement of intent in the repository. This is not a general charting toolkit. It is one component, LineGraph, built for the specific shape of data that a wallet or exchange screen shows: a dense series of timestamped numbers that the user drags a finger across to read individual values.

The README's own bullet list frames the comparison directly: "Faster and smoother than react-native-svg graphs." The reason is architectural rather than cosmetic. SVG charts in React Native build a tree of view nodes that the bridge and the layout engine have to reconcile. Skia draws into a canvas. When you scrub across a thousand points, the SVG approach has to re-render elements; the Skia approach redraws a path.

The audience is narrow on purpose. If you are building a dashboard with stacked bars, a donut breakdown and a legend, react-native-graph is the wrong dependency. If you are building the price screen of a token detail page, it is aimed squarely at you.

How LineGraph renders: Skia paths, two renderers, and a gesture layer

The component takes a points array where each entry has a Date for horizontal position and a number for vertical value. The README is explicit that the points must be ordered from oldest to newest and that categorical string values are not supported on the x-axis. There is no internal sorting step mentioned, so a misordered array is your bug, not the library's.

The animated prop switches between two renderers. The README describes it as using "the animated renderer when true and the lightweight static renderer when false." That is the single most consequential prop in the table, because several other props are only available when animated is true: gradientFillColors, enablePanGesture, panGestureDelay, onGestureStart, onPointSelected and onGestureEnd all carry the availability note animated={true}. A static graph is cheaper, but it is also a graph the user cannot touch.

The scrub interaction is a press-and-hold, not a drag. panGestureDelay defaults to 300 milliseconds, the time a press must be held before scrubbing starts, and the README notes you can set it to 0 to start immediately. onPointSelected fires "when scrubbing reaches a different point," which is the hook you would use to update a price label above the chart.

Rendering quality comes from cubic bezier interpolation and, per the README bullets, "Native path interpolation in Skia" for the animation. The repository lists react-native-reanimated 4.5.1 and react-native-worklets 0.10.1 as devDependencies, which is consistent with animation work running off the JS thread.

Installing react-native-graph and drawing a first line

The README lists four packages to add. Reanimated, Gesture Handler and Skia are peer-level native dependencies, and the README notes that Reanimated itself requires react-native-worklets. This is the real cost of entry: you are adding four native modules to your app, not one.

yarn add react-native-reanimated
yarn add react-native-gesture-handler
yarn add @shopify/react-native-skia
yarn add react-native-graph

The README's Expo section states that the example in the repository runs in Expo Go with Expo SDK 57, provided you install react-native-graph alongside the Expo SDK's compatible versions of Skia, Reanimated, Worklets and Gesture Handler. That is the fastest way to see the component on a device without building a custom development client.

Once installed, the usage example from the README is a single component with a required points array and a required color. Note that animated defaults to false, so this first render is the static renderer.

import { LineGraph, type GraphPoint } from 'react-native-graph';

const priceHistory: GraphPoint[] = [
  { date: new Date('2026-08-27T00:00:00Z'), value: 3.44 },
  { date: new Date('2026-08-28T00:00:00Z'), value: 3.51 },
  { date: new Date('2026-08-29T00:00:00Z'), value: 3.49 },
];

function App() {
  return (
    <LineGraph
      style={{ height: 200 }}
      points={priceHistory}
      animated={false}
      color="#4484B2"
    />
  );
}

To get the interaction the library is known for, flip animated to true and enable the pan gesture. Remember that panGestureDelay defaults to 300 milliseconds, so a quick tap will not start a scrub.

<LineGraph
  style={{ height: 200 }}
  points={priceHistory}
  animated
  color="#4484B2"
  enablePanGesture
  onPointSelected={(point) => console.log(point.value)}
/>

The README also states plainly that the library "does not fetch data or provide a usePriceHistory hook." You build the GraphPoint[] from your own API, state or local data. LineGraph also accepts React Native ViewProps, forwarded to the root view, so style and layout props behave as they would on any View.

What react-native-graph does not do

The README states it directly: "react-native-graph does not fetch data or provide a usePriceHistory hook." There is no network layer, no caching, no time-range presets. Every charting library makes this choice, but it matters more here because the component is otherwise so narrow. You are responsible for the array, its ordering, and its lifetime across re-renders.

The x-axis only accepts dates. The README says categorical string values are not supported. That rules out the common case of charting revenue by product name or traffic by route without mapping those categories onto dates yourself, which is usually the wrong thing to do.

The prop table also shows a hard split between renderers. gradientFillColors, enablePanGesture, panGestureDelay and the three gesture callbacks are all marked as available only when animated={true}. If you want a static, cheap-to-render sparkline with a gradient fill underneath it, the table as written does not offer that combination. Whether the static renderer silently ignores those props or warns is not documented in the README.

Finally, the README does not document rollback, error handling, or what happens when the points array is empty or contains a single entry. Those are the first cases worth trying in the example app before you ship.

react-native-graph compared with react-native-svg chart libraries

The README makes one comparison explicitly: react-native-graph is "Faster and smoother than react-native-svg graphs." Libraries such as react-native-chart-kit, react-native-gifted-charts and victory-native take the SVG route, which means they can offer bar charts, pie charts, axes, legends and tooltips from one dependency.

That is the actual trade. An SVG-based charting library gives you breadth and a familiar API surface, at the cost of view-tree rendering for every point. react-native-graph gives you one chart type, rendered as a Skia path, and asks you to bring four native dependencies along with it.

If your app already uses Skia for other drawing work, the marginal cost of react-native-graph is small and the rendering path is consistent with the rest of your visuals. If Skia is not in your app, you are adding a graphics engine to draw a line. For a single static sparkline in a settings screen, that is a bad trade. For a scrubbing price chart on a token detail screen, it is the reason the library exists.

The topics list on the repository, which includes crypto, stock and wallet alongside skia, animated and linegraph, is a fair summary of where the project expects to be used.

Maintenance, licence and upgrade cost

The repository is not archived, and the last push was on 2026-09-17. Releases have been reasonably frequent through 2026: v1.2.0 on 2026-04-15, v1.3.0 on 2026-07-23 and v1.4.0 on 2026-08-24.

The licence is MIT, which permits commercial use, modification and redistribution provided the copyright notice and permission notice are included. That is a permissive licence with no copyleft obligation on your application code. This is a description of the licence text, not legal advice; check the LICENSE file in the repository for the exact terms.

The upgrade cost is not in react-native-graph itself. The root package.json pins react-native 0.86.3, react 19.2.3, @shopify/react-native-skia 2.6.2, react-native-reanimated 4.5.1, react-native-worklets 0.10.1 and react-native-gesture-handler ~2.32.0 as devDependencies. In your app, those versions are your problem. A Reanimated major bump or a Skia major bump is a native rebuild and a round of regression testing on both platforms. Budget for that, not for the graph component.

The workspace uses bun 1.3.1 as its package manager and turbo for task running, and lists @shopify/react-native-skia under trustedDependencies. That matters only if you are building the library from source; consumers installing from npm do not inherit the workspace layout.

Editorial conclusion

Adopt react-native-graph if you are drawing price or token history inside a React Native app that already has Skia, Reanimated, Worklets and Gesture Handler in its dependency tree, and you want pan-to-scrub without writing your own Skia path code. Do not adopt it if you need bar, pie or categorical charts, or if you cannot add those four native dependencies. Before writing any app code, check that the Expo SDK 57 example in the repository's example directory runs in Expo Go on your target device, and confirm that your own GraphPoint[] array is sorted oldest to newest, because the component does not sort it for you.

Frequently asked questions

Official sources

1. License: MIT
2. margelo/react-native-graph on GitHub
3. Project website
4. README
5. Releases