Added additional styling abilities

README.md

@@ -71,7 +71,9 @@ const App = () => {
           responseFormat="YYYY-MM-DD"
           maxDate={moment()}
           minDate={moment().subtract(100, "days")}
-          selectedDateContainerStyle={styles.selectedDateContainerStyle}
+          selectedDateContainerStyle={
+            styles.selectedDateContainerStyle
+          }
           selectedDateStyle={styles.selectedDateStyle}
         />
         <View style={styles.container}>
@@ -119,6 +121,9 @@ export default App;
 | **`font`**                       | `String`      | `Optional` | Name of the font you are using in your theme                                                                  |
 | **`selectedDateContainerStyle`** | `Style`       | `Optional` | Style of the selected date container                                                                          |
 | **`selectedDateStyle`**          | `Style`       | `Optional` | Style of the selected date                                                                                    |
+| **`titleContainerStyle`**        | `Style`       | `Optional` | Style of the title container                                                                                  |
+| **`titleStyle`**                 | `Style`       | `Optional` | Style of the title                                                                                            |
+| **`iconColor`**                  | `String`      | `Optional` | The color to be used in calendar icons                                                                        |
 | **`ln`**                         | `string`      | `Optional` | Two letter locales string that is supported by the Moment library                                             |
 | **`onConfirm`**                  | `Method`      | `Optional` | This function will be executed if confirm button pressed                                                      |
 | **`onClear`**                    | `Method`      | `Optional` | This function will be executed if clear button pressed                                                        |

example/App.tsx

@@ -18,6 +18,7 @@ const App = () => {
           minDate={moment().subtract(100, 'days')}
           selectedDateContainerStyle={styles.selectedDateContainerStyle}
           selectedDateStyle={styles.selectedDateStyle}
+          iconColor="red"
         />
         <View style={styles.container}>
           <Text>first date: {selectedRange.firstDate}</Text>
@@ -43,6 +44,12 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: 'white',
   },
+  titleStyle: {
+    color: 'white'
+  },
+  titleContainerStyle: {
+    backgroundColor: 'blue'
+  }
 });
 
 export default App;

example/package.json

@@ -13,7 +13,7 @@
     "moment": "^2.29.1",
     "react": "17.0.1",
     "react-native": "0.64.2",
-    "rn-select-date-range": "file:../rn-select-date-range-1.3.2.tgz"
+    "rn-select-date-range": "file:../rn-select-date-range-5.0.0.tgz"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

example/yarn.lock

@@ -5547,10 +5547,9 @@ rimraf@~2.2.6:
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
   integrity sha1-5Dm+Kq7jJzIZUnMPmaiSnk/FBYI=
 
-rn-select-date-range@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/rn-select-date-range/-/rn-select-date-range-1.3.0.tgz#47994d379eb81e60353f130e1c906b7051af64cb"
-  integrity sha512-UQTvq/3eER+mupssjDnsVs8qkqLYQu5AEFSRK/BnlriPSCDZqL+z8SJ5O+3rOJ+BE/huDTfMreS/FlE4WFVAWA==
+"rn-select-date-range@file:../rn-select-date-range-5.0.0.tgz":
+  version "5.0.0"
+  resolved "file:../rn-select-date-range-5.0.0.tgz#dd597915eba72d53b27b64bf4316563b7d3cf8ed"
   dependencies:
     moment "^2.29.1"
 

package.json

@@ -9,7 +9,8 @@
     "build": "yarn build:esm && yarn build:cjs",
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir lib/cjs",
-    "publish": "yarn build && npm publish --access public"
+    "publish": "yarn build && npm publish --access public",
+    "tarball": "yarn build && npm pack"
   },
   "repository": {
     "type": "git",

src/Button.tsx

@@ -7,6 +7,7 @@ interface IProps {
   align?: "center" | "auto" | "left" | "right" | "justify" | undefined;
   disabled: boolean;
   font?: string;
+  iconColor?: string;
 }
 
 export default ({
@@ -15,11 +16,13 @@ export default ({
   align,
   disabled = false,
   font,
+  iconColor,
 }: IProps) => {
   const textStyle = {
     textAlign: align,
     opacity: disabled ? 0.2 : 1,
     fontFamily: font,
+    color: iconColor,
   };
 
   return (

src/DateRangePicker.tsx

@@ -25,12 +25,15 @@ interface IProps {
   blockSingleDateSelection?: boolean;
   font?: string;
   selectedDateContainerStyle?: ViewStyle;
+  titleContainerStyle?: ViewStyle;
   selectedDateStyle?: TextStyle;
+  titleStyle?: TextStyle;
   ln?: string;
   onConfirm?: () => void;
-  onClear?:() => void;
+  onClear?: () => void;
   clearBtnTitle?: string;
   confirmBtnTitle?: string;
+  iconColor?: string;
 }
 
 const DateRangePicker = ({
@@ -42,11 +45,14 @@ const DateRangePicker = ({
   font,
   selectedDateContainerStyle,
   selectedDateStyle,
+  titleContainerStyle,
+  titleStyle,
   ln = "en",
   onConfirm,
   onClear,
   clearBtnTitle = "Clear",
-  confirmBtnTitle = "OK"
+  confirmBtnTitle = "OK",
+  iconColor,
 }: IProps) => {
   const [selectedDate, setSelectedDate] = useState(moment());
 
@@ -118,20 +124,21 @@ const DateRangePicker = ({
     if (onConfirm) {
       onConfirm();
     }
-  }
+  };
 
   const isDateSelected = () => firstDate === null || secondDate === null;
 
   return (
     <View>
-      <View style={styles.titleRow}>
+      <View style={[styles.titleRow, titleContainerStyle]}>
         <Button
           font={font}
           disabled={minDate ? lastYear.isBefore(minDate, "months") : false}
           label={`< ${lastYear.format("YYYY")}`}
           onPress={() => setSelectedDate(lastYear)}
+          iconColor={iconColor}
         />
-        <Text style={{ ...styles.title, fontFamily: font }}>
+        <Text style={{ ...styles.title, fontFamily: font, ...titleStyle }}>
           {selectedDate.format("YYYY")}
         </Text>
         <Button
@@ -140,17 +147,19 @@ const DateRangePicker = ({
           label={`${nextYear.format("YYYY")} >`}
           onPress={() => setSelectedDate(nextYear)}
           align="right"
+          iconColor={iconColor}
         />
       </View>
 
-      <View style={styles.titleRow}>
+      <View style={[styles.titleRow, titleContainerStyle]}>
         <Button
           font={font}
           disabled={minDate ? lastMonth.isBefore(minDate, "months") : false}
           label={`< ${lastMonth.locale(ln).format("MMM")}`}
           onPress={() => setSelectedDate(lastMonth)}
+          iconColor={iconColor}
         />
-        <Text style={{ ...styles.title, fontFamily: font }}>
+        <Text style={{ ...styles.title, fontFamily: font, ...titleStyle }}>
           {selectedDate.locale(ln).format("MMMM")}
         </Text>
         <Button
@@ -159,6 +168,7 @@ const DateRangePicker = ({
           label={`${nextMonth.locale(ln).format("MMM")} >`}
           onPress={() => setSelectedDate(nextMonth)}
           align="right"
+          iconColor={iconColor}
         />
       </View>
       <Month
@@ -173,23 +183,31 @@ const DateRangePicker = ({
         selectedDateStyle={selectedDateStyle}
       />
       <View style={styles.actionButtonsContainer}>
-        {confirmBtnTitle ? <View>
-          <Pressable
-            onPress={onPressConfirm}
-            style={[styles.actionBtn]}
-          >
-            <Text style={{ fontFamily: font }}>{confirmBtnTitle}</Text>
-          </Pressable>
-        </View> : null}
-        {clearBtnTitle ? <View>
-          <Pressable
-            disabled={isDateSelected()}
-            onPress={onPressClear}
-            style={[styles.actionBtn, { opacity: isDateSelected() ? 0.3 : 1 }]}
-          >
-            <Text style={{ fontFamily: font }}>{clearBtnTitle}</Text>
-          </Pressable>
-        </View> : null}
+        {confirmBtnTitle ? (
+          <View>
+            <Pressable onPress={onPressConfirm} style={[styles.actionBtn]}>
+              <Text style={[{ fontFamily: font }, titleStyle]}>
+                {confirmBtnTitle}
+              </Text>
+            </Pressable>
+          </View>
+        ) : null}
+        {clearBtnTitle ? (
+          <View>
+            <Pressable
+              disabled={isDateSelected()}
+              onPress={onPressClear}
+              style={[
+                styles.actionBtn,
+                { opacity: isDateSelected() ? 0.3 : 1 },
+              ]}
+            >
+              <Text style={{ fontFamily: font, color: iconColor }}>
+                {clearBtnTitle}
+              </Text>
+            </Pressable>
+          </View>
+        ) : null}
       </View>
     </View>
   );
@@ -220,5 +238,5 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     paddingVertical: 5,
-  }
+  },
 });