Basic Line Chart in React-Native with VictoryCharts

basicLineChart.js

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import { 
  VictoryLine, 
  VictoryChart, 
  VictoryTheme, 
  VictoryContainer,
  VictoryAxis,
} from "victory-native";

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  calculateSevenDayHistory() {
    // todo: write this method

    return {
      today: 7.50,
      yesterday: 8.99,
      twoDaysAgo: 15.49,
      threeDaysAgo: 2.09,
      fourDaysAgo: 5.99,
      fiveDaysAgo: 27.88,
      sixDaysAgo: 57.60,
    };
  }

  render() {

    const sevenDayHistory = this.calculateSevenDayHistory();

    return(
      <SafeAreaView style={{flex: 100, justifyContent: 'center', alignItems: 'center'}}>
        <Text>VictoryApp</Text>
        <VictoryChart>
          <VictoryLine 
            containerComponent={<VictoryContainer />}
            style={{
              data: { stroke: "#c43a31", strokeWidth: 2},
              parent: { border: "3px solid #ccc"},
            }}
            data={[
              { x: "6/4", y: sevenDayHistory.sixDaysAgo },
              { x: "6/5", y: sevenDayHistory.fiveDaysAgo },
              { x: "6/7", y: sevenDayHistory.fourDaysAgo },
              { x: "6/8", y: sevenDayHistory.threeDaysAgo },
              { x: "6/9", y: sevenDayHistory.twoDaysAgo },
              { x: "6/10", y: sevenDayHistory.yesterday },
              { x: "6/11", y: sevenDayHistory.today },
            ]}
          />
        </VictoryChart>
      </SafeAreaView>
    );
  }
}

export default App;