From 1ebf85a0fe48d97d74defe21fe51a9b96c862d5f Mon Sep 17 00:00:00 2001
From: Abhinandan Kushwaha <kushabhi5@gmail.com>
Date: Sat, 1 Jul 2023 20:10:43 +0530
Subject: [PATCH] updated the dependencies and the App.js file

---
 App.js                                     | 1103 ++++----------------
 examples/PieChart/SimplePie.js             |    1 +
 ios/GiftedCharts.xcodeproj/project.pbxproj |   14 +-
 ios/GiftedCharts/AppDelegate.m             |    2 +-
 ios/Podfile                                |   53 +-
 package.json                               |   34 +-
 6 files changed, 290 insertions(+), 917 deletions(-)

diff --git a/App.js b/App.js
index 1a0d34e..a901e7a 100644
--- a/App.js
+++ b/App.js
@@ -1,914 +1,253 @@
-import React, {useEffect, useState} from 'react';
-import {Dimensions, ScrollView, TouchableOpacity} from 'react-native';
-import {Alert} from 'react-native';
-import {View, Text, StyleSheet} from 'react-native';
-import {BarChart, LineChart, PieChart} from './src';
-import {Path, Pattern} from 'react-native-svg';
-import BarWithGradient from './examples/BarChart/BarWithGradient';
-import CappedBars from './examples/BarChart/CappedBars';
-import RoundStackBar from './examples/BarChart/RoundStackBar';
-import SimpleBarAnimated from './examples/BarChart/SimpleBarAnimated';
+import React, {useState} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  SafeAreaView,
+  ScrollView,
+} from 'react-native';
+
 import SimpleBlueBars from './examples/BarChart/SimpleBlueBars';
-import SimpleBlueBarsVerticalLines from './examples/BarChart/SimpleBlueBarsVerticalLines';
-import BarChartWithGivenNumberOfVerticalLines from './examples/BarChart/BarChartWithGivenNumberOfVerticalLines';
+import BarThreeD from './examples/BarChart/BarThreeD';
+import SimpleBarAnimated from './examples/BarChart/SimpleBarAnimated';
+import RoundStackBar from './examples/BarChart/RoundStackBar';
+import CappedBars from './examples/BarChart/CappedBars';
+import BarWithGradient from './examples/BarChart/BarWithGradient';
+
+import LineChartTwo from './examples/LineChart/LineChartTwo';
 import AnimatedArea from './examples/LineChart/AnimatedArea';
 import AreaTwo from './examples/LineChart/AreaTwo';
-import LineChartTwo from './examples/LineChart/LineChartTwo';
-import SimpleBlueLine from './examples/LineChart/SimpleBlueLine';
-import SimpleBlueLineWithGivenNumberOfVerticalLines from './examples/LineChart/SimpleBlueLineWithGivenNumberOfVerticalLines';
-import ProgressPie from './examples/PieChart/ProgressPie';
+import ChartWithPointer from './examples/LineChart/ChartWithPointer';
+import CaloriesBurnt from './examples/LineChart/CaloriesBurnt';
+
 import SimplePie from './examples/PieChart/SimplePie';
-import PieChartFocusOnPress from './examples/PieChart/PieChartFocusOnPress';
+import ProgressPie from './examples/PieChart/ProgressPie';
 import SplitPie from './examples/PieChart/SplitPie';
 import ThreeDPie from './examples/PieChart/ThreeDPie';
 import CaloriesBurnt from './examples/LineChart/CaloriesBurnt';
-import ScrollingChartWithPointer from './examples/LineChart/ScrollingChartWithPointer';
+import PieChartFocusOnPress from './examples/PieChart/PieChartFocusOnPress';
 
 const App = () => {
-  const [toggle, setToggle] = useState(true);
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     setCurrentData(latestData5);
-  //   }, 1100 + 100 + 310);
-  //   setTimeout(() => {
-  //     setCurrentData(latestData2);
-  //   }, 1100 + 300 + 620);
+  const [selectedFooterButton, setSelectedFooterButton] = useState(0);
 
-  //   setTimeout(() => {
-  //     setCurrentData(latestData5);
-  //   }, 1100 + 500 + 930);
-
-  //   setTimeout(() => {
-  //     setCurrentData(latestData3);
-  //   }, 1100 + 1000 + 1240);
-
-  //   setTimeout(() => {
-  //     setCurrentData(latestData4);
-  //   }, 1100 + 1500 + 1550);
-
-  //   setTimeout(() => {
-  //     setCurrentData(latestData5);
-  //   }, 6000);
-
-  //   setTimeout(() => {
-  //     setCurrentData(latestData);
-  //   }, 7000);
-  // }, []);
-  const dPoint = () => {
+  const Header = () => {
+    const getTitle = () => {
+      switch (selectedFooterButton) {
+        case 0:
+          return 'Bar and Stacked Bar Charts';
+        case 1:
+          return 'Line and Area Charts';
+        case 2:
+          return 'Pie and Donut Charts';
+      }
+    };
     return (
-      <View
-        style={{
-          width: 14,
-          height: 14,
-          backgroundColor: 'white',
-          borderWidth: 3,
-          borderRadius: 7,
-          borderColor: '#07BAD1',
-        }}
-      />
-    );
-  };
-  const lcomp = val => {
-    return (
-      <View style={{width: 70, marginLeft: 7}}>
-        <Text style={{color: 'black', fontWeight: 'bold'}}>{val}</Text>
+      <View style={styles.header}>
+        <Text style={{fontSize: 20}}>{getTitle()}</Text>
       </View>
     );
   };
-  const latestData = [
-    {
-      value: 600 - 100,
-      labelComponent: () => lcomp('22 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 210,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 250,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 320,
-      labelComponent: () => lcomp('24 Nov'),
-      customDataPoint: dPoint,
-      showStrip: true,
-      stripHeight: 190,
-      stripColor: 'black',
-      dataPointLabelComponent: () => {
-        return (
-          <View
-            style={{
-              backgroundColor: 'black',
-              paddingHorizontal: 8,
-              paddingVertical: 5,
-              borderRadius: 4,
-            }}>
-            <Text style={{color: 'white'}}>410</Text>
-          </View>
-        );
-      },
-      dataPointLabelShiftY: -70,
-      dataPointLabelShiftX: -14,
-    },
-    {
-      value: 600 - 310,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 270,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 240,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 130,
-      labelComponent: () => lcomp('26 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 100,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 210,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 270,
-      labelComponent: () => lcomp('28 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 240,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 100,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 210,
-      labelComponent: () => lcomp('28 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 20,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 100,
-      customDataPoint: dPoint,
-    },
-  ];
 
-  const latestData2 = [
-    {
-      value: 400 - 100,
-      labelComponent: () => lcomp('22 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 400 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 210,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 400 - 250,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 320,
-      labelComponent: () => lcomp('24 Nov'),
-      customDataPoint: dPoint,
-      showStrip: true,
-      stripHeight: 190,
-      stripColor: 'black',
-      dataPointLabelComponent: () => {
-        return (
-          <View
-            style={{
-              backgroundColor: 'black',
-              paddingHorizontal: 8,
-              paddingVertical: 5,
-              borderRadius: 4,
-            }}>
-            <Text style={{color: 'white'}}>410</Text>
-          </View>
-        );
-      },
-      dataPointLabelShiftY: -70,
-      dataPointLabelShiftX: -14,
-    },
-    {
-      value: 400 - 310,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 270,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 400 - 240,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 130,
-      labelComponent: () => lcomp('26 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 400 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 100,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 400 - 210,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 270,
-      labelComponent: () => lcomp('28 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 400 - 240,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 100,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 400 - 210,
-      labelComponent: () => lcomp('28 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 400 - 20,
-      hideDataPoint: true,
-    },
-    {
-      value: 400 - 100,
-      customDataPoint: dPoint,
-    },
-  ];
+  const Separator = () => <View style={{height: 40}} />;
 
-  const latestData3 = [
-    {
-      value: 600 - 170,
-      labelComponent: () => lcomp('22 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 60,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 290,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 390,
-      labelComponent: () => lcomp('24 Nov'),
-      customDataPoint: dPoint,
-      showStrip: true,
-      stripHeight: 190,
-      stripColor: 'black',
-      dataPointLabelComponent: () => {
-        return (
-          <View
-            style={{
-              backgroundColor: 'black',
-              paddingHorizontal: 8,
-              paddingVertical: 5,
-              borderRadius: 4,
-            }}>
-            <Text style={{color: 'white'}}>410</Text>
-          </View>
-        );
-      },
-      dataPointLabelShiftY: -70,
-      dataPointLabelShiftX: -14,
-    },
-    {
-      value: 600 - 210,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 370,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 140,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 330,
-      labelComponent: () => lcomp('26 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 50,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 200,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 110,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 370,
-      labelComponent: () => lcomp('28 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 140,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 320,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 20,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 310,
-      labelComponent: () => lcomp('28 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 600 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 600 - 100,
-      customDataPoint: dPoint,
-    },
-  ];
-
-  const latestData4 = [
-    {
-      value: 300 - 170,
-      labelComponent: () => lcomp('22 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 300 - 60,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 290,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 300 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 390,
-      labelComponent: () => lcomp('24 Nov'),
-      customDataPoint: dPoint,
-      showStrip: true,
-      stripHeight: 190,
-      stripColor: 'black',
-      dataPointLabelComponent: () => {
-        return (
-          <View
-            style={{
-              backgroundColor: 'black',
-              paddingHorizontal: 8,
-              paddingVertical: 5,
-              borderRadius: 4,
-            }}>
-            <Text style={{color: 'white'}}>410</Text>
-          </View>
-        );
-      },
-      dataPointLabelShiftY: -70,
-      dataPointLabelShiftX: -14,
-    },
-    {
-      value: 300 - 210,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 370,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 300 - 140,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 330,
-      labelComponent: () => lcomp('26 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 300 - 50,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 200,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 300 - 110,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 370,
-      labelComponent: () => lcomp('28 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 300 - 140,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 320,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 20,
-      customDataPoint: dPoint,
-    },
-    {
-      value: 300 - 310,
-      labelComponent: () => lcomp('28 Nov'),
-      customDataPoint: dPoint,
-    },
-    {
-      value: 300 - 120,
-      hideDataPoint: true,
-    },
-    {
-      value: 300 - 100,
-      customDataPoint: dPoint,
-    },
-  ];
-  const latestData5 = [];
-  for (let i = 0; i < latestData.length; i++) {
-    latestData5[i] = {...latestData, value: 300};
-  }
-
-  const [currentData, setCurrentData] = useState(latestData);
-
-  const customLabel = val => {
+  const BarAndStackCharts = () => {
     return (
-      <View
-        style={{
-          backgroundColor: 'black',
-          // padding: 16,
-          borderRadius: 8,
-          width: 30,
-          paddingVertical: 4,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <Text style={{color: 'white'}}>{val}</Text>
+      <View>
+        <SimpleBlueBars />
+        <Separator />
+
+        <SimpleBarAnimated />
+        <Separator />
+
+        <BarThreeD />
+        <Separator />
+
+        <RoundStackBar />
+        <Separator />
+
+        <CappedBars />
+        <Separator />
+
+        <BarWithGradient />
+        <Separator />
+        <Separator />
       </View>
     );
   };
-  const ndd = [
-    {value: 30, color: 'rgb(84,219,234)'},
-    {value: 40, color: 'lightgreen'},
-    {value: 20, color: 'orange'},
-  ];
-  const [data, setData] = useState([
-    {value: 15, label: 'Jan'},
-    {
-      value: 40,
-      label: 'Feb',
-      verticalLineColor: 'red',
-      // showVerticalLine: true,
-      verticalLineThickness: StyleSheet.hairlineWidth,
-      dataPointLabelComponent: () => customLabel(40),
-    },
-    {
-      value: 10,
-      label: 'Mar',
-      dataPointLabelComponent: () => customLabel(10),
-    },
-    {
-      value: 30,
-      label: 'Apr',
-      dataPointLabelComponent: () => customLabel(30),
-    },
-    {
-      value: 20,
-      label: 'May',
-      dataPointLabelComponent: () => customLabel(20),
-    },
-    {
-      value: 40,
-      label: 'Jun',
-      focusedDataPointLabelComponent: () => customLabel(40),
-    },
-    {value: 48, label: 'Jul'},
-    {value: 30, label: 'Aug'},
-    {value: 20, label: 'Sep'},
-    {value: 40, label: 'Oct'},
-    {
-      value: 48,
-      label: 'Nov',
-      onPress: () => Alert.alert('Sales in Nov skyrocketed to $48 M'),
-    },
-    {value: 30, label: 'Dec'},
-  ]);
 
-  const renderLegend = (text, color) => {
+  const LineAndAreaCharts = () => {
     return (
-      <View style={{flexDirection: 'row', marginBottom: 12}}>
+      <View>
+        <LineChartTwo />
+        <Separator />
+
+        <AnimatedArea />
+        <Separator />
+
+        <AreaTwo />
+        <Separator />
+
+        <ChartWithPointer />
+        <Separator />
+
+        <CaloriesBurnt />
+        <Separator />
+        <Separator />
+      </View>
+    );
+  };
+
+  const PieAndDonutCharts = () => {
+    return (
+      <View>
+        <SimplePie />
+        <Separator />
+
+        <ProgressPie />
+        <Separator />
+
+        <SplitPie />
+        <Separator />
+
+        <ThreeDPie />
+        <Separator />
+
+        <PieChartFocusOnPress />
+        <Separator />
+        <Separator />
+      </View>
+    );
+  };
+
+  const SelectedIndexCharts = () => {
+    switch (selectedFooterButton) {
+      case 0:
+        return <BarAndStackCharts />;
+      case 1:
+        return <LineAndAreaCharts />;
+      case 2:
+        return <PieAndDonutCharts />;
+    }
+  };
+
+  const Body = () => {
+    return (
+      <ScrollView style={styles.body}>
+        <SelectedIndexCharts />
+      </ScrollView>
+    );
+  };
+
+  const Footer = () => {
+    const footerButtonStyle = index => [
+      styles.footerButton,
+      selectedFooterButton === index ? styles.footerButtonSelected : null,
+    ];
+    return (
+      <View style={styles.footer}>
         <View
-          style={{
-            height: 18,
-            width: 18,
-            marginRight: 10,
-            borderRadius: 4,
-            backgroundColor: color || 'white',
-          }}
-        />
-        <Text style={{color: 'white', fontSize: 16}}>{text || ''}</Text>
+          style={[
+            styles.footerButtonContainer,
+            selectedFooterButton === 0 ? {marginTop: -12} : null,
+          ]}>
+          {selectedFooterButton === 0 ? (
+            <View style={styles.connector} />
+          ) : null}
+          <TouchableOpacity
+            style={footerButtonStyle(0)}
+            onPress={() => setSelectedFooterButton(0)}>
+            <Text>Bar</Text>
+            <Text>Stack</Text>
+          </TouchableOpacity>
+        </View>
+        <View
+          style={[
+            styles.footerButtonContainer,
+            selectedFooterButton === 1 ? {marginTop: -12} : null,
+          ]}>
+          {selectedFooterButton === 1 ? (
+            <View style={styles.connector} />
+          ) : null}
+          <TouchableOpacity
+            style={footerButtonStyle(1)}
+            onPress={() => setSelectedFooterButton(1)}>
+            <Text>Line</Text>
+            <Text>Area</Text>
+          </TouchableOpacity>
+        </View>
+        <View
+          style={[
+            styles.footerButtonContainer,
+            selectedFooterButton === 2 ? {marginTop: -12} : null,
+          ]}>
+          {selectedFooterButton === 2 ? (
+            <View style={styles.connector} />
+          ) : null}
+          <TouchableOpacity
+            style={footerButtonStyle(2)}
+            onPress={() => setSelectedFooterButton(2)}>
+            <Text>Pie</Text>
+            <Text>Donut</Text>
+          </TouchableOpacity>
+        </View>
       </View>
     );
   };
 
-  // const styleObject = {
-  //   marginLeft: -95,
-  //   paddingLeft: 120,
-  //   transform: [{rotate: '90deg'}],
-  // };
-  const ddtt = [
-    {
-      value: -15,
-      label: 'Mon',
-      topLabelComponent:()=><Text>-15</Text>
-    },
-    {value: 6, label: 'Tue'},
-    {value: -26, label: 'Wed'},
-    // {value: 40, label: 'Thu'},
-    {value: -16, label: 'Wed'},
-    {value:-36, label: 'Thu'},
-  ];
-
   return (
-    <View
-      style={{
-        paddingVertical: 100,
-        marginLeft: -70,
-        // paddingLeft: -10,
-        // backgroundColor: '#1C1C1C',
-      }}>
-      {/* <BarChart backgroundColor={'green'} data={barData} /> */}
-      <BarChart
-        // backgroundColor={'red'}
-        // noOfSections={1}
-        // maxValue={40}
-        // isAnimated
-        noOfSections={2}
-        maxValue={8}
-        minValue={-44}
-        stepValue={4}
-        noOfSectionsBelowXAxis={11}
-        data={barData}
-        height={40}
-        radius={170}
-        donut={true}
-        showText={true}
-        showValuesAsLabels={true}
-        semiCircle={true}
-        showGradient
-        autoShiftLabels
-        // rotateLabel
-        // isThreeD={true}
-        // shiftInnerCenterY={100}
-        shadow={true}
-        strokeWidth={5}
-        innerCircleBorderColor={'gray'}
-        // showTextBackground={true}
-      />
-      {/* <TouchableOpacity
-        onPress={() => {
-          dtt[1].value += 20;
-          setDtt([...dtt]);
-        }}>
-        <Text>Press me</Text>
-      </TouchableOpacity> */}
-      {/* <View
-        style={{
-          marginVertical: 100,
-          marginHorizontal: 30,
-          borderRadius: 10,
-          paddingVertical: 50,
-          backgroundColor: '#414141',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}>
-        <Text
-          style={{
-            color: 'white',
-            fontSize: 32,
-            fontWeight: 'bold',
-            marginBottom: 12,
-          }}>
-          Quarterly Sales
-        </Text>
-        <PieChart
-          strokeColor="white"
-          strokeWidth={4}
-          donut
-          data={[
-            {value: 30, color: 'rgb(84,219,234)'},
-            {value: 40, color: 'lightgreen'},
-            {value: 20, color: 'orange'},
-          ]}
-          innerCircleColor="#414141"
-          innerCircleBorderWidth={4}
-          innerCircleBorderColor={'white'}
-          showValuesAsLabels={true}
-          showText
-          textSize={18}
-          showTextBackground={true}
-          centerLabelComponent={() => {
-            return (
-              <View>
-                <Text style={{color: 'white', fontSize: 36}}>90</Text>
-                <Text style={{color: 'white', fontSize: 18}}>Total</Text>
-              </View>
-            );
-          }}
-        />
-
-        <View
-          style={{
-            width: '100%',
-            flexDirection: 'row',
-            justifyContent: 'space-evenly',
-            marginTop: 20,
-          }}>
-          {renderLegend('Jan', 'rgb(84,219,234)')}
-          {renderLegend('Feb', 'lightgreen')}
-          {renderLegend('Mar', 'orange')}
-        </View>
-      </View> */}
-
-      {/* <TouchableOpacity
-        onPress={() => setCurrentData(latestData)}
-        style={{padding: 12, backgroundColor: 'lightgreen', marginBottom: 15}}>
-        <Text>Smooth</Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        onPress={() => setCurrentData(latestData2)}
-        style={{padding: 12, backgroundColor: 'lightgreen', marginBottom: 15}}>
-        <Text>Smooth Low</Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        onPress={() => setCurrentData(latestData3)}
-        style={{padding: 12, backgroundColor: 'lightgreen', marginBottom: 15}}>
-        <Text>Edged</Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        onPress={() => setCurrentData(latestData4)}
-        style={{padding: 12, backgroundColor: 'lightgreen', marginBottom: 15}}>
-        <Text>Edged Low</Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        onPress={() => setCurrentData(latestData5)}
-        style={{padding: 12, backgroundColor: 'lightgreen'}}>
-        <Text>Straight</Text>
-      </TouchableOpacity> */}
-
-      {/* {true ? (
-        <LineChart
-          isThreeD
-          key={'xyz'}
-          height={320}
-          maxValue={360}
-          showLine
-          hideOrigin
-          // animationDuration={000}
-          initialSpacing={30}
-          // showVerticalLines
-          lineConfig={{
-            // isAnimated: true,
-            delay: 800,
-            color: 'green',
-            // hideDataPoints: true,
-            // showDataPoint: false,
-            // dataPointsRadius: 5,
-            dataPointsColor: 'purple',
-            dataPointsRadius: 4,
-            thickness: 2,
-            shiftY: 25,
-            curved: true,
-          }}
-          yAxisLabelPrefix={'$'}
-          yAxisLabelSuffix={'.0'}
-          barWidth={32}
-          // width={190}
-          data={[
-            {
-              value: 70,
-              label: 'Jan',
-              topLabelComponent: () => {
-                return <Text>30</Text>;
-              },
-            },
-            {value: 250, label: 'Feb'},
-            {value: 200, label: 'Mar'},
-            {
-              value: 150,
-              label: 'Apr',
-              showVerticalLine: true,
-              verticalLineColor: 'black',
-            },
-            {value: 200, label: 'May'},
-            {value: 250, label: 'Jun'},
-            {value: 270, label: 'Jul'},
-          ]}
-          // horizontal
-          // showReferenceLine1
-          // referenceLine1Position={120}
-          // referenceLine1Config={{
-          //   type: 'solid',
-          //   color: 'rgba(200,0,0,0.6)',
-          //   thickness: 1,
-          // }}
-          // showReferenceLine2
-          // referenceLine2Position={240}
-          // referenceLine2Config={{
-          //   type: 'solid',
-          //   color: 'rgba(0,0,0,0.6)',
-          //   thickness: 1,
-          // }}
-          // showReferenceLine3
-          // referenceLine3Position={330}
-          // referenceLine3Config={{
-          //   type: 'solid',
-          //   color: 'rgba(0,0,200,0.6)',
-          //   thickness: 1,
-          // }}
-          // showYAxisIndices
-          isAnimated
-          showGradient
-          // cappedBars
-          yAxisColor={'rgb(78, 0, 142)'}
-          xAxisColor={'rgb(78, 0, 142)'}
-          xAxisThickness={3}
-          yAxisThickness={3}
-          yAxisTextStyle={{color: 'rgb(78, 0, 142)'}}
-          capColor={'rgb(78, 0, 142)'}
-          capThickness={4}
-          // barWidth={35}
-          gradientColor={'rgba(200, 100, 244,0.2)'}
-          frontColor={'rgba(78, 0, 142,1)'}
-          // rulesType="dashed"
-          // rulesColor={'rgba(0,200,0,0.5)'}
-          // rulesThickness={1}
-          // dashWidth={12}
-          // dashGap={2}
-        />
-      ) : (
-        <LineChart
-          // width={150}
-          // hideDataPoints1
-          // spacing={30}
-          data={data}
-          dataPointLabelWidth={30}
-          dataPointLabelShiftY={-30}
-          // data2={lineData1}
-          areaChart
-          initialSpacing={20}
-          customDataPoint={() => {
-            return (
-              <View
-                style={{
-                  height: 10,
-                  width: 10,
-                  backgroundColor: 'red',
-                  borderWidth: 2,
-                  borderColor: 'blue',
-                  borderRadius: 5,
-                }}
-              />
-            );
-          }}
-          // focusedCustomDataPoint={() => {
-          //   return (
-          //     <View
-          //       style={{
-          //         height: 14,
-          //         width: 14,
-          //         backgroundColor: 'green',
-          //         borderWidth: 2,
-          //         borderColor: 'yellow',
-          //         borderRadius: 7,
-          //       }}
-          //     />
-          //   );
-          // }}
-          // onPress={(item, index) => {
-          //   console.log('index-->', index);
-          //   setData(data => {
-          //     item.focusedCustomDataPoint = () => {
-          //       return (
-          //         <View
-          //           style={{
-          //             height: 14,
-          //             width: 14,
-          //             backgroundColor: 'green',
-          //             borderWidth: 2,
-          //             borderColor: 'yellow',
-          //             borderRadius: 7,
-          //           }}
-          //         />
-          //       );
-          //     };
-          //     data[index] = item;
-          //     console.log('data------.....', data);
-          //     return data;
-          //   });
-          // }}
-          // disableScroll
-          pressEnabled
-          // showDataPointOnPress
-          showStripOnPress
-          // showTextOnPress
-          // textShiftY={-10}
-          // textShiftX={-5}
-          // textFontSize={18}
-          // textColor={'green'}
-          // stripWidth={1}
-          // stripHeight={200}
-          // stripHeight={200}
-          // stripOpacity={1}
-          // curved
-          // isAnimated
-          // animationDuration={2000}
-          // animationDuration={2000}
-          // dataPointsShape="rectangular"
-          // showGradient
-          color={'rgb(78, 0, 142)'}
-          yAxisColor={'rgb(78, 0, 142)'}
-          xAxisColor={'rgb(78, 0, 142)'}
-          // dataPointsColor={'yellow'}
-          dataPointsWidth={20}
-          dataPointsHeight={20}
-          xAxisThickness={3}
-          yAxisThickness={3}
-          // dataPointsRadius={4}
-          // focusedDataPointRadius={10}
-          yAxisTextStyle={{color: 'rgb(78, 0, 142)'}}
-          startFillColor={'rgb(200, 100, 244)'}
-          startOpacity={0.9}
-          endFillColor={'rgb(255, 255, 255)'}
-          endOpacity={0.2}
-        />
-      )} */}
-
-      {/* <TouchableOpacity
-        onPress={() => setToggle(!toggle)}
-        style={{marginTop: 100, alignSelf: 'center'}}>
-        <Text>Line Chart</Text>
-      </TouchableOpacity> */}
-    </View>
+    <SafeAreaView style={styles.container}>
+      <Header />
+      <Body />
+      <Footer />
+    </SafeAreaView>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {flex: 1, alignItems: 'center', backgroundColor: '#f5f5ff'},
+  header: {marginBottom: 20},
+  body: {
+    paddingLeft: 10,
+    width: '100%',
+  },
+  footer: {
+    position: 'absolute',
+    bottom: 0,
+    height: 60,
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    backgroundColor: '#334',
+  },
+  footerButtonContainer: {
+    alignItems: 'center',
+  },
+  connector: {
+    height: 8,
+    width: 60,
+    borderRadius: 0,
+    backgroundColor: '#f5f5ff',
+  },
+  footerButton: {
+    width: 60,
+    height: 40,
+    paddingHorizontal: 8,
+    borderRadius: 4,
+    backgroundColor: '#bbc',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  footerButtonSelected: {
+    borderTopLeftRadius: 0,
+    borderTopRightRadius: 0,
+    backgroundColor: '#f5f5ff',
+    shadowColor: '#00ffe9',
+    shadowOffset: {width: 5, height: 5},
+    shadowOpacity: 0.5,
+    shadowRadius: 1,
+    elevation: 4,
+  },
+});
 export default App;
diff --git a/examples/PieChart/SimplePie.js b/examples/PieChart/SimplePie.js
index 8897ace..4eaaf94 100644
--- a/examples/PieChart/SimplePie.js
+++ b/examples/PieChart/SimplePie.js
@@ -13,6 +13,7 @@ const SimplePie = () => {
       <PieChart
         donut
         showText
+        textSize={12}
         textColor="black"
         innerRadius={70}
         showTextBackground
diff --git a/ios/GiftedCharts.xcodeproj/project.pbxproj b/ios/GiftedCharts.xcodeproj/project.pbxproj
index f440b67..7dc17e3 100644
--- a/ios/GiftedCharts.xcodeproj/project.pbxproj
+++ b/ios/GiftedCharts.xcodeproj/project.pbxproj
@@ -533,7 +533,7 @@
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++17";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
@@ -561,7 +561,7 @@
 				COPY_PHASE_STRIP = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
 				ENABLE_TESTABILITY = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_DYNAMIC_NO_PIC = NO;
 				GCC_NO_COMMON_BLOCKS = YES;
@@ -583,12 +583,13 @@
 					"$(inherited)",
 				);
 				LIBRARY_SEARCH_PATHS = (
+					"$(SDKROOT)/usr/lib/swift",
 					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
-					"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
 			name = Debug;
@@ -598,7 +599,7 @@
 			buildSettings = {
 				ALWAYS_SEARCH_USER_PATHS = NO;
 				CLANG_ANALYZER_LOCALIZABILITY_NONLOCALIZED = YES;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LANGUAGE_STANDARD = "c++17";
 				CLANG_CXX_LIBRARY = "libc++";
 				CLANG_ENABLE_MODULES = YES;
 				CLANG_ENABLE_OBJC_ARC = YES;
@@ -626,7 +627,7 @@
 				COPY_PHASE_STRIP = YES;
 				ENABLE_NS_ASSERTIONS = NO;
 				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
+				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = i386;
 				GCC_C_LANGUAGE_STANDARD = gnu99;
 				GCC_NO_COMMON_BLOCKS = YES;
 				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
@@ -641,11 +642,12 @@
 					"$(inherited)",
 				);
 				LIBRARY_SEARCH_PATHS = (
+					"$(SDKROOT)/usr/lib/swift",
 					"\"$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)\"",
-					"\"$(TOOLCHAIN_DIR)/usr/lib/swift-5.0/$(PLATFORM_NAME)\"",
 					"\"$(inherited)\"",
 				);
 				MTL_ENABLE_DEBUG_INFO = NO;
+				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
 			};
diff --git a/ios/GiftedCharts/AppDelegate.m b/ios/GiftedCharts/AppDelegate.m
index f8ab735..f174d99 100644
--- a/ios/GiftedCharts/AppDelegate.m
+++ b/ios/GiftedCharts/AppDelegate.m
@@ -53,7 +53,7 @@ static void InitializeFlipper(UIApplication *application) {
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
 {
 #if DEBUG
-  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
   return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 #endif
diff --git a/ios/Podfile b/ios/Podfile
index c6eca43..498113a 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -1,15 +1,46 @@
 require_relative '../node_modules/react-native/scripts/react_native_pods'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
-platform :ios, '11.0'
+platform :ios, min_ios_version_supported
+prepare_react_native_project!
+
+# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
+# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
+#
+# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
+# ```js
+# module.exports = {
+#   dependencies: {
+#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
+# ```
+flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
+
+linkage = ENV['USE_FRAMEWORKS']
+if linkage != nil
+  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
+  use_frameworks! :linkage => linkage.to_sym
+end
 
 target 'GiftedCharts' do
   config = use_native_modules!
 
+  # Flags change depending on the env values.
+  flags = get_default_flags()
+
   use_react_native!(
     :path => config[:reactNativePath],
-    # to enable hermes on iOS, change `false` to `true` and then install pods
-    :hermes_enabled => false
+    # Hermes is now enabled by default. Disable by setting this flag to false.
+    # Upcoming versions of React Native may rely on get_default_flags(), but
+    # we make it explicit here to aid in the React Native upgrade process.
+    :hermes_enabled => flags[:hermes_enabled],
+    :fabric_enabled => flags[:fabric_enabled],
+    # Enables Flipper.
+    #
+    # Note that if you have use_frameworks! enabled, Flipper will not work and
+    # you should disable the next line.
+    :flipper_configuration => flipper_config,
+    # An absolute path to your application root.
+    :app_path => "#{Pod::Config.instance.installation_root}/.."
   )
 
   target 'GiftedChartsTests' do
@@ -17,13 +48,13 @@ target 'GiftedCharts' do
     # Pods for testing
   end
 
-  # Enables Flipper.
-  #
-  # Note that if you have use_frameworks! enabled, Flipper will not work and
-  # you should disable the next line.
-  use_flipper!()
-
   post_install do |installer|
-    react_native_post_install(installer)
+    react_native_post_install(
+      installer,
+      # Set `mac_catalyst_enabled` to `true` in order to apply patches
+      # necessary for Mac Catalyst builds
+      :mac_catalyst_enabled => false
+    )
+    __apply_Xcode_12_5_M1_post_install_workaround(installer)
   end
-end
\ No newline at end of file
+end
diff --git a/package.json b/package.json
index b60f9e7..d053ff7 100644
--- a/package.json
+++ b/package.json
@@ -24,25 +24,25 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@types/jest": "^26.0.23",
-    "@types/node": "^15.0.2",
-    "@types/react": "^17.0.5",
-    "@types/react-dom": "^17.0.3",
-    "@types/react-native": "^0.64.5",
-    "react-native-linear-gradient": "^2.5.6",
-    "react-native-svg": "^13.6.0",
-    "typescript": "^4.2.4"
+    "react-native-linear-gradient": "^2.7.3",
+    "react-native-svg": "^13.9.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/runtime": "^7.14.8",
-    "@react-native-community/eslint-config": "^3.0.0",
-    "babel-jest": "^27.0.6",
-    "eslint": "^7.31.0",
-    "jest": "^27.0.6",
-    "metro-react-native-babel-preset": "^0.66.2",
-    "react-test-renderer": "17.0.1",
-    "ts-jest": "^27.1.4"
+    "@babel/core": "^7.22.5",
+    "@babel/runtime": "^7.22.5",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^20.3.3",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/react-native": "^0.72.2",
+    "babel-jest": "^29.5.0",
+    "eslint": "^8.44.0",
+    "jest": "^29.5.0",
+    "metro-react-native-babel-preset": "^0.76.7",
+    "react-test-renderer": "18.2.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "react": "*",