React Native Charts for Beginners

Learn how to build a clean, customizable bar chart in React Native using the Gifted Charts library. It’s perfect for developers who want to add charts without complicated external services or heavy setup.

You'll see how to create a new Expo project, install Gifted Charts and its dependencies, and style a bar chart with colors, gradients, and labels. I also covers how to let users select color themes dynamically to update the chart and background.

What's inside

• Why charts in React Native don’t have to be hard
• Creating a new Expo project and installing Gifted Charts
• Styling a simple bar chart with colors and labels
• Using linear gradients for chart bars and background
• Managing color themes and applying them dynamically
• Adding a color theme selector UI
• Using React Native’s new boxShadow for styling
• Working with dummy data and suggestions for real data sources

Why charts in React Native don’t have to be hard

Many developers try to reinvent the wheel when they need simple charts in React Native. This video shows that you can avoid complex setups or external services by using the Gifted Charts library, which offers customizable charts out of the box.

Gifted Charts supports multiple chart types like pie and bar charts. I focus on the bar chart, demonstrating how to get started quickly with minimal configuration while still achieving polished UI results.

Creating a new Expo project and installing Gifted Charts

I start by creating a new Expo project using the command:

• npx create-expo-app simple-chart-video

After opening the project in an editor, the next step is installing Gifted Charts and its peer dependencies:

• npm install react-native-gifted-charts react-native-svg expo-linear-gradient

These dependencies are necessary because Gifted Charts relies on SVG rendering and linear gradients for styling. After installation, the Expo server is restarted to apply changes.

Styling a simple bar chart with colors and labels

Once Gifted Charts is installed, I show how to import the BarChart component and render it with some example data from the GitHub repo.

The initial chart looks basic, so the next step is to clean up the view and add colors and labels. I use a constants file with Tailwind-inspired color palettes to keep colors consistent.

Labels and colors are passed as props to the BarChart, making it easy to customize the appearance. I emphasize keeping the chart simple and readable.

Using linear gradients for chart bars and background

To enhance the UI, I demonstrate using Expo’s LinearGradient component both as the screen background and inside the bar chart bars.

Wrapping the entire screen in a LinearGradient creates a smooth color transition background that matches the selected theme. The bar chart itself also supports gradients, which are applied to the bars for a polished look.

This approach avoids heavy external styling libraries and keeps the UI performant and visually appealing.

Managing color themes and applying them dynamically

I introduces a dictionary of color themes, each with primary and accent colors. Using React’s useState, the current theme is stored and used to dynamically update the chart colors and background gradient.

By selecting different themes, the chart and background colors update automatically. I show how to access colors from the theme object and apply lighter or stronger variants for backgrounds or accents.

This pattern allows easy theming and user customization in your app.

Adding a color theme selector UI

To let users pick a color theme, I add a simple UI section with buttons representing each theme color.

This selector is wrapped in a View with padding and uses React Native’s Text and TouchableOpacity components. Pressing a button updates the current theme state, which triggers the chart and background to re-render with the new colors.

This interactive feature makes the chart feel dynamic and customizable without complex state management.

Using React Native’s new boxShadow for styling

I highlight React Native’s new boxShadow style property, which works on both iOS and Android, replacing the older shadowColor and elevation props.

This makes it easier to add consistent shadows to cards or containers around the chart or selector UI, improving the visual hierarchy and polish.

Using boxShadow aligns React Native styling more closely with CSS, simplifying cross-platform UI work.

Working with dummy data and suggestions for real data sources

The chart uses hard-coded dummy data for demonstration. I suggest that in real apps, you might fetch data from a database or local storage like SQLite or AsyncStorage.

I recommend Prisma’s new Postgres and SQLite offerings for easy database integration with React Native, linking to a related video on building a to-do app with Prisma.

This advice helps you plan for real-world data handling beyond static examples.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Premium resourcePro Membership

Access source code for charts demo and premium React Native content.