margelo/react-native-graph

What is it?

Key features

• 01Line graphs rendered with Skia, with cubic bezier curves for smoother edges.
• 02Animated transitions between data sets, running on the UI thread.
• 03Press-and-hold pan gesture for scrubbing through points, with selection callbacks.
• 04Static renderer option for lightweight display of many graphs in a list.
• 05Customizable selection dot, end-point indicator, and top/bottom axis labels.
• 06Optional fixed x and y ranges to show a specific time frame or value scale.

Use cases

• Showing token or asset price history in a crypto wallet or trading app.
• Displaying stock or portfolio performance charts in a React Native app.
• Rendering many small sparkline-style graphs in a scrollable list.
• Adding interactive price scrubbing that updates a label as the user drags across the chart.

Quick start

1. 1

   Install the peer dependencies Reanimated, Gesture Handler and Skia

   yarn add react-native-reanimated
2. 2

   Install react-native-graph itself

   yarn add react-native-graph
3. 3

   Render a LineGraph component with your GraphPoint array and a color prop

Things to know

• !Requires Reanimated, Gesture Handler and Skia to be installed alongside it.
• !Pan gesture, labels, selection dot and gradient fill only work with animated set to true.
• !The graph does not fetch data; you must supply the points yourself.
• !Categorical string values are not supported on the x-axis.

Topics

FAQ

What is react-native-graph?

A React Native line graph and chart component built on Skia, with animations, cubic bezier edges and touch scrubbing. react-native-graph is a line graph component for React Native, rendered with the Skia 2D graphics engine. It draws smooth cubic bezier curves and supports animated transitions between data sets, with animations running on the UI thread for up to 120 FPS.

Is react-native-graph free to use? What license does it have?

react-native-graph is open source under the MIT license. Check the license terms before using it in commercial products.

Is react-native-graph still maintained?

Actively maintained. The last commit to react-native-graph was on Oct 13, 2026.

What can I use react-native-graph for?

Showing token or asset price history in a crypto wallet or trading app. Displaying stock or portfolio performance charts in a React Native app. Rendering many small sparkline-style graphs in a scrollable list. Adding interactive price scrubbing that updates a label as the user drags across the chart.

How do I install react-native-graph?

Install the peer dependencies Reanimated, Gesture Handler and Skia: yarn add react-native-reanimated Install react-native-graph itself: yarn add react-native-graph Render a LineGraph component with your GraphPoint array and a color prop

Where can I get react-native-graph?

The source code and installation instructions are on GitHub: https://github.com/margelo/react-native-graph