Fix calendar reveal

App.tsx

@@ -1,26 +1,46 @@
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import RokoCalendar from './lib';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { useState } from 'react';
 import { format } from 'date-fns';
+import Animated, { interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 
 export default function App() {
+  const [isOpen, toggleShow] = useState(false);
+
   const [range, setRange] = useState<{ startDate: Date; endDate?: Date }>({ startDate: new Date(), endDate: new Date() });
+
   const [date, setDate] = useState<Date>(new Date());
 
   const calendarStyle = {
     primary: '#FF5733',
-    onPrimary: '#000000',
-    secondary: '#FFC300',
-    primaryVariant: '#FF5733',
-    onPrimaryVariant: '#FFFFFF',
+    onPrimary: 'white',
+    primaryVariant: '#FFF9C4',
+    onPrimaryVariant: '#9E9E9E',
     background: '#DAF7A6',
     onBackground: '#000000',
   };
+  const animatedValue = useSharedValue(0);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(animatedValue.value, [0, 50 * 7], [0, 1]);
+    const padding = interpolate(animatedValue.value, [0, 50 * 7], [0, 16]);
+    const borderRadius = interpolate(animatedValue.value, [0, 50 * 7], [0, 16]);
+    const display = animatedValue.value < 5 ? 'none' : 'flex';
+    return { height: animatedValue.value, opacity, padding, borderRadius, display };
+  });
+
+  const animate = (value: number) => {
+    animatedValue.value = withTiming(value, { duration: 200 }, (finished) => {
+      if (finished) {
+        runOnJS(toggleShow)(value !== 0);
+      }
+    });
+  };
 
   const RenderTitle = (title: string, startDate: Date, endDate?: Date) => {
     return (
-      <View>
+      <TouchableOpacity activeOpacity={1} style={{ gap: 6 }} onPress={() => animate(isOpen ? 0 : 50 * 7)}>
         <Text style={{ fontSize: 20 }}>{title}</Text>
         <View style={{ flexDirection: 'row', marginBottom: 4 }}>
           <Text>{format(startDate, 'MMM dd, yyyy')}</Text>
@@ -31,22 +51,18 @@ export default function App() {
             </>
           )}
         </View>
-      </View>
+      </TouchableOpacity>
     );
   };
+
   return (
     <SafeAreaProvider>
       <SafeAreaView style={{ flex: 1 }}>
         <View style={styles.container}>
-          <View style={{ flex: 1 }}>
-            {RenderTitle('Multi Date Picker:', range.startDate, range.endDate)}
-            <RokoCalendar theme={{ colors: calendarStyle }} value={range} onChange={setRange} multiple={true} />
-          </View>
-
-          <View style={{ flex: 1 }}>
-            {RenderTitle('Single Date Picker:', date, undefined)}
-            <RokoCalendar value={date} onChange={setDate} />
-          </View>
+          {RenderTitle('Single Date Picker:', range.startDate, range.endDate)}
+          <Animated.View style={[animatedStyle, {}]}>
+            <RokoCalendar multiple={false} theme={{ colors: calendarStyle }} value={date} onChange={setDate} />
+          </Animated.View>
         </View>
       </SafeAreaView>
     </SafeAreaProvider>
@@ -58,6 +74,5 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: 16,
     gap: 16,
-    justifyContent: 'space-around',
   },
 });

babel.config.js

@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
   };
 };

lib/components/BetweenDates.tsx

@@ -1,34 +1,44 @@
 import { StyleSheet, View } from 'react-native';
-import React, { FC, memo } from 'react';
+import React, { FC, memo, useMemo } from 'react';
 import { useTheme } from '../hooks/ThemeContext';
 import { IStyle } from '../models/props/IStyle';
+import { ITheme } from '../models/ITheme';
 
 interface Props {
   isBetween: boolean;
   firstSelection: boolean;
   secondSelection: boolean;
 }
+
 const BetweenDates: FC<Props> = ({ isBetween, firstSelection, secondSelection }) => {
-  const context = useTheme();
+  // #region HOOKS
+  const theme = useTheme();
+  // #endregion
+  // #region FUNCTIONS
+  const themedStyles = useMemo(() => styles(theme), [theme]);
+  // #endregion
 
-  const style = () => {
-    return styles(context.colors);
-  };
   return (
-    <View style={[style().root, isBetween && style().isBetween, firstSelection && style().isLeftEdge, secondSelection && style().isRightEdge]} />
+    <View
+      style={[
+        themedStyles.root,
+        isBetween && themedStyles.isBetween,
+        firstSelection && themedStyles.isLeftEdge,
+        secondSelection && themedStyles.isRightEdge,
+      ]}
+    />
   );
 };
 
 export default memo(BetweenDates);
 
-const styles = (theme: IStyle) =>
+const styles = (theme: ITheme) =>
   StyleSheet.create({
     root: {
       ...StyleSheet.absoluteFillObject,
-      marginVertical: 0.5,
-      zIndex: 0,
+      marginVertical: 1,
     },
-    isBetween: { backgroundColor: theme.primaryVariant },
+    isBetween: { backgroundColor: theme.colors.primaryVariant },
     isLeftEdge: { marginStart: 30 },
     isRightEdge: { marginEnd: 30 },
   });

lib/components/DayCell.tsx

@@ -0,0 +1,73 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import React, { FC, memo, useMemo } from 'react';
+import { format, isToday } from 'date-fns';
+import { useTheme } from '../hooks/ThemeContext';
+import { ITheme } from '../models/ITheme';
+
+interface Props {
+  item: Date;
+  selected: boolean;
+  isCurrentMonth: boolean;
+  onChange: (value: Date) => void;
+}
+const DayCell: FC<Props> = ({ item, selected, isCurrentMonth, onChange }) => {
+  // #region HOOKS
+  const theme = useTheme();
+  // #endregion
+  // #region FUNCTIONS
+  const themedStyles = useMemo(() => styles(theme), [theme]);
+  // #endregion
+  return (
+    <TouchableOpacity activeOpacity={1} style={[themedStyles.root]} onPress={() => onChange(item)}>
+      <View style={[selected && themedStyles.selectedBackground, themedStyles.container]}>
+        <Text
+          numberOfLines={1}
+          adjustsFontSizeToFit
+          style={[themedStyles.text, selected && themedStyles.selectedText, !isCurrentMonth && !selected && themedStyles.differentMonthText]}
+        >
+          {format(item, 'dd')}
+        </Text>
+
+        {isToday(item) && (
+          <View
+            style={{
+              height: 3,
+              width: 3,
+              borderRadius: 3,
+              backgroundColor: selected ? theme.colors.onPrimary : theme.colors.primary,
+              position: 'absolute',
+              alignSelf: 'center',
+              bottom: 6,
+            }}
+          />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default memo(DayCell);
+
+const styles = (theme: ITheme) =>
+  StyleSheet.create({
+    root: { flex: 1, alignItems: 'center' },
+    container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+    selectedBackground: {
+      borderRadius: 100,
+      aspectRatio: 1,
+      backgroundColor: theme.colors.primary,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 1,
+      },
+      shadowOpacity: 0.22,
+      shadowRadius: 2.22,
+      elevation: 3,
+      borderWidth: 3,
+      borderColor: theme.colors.onPrimary,
+    },
+    selectedText: { color: theme.colors.onPrimary },
+    differentMonthText: { color: theme.colors.onPrimaryVariant },
+    text: { fontSize: 14 },
+  });