React Native giving a Component Exception error when trying to use Victory chart component

Question

So I am trying to use the Victory library for react native in order to draw a line chart for my budgeting app. Here Is the code I have in my Graph component

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { VictoryLine } from 'victory';

export default function Graph() {
    return (
        <View>
            <VictoryLine />
        </View>
        
        
    )
}

Here is the code for where the component is being imported to

import React from 'react'
import { View, Text, StyleSheet, TextInput } from 'react-native'
import Graph from './Line'

export default function MonthSummary() {
    return (
        <View style={styles.container}>
            <Text style={styles.title}>My Summary</Text>
            <Text style={styles.subtitle}>£1,325</Text>
            <Graph />
        </View>
    )

}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        width: 350,
        height: 200,
        padding: 20,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
    },
    title: {
        textTransform: 'uppercase',
        fontSize: 14,
        fontWeight: '600',
        color: '#333333',
    },
    subtitle: {
        color: '#333333',
        fontSize: 30,
        marginTop: 5,
    }
  });

But when I run my application I get a Component Exception error. Screenshot here. If anyone could help that would be amazing as I've been struggling with it for hours!

Answer 1

Seems like you are using the web library instead of the react native one. Follow this to set it up and change your graph component to look like this

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { VictoryLine } from 'victory-native';

export default function Graph() {
    return (
        <View>
            <VictoryLine />
        </View>
        
        
    )
}