DEV Community

Laxman Nemane
Laxman Nemane

Posted on

📢 Getting Started with Victory Native in React Native 🚀

#javascript #mobile #reactnative #mobiledev

🖐 Hey Devs! If you’re looking to visualize data in your React Native app with beautiful, customizable charts, Victory Native is a great choice! 📊 In this post, I’ll walk you through how to use victory-native, from installation to creating a simple bar and line chart. Let’s dive in! 🚀

1️⃣ Installation
First, you need to install victory-native along with react-native-svg, as Victory depends on it for rendering.

Run the following command in your project:

npm install victory-native react-native-svg
Enter fullscreen mode Exit fullscreen mode

⚠️ Important Note (Potential Issues & Fixes)

  • Check Compatibility: Sometimes, victory-native might not work due to an incompatible version of react-native-svg. If you face issues, ensure you’re using a compatible version of react-native-svg.
  • Rebuild the App: If you encounter errors after installation, don’t panic! Just kill the app and rebuild:

2️⃣ Creating a Simple Line Chart
Here’s how you can create a basic line chart using VictoryChart and VictoryLine:

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { VictoryChart, VictoryLine, VictoryTheme, VictoryAxis } from "victory-native";

const LineChartExample = () => {
  const data = [
    { x: 1, y: 2 },
    { x: 2, y: 3 },
    { x: 3, y: 5 },
    { x: 4, y: 4 },
    { x: 5, y: 7 }
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>📈 Sales Data (Last 5 Days)</Text>
      <VictoryChart theme={VictoryTheme.material}>
        <VictoryAxis label="Days" />
        <VictoryAxis dependentAxis label="Sales ($)" />
        <VictoryLine data={data} style={{ data: { stroke: "blue", strokeWidth: 3 } }} />
      </VictoryChart>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: "#fff" },
  title: { fontSize: 18, fontWeight: "bold", textAlign: "center", marginBottom: 10 },
});

export default LineChartExample;
Enter fullscreen mode Exit fullscreen mode

🔹 Key Features:

  • VictoryChart: Provides the Cartesian coordinate system.
  • VictoryLine: Plots the line graph.
  • VictoryAxis: Adds labels for X and Y axes.

3️⃣ Creating a Bar Chart

Let’s create a bar chart to show coffee consumption per day. ☕

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import { VictoryChart, VictoryBar, VictoryTheme, VictoryAxis } from "victory-native";

const BarChartExample = () => {
  const data = [
    { day: "Mon", cups: 3 },
    { day: "Tue", cups: 5 },
    { day: "Wed", cups: 2 },
    { day: "Thu", cups: 6 },
    { day: "Fri", cups: 4 }
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.title}>☕ Coffee Consumption</Text>
      <VictoryChart theme={VictoryTheme.material}>
        <VictoryAxis />
        <VictoryAxis dependentAxis />
        <VictoryBar data={data} x="day" y="cups" style={{ data: { fill: "brown" } }} />
      </VictoryChart>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: "#fff" },
  title: "{ fontSize: 18, fontWeight: \"bold\", textAlign: \"center\", marginBottom: 10 },"
});

export default BarChartExample;
Enter fullscreen mode Exit fullscreen mode

4️⃣ Final Thoughts

Victory Native is a powerful charting library that makes data visualization in React Native smooth and easy. Whether you need bar charts, line graphs, or pie charts, Victory provides a flexible and customizable solution.

👉 What’s your favorite chart type in Victory? Let’s discuss in the comments below! 🚀

Happy coding! 👨‍💻🎨

Top comments (0)