Adding highlightDateNumberContainerStyle props to index and move renderMarking to outside of CalendarDay.js

[ozanmanav]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-calendar-strip@2.2.1 for the project I'm working on.

highlightDateNumberContainerStyle props type for index and I had to move this renderMarking to outside of the CalendarJs

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-calendar-strip/index.d.ts b/node_modules/react-native-calendar-strip/index.d.ts
index 3a03cc1..932cf2b 100644
--- a/node_modules/react-native-calendar-strip/index.d.ts
+++ b/node_modules/react-native-calendar-strip/index.d.ts
@@ -133,6 +133,7 @@ interface CalendarStripProps {
   highlightDateContainerStyle?: StyleProp<ViewStyle>;
   highlightDateNameStyle?: StyleProp<TextStyle>;
   highlightDateNumberStyle?: StyleProp<TextStyle>;
+  highlightDateNumberContainerStyle?: StyleProp<ViewStyle>;
   disabledDateNameStyle?: StyleProp<TextStyle>;
   disabledDateNumberStyle?: StyleProp<TextStyle>;
   markedDatesStyle?: StyleProp<TextStyle>;
diff --git a/node_modules/react-native-calendar-strip/src/CalendarDay.js b/node_modules/react-native-calendar-strip/src/CalendarDay.js
index a994066..6c02a75 100644
--- a/node_modules/react-native-calendar-strip/src/CalendarDay.js
+++ b/node_modules/react-native-calendar-strip/src/CalendarDay.js
@@ -502,9 +502,9 @@ class CalendarDay extends Component {
                 >
                   {date.date()}
                 </Text>
-                { this.renderMarking() }
               </View>
             )}
+            { this.renderMarking() }
           </View>
         </TouchableOpacity>
       );

This issue body was partially generated by patch-package.

[peacechen]

Thanks @ozanmanav for submitting a patch. Please create a PR.

What were the symptoms that necessitated this change?

[ozanmanav]

Hi @peacechen 1- highlightDateNumberContainerStyle doesn't include in the index.ts so that typescript was giving error when I used this prop in the component. So, I've added this to exports of the index.ts 2- renderMarking was affecting numberContainer, I think it should be separated from this. Because for example I need to apply this styles only number container, like this:

If I don't move this to outside the container circle is broken because empty circle is placing there.

[peacechen]

Thanks for the explanation. Awaiting your PR.