rn-goal-graph

RNGoals

Installation

Install the package using npm or yarn:

1npm install rn-goal-graph
2
3or
4
5yarn add rn-goal-graph
6
7# Usage
8import React, { FunctionComponent, useState } from "react";
9import { Text, View } from "react-native";
10import { CustomGoalGraph } from "rn-goal-graph";
11import { moderateScale } from "./src/constant/responsiveStyle";
12import colors from "./src/constant/colors";
13
14interface CustomGoalsProps {}
15
16const CustomGoals: FunctionComponent<CustomGoalsProps> = () => {
17  const [selectedTimePeriod, setSelectedTimePeriod] = useState("Week");
18
19  const handleTimePeriodChange = (period: string) => {
20    setSelectedTimePeriod(period);
21    console.log("Selected Time Period:", period);
22  };
23
24  const sampleData = [
25    { progress: 75 },
26    { progress: 50 },
27    { progress: 90 },
28    { progress: 30 },
29    { progress: 60 },
30    { progress: 40 },
31    { progress: 80 },
32  ];
33
34  const sampleData1 = [
35    { progress: 12 },
36    { progress: 7 },
37    { progress: 9 },
38    { progress: 80 },
39    { progress: 54 },
40    { progress: 38 },
41    { progress: 23 },
42  ];
43  return (
44    <View
45      style={{
46        flex: 1,
47        backgroundColor: colors.themeColor,
48        justifyContent: "center",
49        alignItems: "center",
50      }}
51    >
52      <View style={{ marginHorizontal: moderateScale(10) }}>
53        <CustomGoalGraph
54          goalName="Steps"
55          selectableList={["week", "month"]}
56          data_={selectedTimePeriod == "week" ? sampleData : sampleData1}
57          dates={
58            selectedTimePeriod == "week"
59              ? ["24-02-2025", "", "", "", "", "", "02-03-2025"]
60              : ["24-02-2025", "", "", "", "", "", "23-03-2025"]
61          }
62          setSelectedTimePeriod={handleTimePeriodChange}
63          isiSAnimationRequired={true}
64          mainContainerBG={'#yourchoiceofcolor'}
65        />
66      </View>
67    </View>
68  );
69};
70
71export default CustomGoals;
72