react-native-calendar-heatmap icon indicating copy to clipboard operation
react-native-calendar-heatmap copied to clipboard

scrollEnabled Prop for heatmap

Open Yellow-Ranger opened this issue 1 year ago • 1 comments

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

I wanted to disable the scrolling feature on the heatmap so I added the prop on the scrollview.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-calendar-heatmap/lib/src/CalendarHeatmap.js b/node_modules/react-native-calendar-heatmap/lib/src/CalendarHeatmap.js
index 269139e..8417b52 100644
--- a/node_modules/react-native-calendar-heatmap/lib/src/CalendarHeatmap.js
+++ b/node_modules/react-native-calendar-heatmap/lib/src/CalendarHeatmap.js
@@ -46,7 +46,8 @@ const CalendarHeatmap = props => {
     showOutOfRangeDays,
     monthLabelsColor,
     showMonthLabels,
-    colorArray
+    colorArray,
+    scrollEnabled
   } = props;
 
   getValueCache = values => {
@@ -148,7 +149,7 @@ const CalendarHeatmap = props => {
   };
 
   return (
-    <ScrollView>
+    <ScrollView scrollEnabled={scrollEnabled}>
       <Svg
         height={getHeight(gutterSize, showMonthLabels, horizontal)}
         width={getWidth(numDays, endDate, gutterSize)}
@@ -186,7 +187,8 @@ CalendarHeatmap.propTypes = {
   titleForValue: PropTypes.func, // function which returns title text for value
   classForValue: PropTypes.func, // function which returns html class for value
   onPress: PropTypes.func, // callback function when a square is clicked
-  colorArray: PropTypes.array
+  colorArray: PropTypes.array,
+  scrollEnabled: PropTypes.bool // whether to allow scrolling on scrollview
 };
 
 CalendarHeatmap.defaultProps = {
@@ -198,6 +200,7 @@ CalendarHeatmap.defaultProps = {
   monthLabelsColor: 'black',
   showOutOfRangeDays: false,
   colorArray: rectColor,
+  scrollEnabled: true,
   classForValue: value => (value ? "black" : "#8cc665"),
   onPress: () => console.log("change onPress prop")
 };

This issue body was partially generated by patch-package.

Yellow-Ranger avatar Feb 17 '24 01:02 Yellow-Ranger

I have a lot of content.. how do I make it a horizontal scroll?

devcoderbuzz avatar Feb 23 '25 02:02 devcoderbuzz