Main

App.tsx

@@ -8,7 +8,7 @@ export default function App() {
   const [range, setRange] = useState<{ startDate: Date; endDate?: Date }>({ startDate: new Date(), endDate: new Date() });
   const [date, setDate] = useState<Date>(new Date());
 
-  const customTheme = {
+  const calendarStyle = {
     primary: '#FF5733',
     onPrimary: '#000000',
     secondary: '#FFC300',
@@ -40,7 +40,7 @@ export default function App() {
         <View style={styles.container}>
           <View style={{ flex: 1 }}>
             {RenderTitle('Multi Date Picker:', range.startDate, range.endDate)}
-            <RokoCalendar theme={customTheme} value={range} onChange={setRange} multiple={true} />
+            <RokoCalendar theme={{ colors: calendarStyle }} value={range} onChange={setRange} multiple={true} />
           </View>
 
           <View style={{ flex: 1 }}>

lib/components/BetweenDates.tsx

@@ -1,18 +1,18 @@
 import { StyleSheet, View } from 'react-native';
 import React, { FC, memo } from 'react';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 interface Props {
   isBetween: boolean;
   firstSelection: boolean;
   secondSelection: boolean;
 }
 const BetweenDates: FC<Props> = ({ isBetween, firstSelection, secondSelection }) => {
-  const theme = useTheme();
+  const context = useTheme();
 
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
   return (
     <View style={[style().root, isBetween && style().isBetween, firstSelection && style().isLeftEdge, secondSelection && style().isRightEdge]} />
@@ -21,7 +21,7 @@ const BetweenDates: FC<Props> = ({ isBetween, firstSelection, secondSelection })
 
 export default memo(BetweenDates);
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: {
       ...StyleSheet.absoluteFillObject,

lib/components/CalendarHeader.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import IconButton from './IconButton';
 import Constants from '../utils/Constants';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 interface Props {
   handlePreviousMonth: () => void;
@@ -12,10 +12,10 @@ interface Props {
 }
 
 const CalendarHeader: FC<Props> = ({ title, handlePreviousMonth, handleNextMonth }) => {
-  const theme = useTheme();
+  const context = useTheme();
 
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
 
   return (
@@ -29,7 +29,7 @@ const CalendarHeader: FC<Props> = ({ title, handlePreviousMonth, handleNextMonth
 
 export default CalendarHeader;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: {
       alignItems: 'center',

lib/components/Cell.tsx

@@ -3,18 +3,18 @@ import React, { FC, memo } from 'react';
 import { format } from 'date-fns';
 import TodayIndicator from './TodayIndicator';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 interface Props {
   day: Date;
   selected: boolean;
   isCurrentMonth: boolean;
 }
 const Cell: FC<Props> = ({ day, selected, isCurrentMonth }) => {
-  const theme = useTheme();
+  const context = useTheme();
 
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
 
   return (
@@ -29,7 +29,7 @@ const Cell: FC<Props> = ({ day, selected, isCurrentMonth }) => {
 
 export default memo(Cell);
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: { flex: 1, alignItems: 'center', justifyContent: 'center' },
     text: { fontSize: 14, color: theme.onBackground },

lib/components/Day.tsx

@@ -1,7 +1,7 @@
 import { Pressable, StyleSheet, View } from 'react-native';
 import React, { FC } from 'react';
 import Cell from './Cell';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 import { useTheme } from '../hooks/ThemeContext';
 
 interface Props {
@@ -12,13 +12,13 @@ interface Props {
 }
 const Day: FC<Props> = ({ day, selected, onChange, isCurrentMonth }) => {
   // #region HOOKS
-  const theme = useTheme();
+  const context = useTheme();
   // #endregion
   // #region FUNCTIONS
   const handleSelectDate = () => onChange(day);
 
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
   // #endregion
   return (
@@ -34,7 +34,7 @@ const Day: FC<Props> = ({ day, selected, onChange, isCurrentMonth }) => {
 
 export default Day;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: {
       flex: 1,

lib/components/IconButton.tsx

@@ -3,24 +3,24 @@ import React, { FC } from 'react';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { IIconButton } from '../models/IIconButton';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 const IconButton: FC<IIconButton> = ({ icon, onPress }) => {
   // #region HOOKS
-  const theme = useTheme();
+  const context = useTheme();
   // #endregion
   // #region FUNCTIONS
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
   // #endregion
   return (
     <TouchableOpacity style={style().root} onPress={onPress}>
-      <MaterialCommunityIcons name={icon} size={24} color={theme.onBackground} />
+      <MaterialCommunityIcons name={icon} size={24} color={context.colors.onBackground} />
     </TouchableOpacity>
   );
 };
 
 export default IconButton;
 
-const styles = (theme: ITheme) => StyleSheet.create({ root: { padding: 4, borderRadius: 16 } });
+const styles = (theme: IStyle) => StyleSheet.create({ root: { padding: 4, borderRadius: 16 } });

lib/components/RokoCalendar.tsx

@@ -8,8 +8,9 @@ import CalendarHeader from './CalendarHeader';
 import WeekContainer from './WeekContainer';
 import WeekIndicator from './WeekIndicator';
 import ErrorView from './ErrorView';
-import { ITheme, defaultTheme } from '../models/props/ITheme';
+import { IStyle, defaultTheme } from '../models/props/IStyle';
 import ThemeContext from '../hooks/ThemeContext';
+import { ITheme } from '../models/ITheme';
 
 type SelectionProps = ISingleSelection | IMultiSelection;
 
@@ -69,7 +70,7 @@ const RokoCalendar: FC<RokoCalendarProps> = ({ multiple, value, onChange, theme
   );
 
   const style = () => {
-    return styles(theme);
+    return styles(theme.colors);
   };
   // #endregion
   return (
@@ -89,7 +90,7 @@ const RokoCalendar: FC<RokoCalendarProps> = ({ multiple, value, onChange, theme
 
 export default RokoCalendar;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: {
       flex: 1,

lib/components/TodayIndicator.tsx

@@ -2,30 +2,30 @@ import { StyleSheet, View } from 'react-native';
 import React, { FC } from 'react';
 import { isToday } from 'date-fns';
 import { useTheme } from '../hooks/ThemeContext';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 
 interface Props {
   value: Date;
   selected: boolean;
 }
 const TodayIndicator: FC<Props> = ({ value, selected }) => {
   // #region HOOKS
-  const theme = useTheme();
+  const context = useTheme();
   // #endregion
   // #region FUNCTIONS
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
   // #endregion
 
   if (isToday(value)) {
-    return <View style={[style().root, { backgroundColor: selected ? theme.primaryVariant : theme.onPrimaryVariant }]} />;
+    return <View style={[style().root, { backgroundColor: selected ? context.colors.primaryVariant : context.colors.onPrimaryVariant }]} />;
   } else {
     return null;
   }
 };
 
 export default TodayIndicator;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({ root: { height: 5, width: 5, borderRadius: 5, position: 'absolute', backgroundColor: 'white', bottom: 5 } });

lib/components/WeekContainer.tsx

@@ -4,15 +4,24 @@ import Day from './Day';
 import { isAfter, isBefore, isEqual, isSameDay, isSameMonth } from 'date-fns';
 import BetweenDates from './BetweenDates';
 import { IWeekContainer } from '../models/props/IWeekContainer';
+import { useTheme } from '../hooks/ThemeContext';
 
 const WeekContainer: FC<IWeekContainer> = ({ week, value, currentDate, onChange }) => {
+  // #region HOOKS
+  const context = useTheme();
+  // #endregion
   // #region FUNCTIONS
   function isBetweenDates(targetDate: Date, startDate: Date, endDate: Date) {
     return (isAfter(targetDate, startDate) || isEqual(targetDate, startDate)) && (isBefore(targetDate, endDate) || isEqual(targetDate, endDate));
   }
   // #endregion
   return (
-    <View style={styles.root}>
+    <View
+      style={[
+        styles.root,
+        { flex: context.spacing && context.spacing.weekHeight ? undefined : 1, height: context.spacing && context.spacing.weekHeight },
+      ]}
+    >
       {week.map((day, dayIndex) => {
         const foundIndex = value.findIndex((i) => isSameDay(i, day));
         const selected = foundIndex > -1;
@@ -35,7 +44,6 @@ export default memo(WeekContainer);
 
 const styles = StyleSheet.create({
   root: {
-    flex: 1,
     flexDirection: 'row',
   },
 });

lib/components/WeekIndicator.tsx

@@ -2,17 +2,17 @@ import { StyleSheet, Text, View } from 'react-native';
 import React, { FC, useMemo } from 'react';
 import { startOfWeek, addDays, format } from 'date-fns';
 import Constants from '../utils/Constants';
-import { ITheme } from '../models/props/ITheme';
+import { IStyle } from '../models/props/IStyle';
 import { useTheme } from '../hooks/ThemeContext';
 
 interface Props {}
 const WeekIndicator: FC<Props> = ({}) => {
   // #region HOOKS
-  const theme = useTheme();
+  const context = useTheme();
   // #endregion
   // #region FUNCTIONS
   const style = () => {
-    return styles(theme);
+    return styles(context.colors);
   };
 
   const weekDays = useMemo(() => {
@@ -40,7 +40,7 @@ const WeekIndicator: FC<Props> = ({}) => {
 
 export default WeekIndicator;
 
-const styles = (theme: ITheme) =>
+const styles = (theme: IStyle) =>
   StyleSheet.create({
     root: { flexDirection: 'row', alignItems: 'center', paddingVertical: Constants.spacing.regular },
     container: { alignItems: 'center', justifyContent: 'center', flex: 1 },

lib/hooks/ThemeContext.tsx

@@ -1,6 +1,7 @@
 // ThemeContext.tsx
-import React, { createContext, useContext } from 'react';
-import { ITheme, defaultTheme } from '../models/props/ITheme';
+import { createContext, useContext } from 'react';
+import { defaultTheme } from '../models/props/IStyle';
+import { ITheme } from '../models/ITheme';
 
 const ThemeContext = createContext<ITheme>(defaultTheme);
 

lib/models/ITheme.ts

@@ -0,0 +1,7 @@
+import { ISpaces } from './props/ISpaces';
+import { IStyle } from './props/IStyle';
+
+export interface ITheme {
+  colors: IStyle;
+  spacing?: ISpaces;
+}

lib/models/props/ISpaces.ts

@@ -0,0 +1,3 @@
+export interface ISpaces {
+  weekHeight?: number;
+}

lib/models/props/IStyle.ts

@@ -0,0 +1,30 @@
+import { ITheme } from '../ITheme';
+
+// Theme.ts
+type IStyle = {
+  primary?: string;
+  onPrimary?: string;
+  secondary?: string;
+  primaryVariant?: string;
+  onPrimaryVariant?: string;
+  background?: string;
+  onBackground?: string;
+};
+
+const defaultTheme: ITheme = {
+  colors: {
+    primary: '#757575',
+    onPrimary: '#F5F5F5',
+    secondary: '#BDBDBD',
+    primaryVariant: '#F5F5F5',
+    onPrimaryVariant: '#9E9E9E',
+    background: '#FAFAFA',
+    onBackground: '#212121',
+  },
+  spacing: {
+    weekHeight: undefined,
+  },
+};
+
+export type { IStyle };
+export { defaultTheme };