Add highlightDateNumberContainerStyle prop (#272, #270)

Author: randomprogramming

README.md

@@ -326,6 +326,7 @@ AppRegistry.registerComponent('Example', () => Example);
 | **`styleWeekend`**             | Whether to style weekend dates separately.                                                                                                 | Bool           | **`True`** |
 | **`highlightDateNameStyle`**   | Style for the selected name of the day in dates strip.                                                                                     | Any            |
 | **`highlightDateNumberStyle`** | Style for the selected number of the day in dates strip.                                                                                   | Any            |
+| **`highlightDateNumberContainerStyle`** | Style for the selected date number container. Similar to `highlightDateNumberStyle`, but this fixes the issue that some styles may have on iOS when using `highlightDateNumberStyle`.        | Any            | 
 | **`highlightDateContainerStyle`** | Style for the selected date container.            | Object         |
 | **`disabledDateNameStyle`**    | Style for disabled name of the day in dates strip (controlled by datesWhitelist & datesBlacklist).                                         | Any            |
 | **`disabledDateNumberStyle`**  | Style for disabled number of the day in dates strip (controlled by datesWhitelist & datesBlacklist).                                       | Any            |

src/CalendarDay.js

@@ -34,6 +34,7 @@ class CalendarDay extends Component {
     highlightDateContainerStyle: PropTypes.any,
     highlightDateNameStyle: PropTypes.any,
     highlightDateNumberStyle: PropTypes.any,
+    highlightDateNumberContainerStyle: PropTypes.any,
     disabledDateNameStyle: PropTypes.any,
     disabledDateNumberStyle: PropTypes.any,
     disabledDateOpacity: PropTypes.number,
@@ -364,6 +365,7 @@ class CalendarDay extends Component {
       daySelectionAnimation,
       highlightDateNameStyle,
       highlightDateNumberStyle,
+      highlightDateNumberContainerStyle,
       highlightDateContainerStyle,
       styleWeekend,
       weekendDateNameStyle,
@@ -392,6 +394,7 @@ class CalendarDay extends Component {
       : [{ opacity: disabledDateOpacity }];
     let _customHighlightDateNameStyle;
     let _customHighlightDateNumberStyle;
+    let _dateNumberContainerStyle = [];
 
     if (customStyle) {
       _dateNameStyle.push(customStyle.dateNameStyle);
@@ -446,6 +449,7 @@ class CalendarDay extends Component {
           highlightDateNumberStyle,
           _customHighlightDateNumberStyle
         ];
+        _dateNumberContainerStyle.push(highlightDateNumberContainerStyle);
       }
     }
 
@@ -482,7 +486,7 @@ class CalendarDay extends Component {
               </Text>
             )}
             {showDayNumber && (
-              <View>
+              <View style={_dateNumberContainerStyle}>
                 <Text
                   style={[
                     { fontSize: dateNumberFontSize },

src/CalendarStrip.js

@@ -80,6 +80,7 @@ class CalendarStrip extends Component {
     weekendDateNumberStyle: PropTypes.any,
     highlightDateNameStyle: PropTypes.any,
     highlightDateNumberStyle: PropTypes.any,
+    highlightDateNumberContainerStyle: PropTypes.any,
     highlightDateContainerStyle: PropTypes.any,
     disabledDateNameStyle: PropTypes.any,
     disabledDateNumberStyle: PropTypes.any,
@@ -424,6 +425,7 @@ class CalendarStrip extends Component {
       weekendDateNumberStyle: this.props.weekendDateNumberStyle,
       highlightDateNameStyle: this.props.highlightDateNameStyle,
       highlightDateNumberStyle: this.props.highlightDateNumberStyle,
+      highlightDateNumberContainerStyle: this.props.highlightDateNumberContainerStyle,
       highlightDateContainerStyle: this.props.highlightDateContainerStyle,
       disabledDateNameStyle: this.props.disabledDateNameStyle,
       disabledDateNumberStyle: this.props.disabledDateNumberStyle,