The practical way to create a bar graph in React Native is to use a native chart library. Two well-documented options are Victory Native and react-native-gifted-charts. Victory maps named data fields through x and y, while gifted-charts uses objects with a value property and offers a direct horizontal option. The examples below cover React Native CLI and Expo, vertical, horizontal and stacked bars, touch handling, styling, sizing and troubleshooting.
Choose a bar-chart library
Your choice mainly depends on how you want to describe data and compose the chart.
| Concern | Victory Native | react-native-gifted-charts |
|---|---|---|
| Primary component | VictoryChart with VictoryBar |
BarChart |
| Data shape | Any objects, with fields selected by x and y |
Bar items such as {value: 50} |
| Horizontal bars | Configured through Victory chart properties and data orientation | Add the horizontal prop |
| Stacked bars | Compose Victory bar series | Use the documented stackData option |
| Touch callbacks | Use Victory event handlers | onPress and onLongPress are documented props |
| Dependencies | react-native-svg (peer dependency) |
react-native-svg plus a linear-gradient package |
Use Victory when you prefer chart-level composition and explicit mappings between category and value fields. Choose gifted-charts when a compact BarChart API, horizontal bars, built-in interaction props or stacked-bar data are central to your screen.
Neither project’s cited documentation provides a controlled benchmark on identical devices and datasets. Measure rendering and scrolling in your own target application rather than assuming one package is faster.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
Install the dependencies
Victory Native in a React Native project
npm install victory-native react-native-svgVictory Native lists react-native-svg, react and react-native as peer dependencies. In a current React Native project, install the SVG package with the package manager used by your app, then rebuild the native targets when your platform requires native dependency linking.
react-native-gifted-charts with React Native CLI
npm install react-native-gifted-charts react-native-linear-gradient react-native-svgreact-native-gifted-charts with Expo
npx expo install react-native-gifted-charts expo-linear-gradient react-native-svgUse expo install for Expo-managed dependencies so versions are selected for your Expo SDK. If you are using a development build rather than Expo Go, rebuild that development client after adding native modules.
Create a vertical bar graph with Victory Native
Victory’s documented example uses VictoryChart, VictoryBar and VictoryTheme. The x and y props tell the chart which object fields represent the category and measurement.
import React from 'react';
import { VictoryBar, VictoryChart, VictoryTheme } from 'victory-native';
const data = [
{ quarter: 'Q1', earnings: 13000 },
{ quarter: 'Q2', earnings: 16500 },
{ quarter: 'Q3', earnings: 14250 },
{ quarter: 'Q4', earnings: 19000 },
];
export default function EarningsChart() {
return (
<VictoryChart width={350} theme={VictoryTheme.material}>
<VictoryBar data={data} x="quarter" y="earnings" />
</VictoryChart>
);
}Keep the chart inside a parent that gives it predictable width. On narrow phones, a fixed width such as 350 can exceed the available space; derive the width from a measured container or the device window and leave room for labels. Keep numeric values numeric, not strings, so scales and tooltips can calculate correctly.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Create a vertical bar graph with gifted-charts
Gifted-charts uses a smaller data shape. Each item normally has a value field; additional documented properties can control appearance and labels.
import React from 'react';
import { BarChart } from 'react-native-gifted-charts';
const data = [
{ value: 50 },
{ value: 80 },
{ value: 90 },
{ value: 70 },
];
export default function SimpleBars() {
return <BarChart data={data} />;
}For meaningful axis labels, add the label fields and presentation props supported by the version you installed. Pin the package version in production and check its props reference when upgrading, because optional names and defaults can change between releases.
Rank #2
Make a horizontal bar chart
With gifted-charts, horizontal orientation is a prop rather than a separate component:
import { BarChart } from 'react-native-gifted-charts';
const data = [
{ value: 82, label: 'Search' },
{ value: 64, label: 'Email' },
{ value: 47, label: 'Social' },
];
export function TrafficBars() {
return (
<BarChart
data={data}
horizontal
width={320}
barWidth={24}
frontColor="#2563eb"
/>
);
}Horizontal bars are useful for long category names because labels can sit beside the bar instead of competing for a narrow horizontal axis. Give the chart enough height for every row, and test the longest translated label if your app supports multiple languages.
Victory uses composed chart and bar components rather than the gifted-charts boolean. Keep the same conceptual data mapping—categories on one dimension and values on the other—and configure the Victory chart’s orientation and domain according to the Victory Native version in your project.
Build stacked bars
Stacking answers a different question from a single bar: it shows a total split into components. In gifted-charts, the documented stackData option is the relevant API. A typical item supplies segment values and colors according to the installed package’s props reference.
import React from 'react';
import { BarChart } from 'react-native-gifted-charts';
const data = [
{
stacks: [
{ value: 35, color: '#2563eb' },
{ value: 20, color: '#93c5fd' },
],
label: 'Q1',
},
{
stacks: [
{ value: 42, color: '#2563eb' },
{ value: 28, color: '#93c5fd' },
],
label: 'Q2',
},
];
export function RevenueMix() {
return <BarChart stackData={data} />;
}Stacked-data property names have varied across chart-library releases, so verify the exact segment field names in the props reference for your installed version before copying this pattern into a typed codebase. If each category has only one measure, use ordinary data instead; stacking adds visual complexity without adding information.
Size, style and interact with bars
Control dimensions
Gifted-charts documents width, height and barWidth. Set width explicitly when the chart is inside a card or horizontal list, and set height when labels or many bars otherwise cause clipping. Avoid making bars so thin that touch targets become difficult to use.
Apply color and gradients
The gifted-charts props reference includes frontColor and showGradient. Use a single high-contrast color for a simple series; reserve multiple colors for categories or stack segments with a legend. Check contrast in dark mode and do not rely on color alone to communicate a value.
Handle taps and long presses
Gifted-charts exposes onPress and onLongPress. Use these callbacks to select a bar, show a tooltip or navigate to detail. Keep callback state outside the data transformation so pressing a bar does not rebuild expensive data unnecessarily.
const [selected, setSelected] = useState(null);
<BarChart
data={data}
onPress={(item, index) => setSelected({ item, index })}
onLongPress={(item, index) => console.log('details', item, index)}
/>Callback argument shapes can be version-specific. Log one interaction during development and type the handler against the version you have installed rather than assuming arguments from another release.
Prepare data safely
- Convert API strings such as
"42"to finite numbers before rendering. - Decide how to display missing values: omit the bar, use zero, or show a separate unavailable state. Do not silently turn an unknown value into zero.
- Sort categories deliberately; chart libraries generally render the order supplied.
- Cap or format very large values and provide units in labels or nearby text.
- Memoize transformed arrays when the source data is large and the screen re-renders frequently.
For an empty response, render an empty-state message instead of an empty chart. For a single value, preserve a readable scale and explain what the comparison would normally contain.
Performance and reliability
There is no cited apples-to-apples performance benchmark for Victory Native versus gifted-charts. Test on the slowest device and OS version you support, using production-like bar counts, labels, gradients and interaction handlers.
- Measure screen commit time and scroll smoothness with the React Native performance tools.
- Keep chart data stable with memoization when parent components update for unrelated reasons.
- Reduce unnecessary animations and gradients when many bars are visible.
- Virtualize a long list of separate charts; do not mount every chart in a distant, off-screen row.
- Test rotation, font scaling, right-to-left layouts and accessibility settings.
SVG rendering, native-module versions and the JavaScript engine can affect results. Record the device, OS, React Native version, Expo SDK (if applicable), package versions and dataset size when comparing builds.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common failures
“Unable to resolve react-native-svg”
Install react-native-svg explicitly. For Expo, use the Expo-compatible install command, then restart Metro with its cache cleared and rebuild a development client when native code changed.
The chart is blank
Check that the data array is non-empty, values are finite numbers and Victory’s x/y names exactly match object keys. For gifted-charts, confirm every item has the expected value field (or the stack structure required by your version). Also give the parent a non-zero width and height.
Recommended Free Tools
Bars or labels are clipped
Increase chart width or height, reduce barWidth, shorten or rotate labels where supported, and account for safe-area padding. A fixed 350-pixel example is not automatically suitable for every phone.
Gradients fail on Expo
Use expo-linear-gradient with the Expo installation path, not the React Native CLI package. Rebuild if your workflow requires native modules.
Touches select the wrong bar
Log the callback arguments, verify the index against the current sorted data, and avoid changing the array order between render and press handling. Add an accessible textual alternative for users who cannot target small bars.
Android and iOS look different
Compare the same font scale, device pixel ratio, safe-area inset and native dependency versions. Set dimensions explicitly and test both platforms before relying on pixel-perfect spacing.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Best Value
Or skip the browser setup
If your goal is to capture a rendered web chart or dashboard rather than draw a native chart, ScreenshotNeo returns a screenshot or PDF from one request. It accepts consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status.
Use the API documentation at https://screenshotneo.com/docs/ for all options. A cURL request is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython and Node.js clients use the same endpoint:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo also provides an MCP server with take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. One thousand screenshots per month are free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account to try it.
Frequently Asked Questions
Can I use these libraries in an Expo app?
Yes. For gifted-charts, install the documented Expo packages with npx expo install react-native-gifted-charts expo-linear-gradient react-native-svg. Follow your Expo workflow’s rebuild requirements for native modules.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWhich library has the simplest horizontal-bar API?
react-native-gifted-charts documents a direct horizontal prop on BarChart. Victory uses composed chart configuration instead.
Is one library proven faster?
No controlled comparison is published in the cited documentation. Benchmark the versions, devices and datasets used by your application.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
