Merge pull request #8 from RavisaraDev/feature/dark-mode

🦇 modal darkmode support

Author: nipunravisara

README.md

@@ -39,16 +39,19 @@ const App = () => {
 
 | Props| Type | Description 
 | -------- | ------- | -------- |
-| date | ```Moment``` | ```moment()``` Moment date object (Required)
+| date | ```Moment``` | If your need to show placeholder on initial load just pass ```undefined```, else for default value pass ```moment()``` object
 | onChange |```Function```| Callback triggered on date select (Required)
+| placeholder | ```String``` | Custom placeholder text
+| placeholderStyles | ```Object``` | Placeholder text styles 
+| modalBackgroundColor | ```String``` | Calendar modal background color
 | headerStyles | ```Object``` | Header wrapper styles
 | customHeader | ```Function``` | Function should return a component. Args: ```(date, month, year, setMonth, setYear)```
 | weekHeaderTextColor | ```String``` | Week days names text color
 | selectedDateHighlightColor | ```String``` | Selected date highlight marker color
 | selectedDateHighlightRadius | ```Number``` | Selected date highlight marker radius
 | datesColor | ```String``` | Calendar date color
 | selectedDateColor|  ```String``` | Selected calendar date color
-| fieldButtonStylesDateFormat | ```String``` | Selected date showing format. [Available formats](https://momentjs.com/docs/#/parsing/string-format/)
+| fieldButtonStylesDateFormat | ```String``` | Selected date showing format. [Available formats](https://momentjs.com/docs/#/displaying/format/)
 | fieldButtonStyles | ```Object``` | Field button styles
 | fieldButtonTextStyles | ```Object``` | Field button text styles
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-calendarview-datepicker",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "🌿 React-native date picker component ",
   "main": "index.js",
   "repository": {

src/DatePickerCalendar.js

@@ -13,6 +13,7 @@ const DatePickerCalendar = ({
                                 fieldButtonStylesDateFormat,
                                 fieldButtonStyles,
                                 fieldButtonTextStyles,
+                                modalBackgroundColor,
                                 customHeader,
                                 headerStyles,
                                 weekHeaderTextColor,
@@ -39,7 +40,7 @@ const DatePickerCalendar = ({
             {isOpen && (
                 <Modal animationType={"fade"} transparent={true} presentationStyle={'overFullScreen'} visible = {isOpen} onRequestClose = {() => setIsOpen(!isOpen) }>
                     <TouchableOpacity style={styles.modalBackground} onPress={() => setIsOpen(!isOpen)}>
-                        <View style={[styles.modal]}>
+                        <View style={[styles.modal, modalBackgroundColor && {backgroundColor: modalBackgroundColor}]}>
                             <Header
                                 date={date}
                                 customHeader={customHeader}