improving demo screens

Author: Inbal-Tish

example/src/screens/calendarListScreen.tsx

@@ -1,21 +1,23 @@
-import React, {useState} from 'react';
+import React, {useState, useMemo} from 'react';
 import {StyleSheet, Text, View, TextStyle} from 'react-native';
 import {CalendarList, DateData} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
 const RANGE = 24;
-const initialDate = '2020-06-10';
+const initialDate = '2022-07-05';
 
 const CalendarListScreen = () => {
   const [selected, setSelected] = useState(initialDate);
-  const markedDates = {
-    [selected]: {
-      selected: true,
-      disableTouchEvent: true,
-      selectedColor: '#5E60CE',
-      selectedTextColor: 'white'
-    }
-  };
+  const marked = useMemo(() => {
+    return {
+      [selected]: {
+        selected: true,
+        disableTouchEvent: true,
+        selectedColor: '#5E60CE',
+        selectedTextColor: 'white'
+      }
+    };
+  }, [selected]);
 
   const onDayPress = (day: DateData) => {
     setSelected(day.dateString);
@@ -30,7 +32,7 @@ const CalendarListScreen = () => {
       renderHeader={renderCustomHeader}
       theme={theme}
       onDayPress={onDayPress}
-      markedDates={markedDates}
+      markedDates={marked}
     />
   );
 };

example/src/screens/expandableCalendarScreen.tsx

@@ -97,12 +97,12 @@ const ITEMS: any[] = [
   }
 ];
 
-type MarkedDate = {
+type MarkedDates = {
   [key: string]: object;
 }
 
 function getMarkedDates(items: any[]) {
-  const marked: MarkedDate = {};
+  const marked: MarkedDates = {};
 
   items.forEach(item => {
     // NOTE: only mark dates with data

example/src/screens/horizontalCalendarListScreen.tsx

@@ -2,15 +2,16 @@ import React, {useState, useMemo, useCallback} from 'react';
 import {CalendarList} from 'react-native-calendars';
 import testIDs from '../testIDs';
 
-const INITIAL_DATE = '2020-05-16';
+const INITIAL_DATE = '2022-07-05';
 
 const HorizontalCalendarListScreen = () => {
   const [selected, setSelected] = useState(INITIAL_DATE);
   const markedDates = useMemo(() => {
     return {
       [selected]: {
         selected: true,
-        selectedColor: '#DFA460'
+        selectedColor: '#5E60CE',
+        selectedTextColor: 'white'
       }
     };
   }, [selected]);