Merge branch 'master' of github.com:wix/react-native-calendars into release

Author: Inbal-Tish

README.md

@@ -9,7 +9,7 @@ This module includes various customizable **React-Native** calendar components.
 
 The package is both **Android** and **iOS** compatible.
 
-See our new [Docs site](https://wix.github.io/react-native-calendars/)
+**See our new [Docs site](https://wix.github.io/react-native-calendars/)**
 
 ## Try it out
 
@@ -94,7 +94,7 @@ LocaleConfig.defaultLocale = 'fr';
 ```javascript
 <Calendar
   // Initially visible month. Default = now
-  current={'2012-03-01'}
+  initialDate={'2012-03-01'}
   // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
   minDate={'2012-05-10'}
   // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined

android/app/build.gradle

@@ -4,7 +4,7 @@ import com.android.build.OutputFile
 
 project.ext.react = [
     entryFile: "index.js",
-    enableHermes: false,  // clean and rebuild if changing
+    enableHermes: true,  // clean and rebuild if changing
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"

android/app/proguard-rules.pro

@@ -68,3 +68,6 @@
 -dontwarn java.nio.file.*
 -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
 -dontwarn okio.**
+
+-keep class com.facebook.hermes.unicode.** { *; }
+-keep class com.facebook.jni.** { *; }

example/src/screens/calendarsList.tsx renamed to example/src/screens/calendarListScreen.tsx

@@ -1,46 +1,62 @@
-import React, {useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-// @ts-expect-error
-import {CalendarList} from 'react-native-calendars';
+import React, {useState, useMemo, useCallback} 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 CalendarsList = () => {
+interface Props {
+  horizontalView?: boolean;
+}
+
+const CalendarListScreen = (props: Props) => {
+  const {horizontalView} = props;
   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'
+      },
+      ['2022-08-05']: {
+        selectedTextColor: 'pink'
+      }
+    };
+  }, [selected]);
 
-  const onDayPress = day => {
+  const onDayPress = useCallback((day: DateData) => {
     setSelected(day.dateString);
-  };
+  }, []);
 
   return (
     <CalendarList
       testID={testIDs.calendarList.CONTAINER}
       current={initialDate}
       pastScrollRange={RANGE}
       futureScrollRange={RANGE}
-      renderHeader={renderCustomHeader}
-      theme={theme}
       onDayPress={onDayPress}
-      markedDates={markedDates}
+      markedDates={marked}
+      renderHeader={!horizontalView ? renderCustomHeader : undefined}
+      theme={!horizontalView ? theme : undefined}
+      horizontal={horizontalView}
+      pagingEnabled={horizontalView}
+      staticHeader={horizontalView}
     />
   );
 };
 
 const theme = {
-  'stylesheet.calendar.header': {
-    dayHeader: {
-      fontWeight: '600',
-      color: '#48BFE3'
+  stylesheet: {
+    calendar: {
+      header: {
+        dayHeader: {
+          fontWeight: '600',
+          color: '#48BFE3'
+        }
+      }
     }
   },
   'stylesheet.day.basic': {
@@ -55,10 +71,10 @@ const theme = {
   }
 };
 
-function renderCustomHeader(date) {
+function renderCustomHeader(date: any) {
   const header = date.toString('MMMM yyyy');
   const [month, year] = header.split(' ');
-  const textStyle = {
+  const textStyle: TextStyle = {
     fontSize: 18,
     fontWeight: 'bold',
     paddingTop: 10,
@@ -75,7 +91,7 @@ function renderCustomHeader(date) {
   );
 }
 
-export default CalendarsList;
+export default CalendarListScreen;
 
 const styles = StyleSheet.create({
   header: {

example/src/screens/calendarScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useState, Fragment, useCallback, useMemo} from 'react';
+import React, {useState, Fragment, useCallback, useMemo, useRef} from 'react';
 import {StyleSheet, View, ScrollView, Text, TouchableOpacity} from 'react-native';
 import {Calendar, CalendarProps} from 'react-native-calendars';
 import testIDs from '../testIDs';
@@ -7,6 +7,7 @@ const INITIAL_DATE = '2020-02-02';
 
 const CalendarScreen = () => {
   const [selected, setSelected] = useState(INITIAL_DATE);
+  const [currentMonth, setCurrentMonth] = useState(INITIAL_DATE);
 
   const onDayPress: CalendarProps['onDayPress'] = useCallback(day => {
     setSelected(day.dateString);
@@ -138,12 +139,16 @@ const CalendarScreen = () => {
             selectedDayBackgroundColor: '#333248',
             arrowColor: 'white',
             // textDisabledColor: 'red',
-            'stylesheet.calendar.header': {
-              week: {
-                marginTop: 30,
-                marginHorizontal: 12,
-                flexDirection: 'row',
-                justifyContent: 'space-between'
+            stylesheet: {
+              calendar: {
+                header: {
+                  week: {
+                    marginTop: 30,
+                    marginHorizontal: 12,
+                    flexDirection: 'row',
+                    justifyContent: 'space-between'
+                  }
+                }
               }
             }
           }}
@@ -411,14 +416,36 @@ const CalendarScreen = () => {
     );
   };
 
+  const customHeaderProps: any = useRef();
+
+  const setCustomHeaderNewMonth = (next = false) => {
+    const add = next ? 1 : -1;
+    const month = customHeaderProps?.current?.month;
+    const newMonth = new Date(month.setMonth(month.getMonth() + add));
+    customHeaderProps?.current?.addMonth(add);
+    setCurrentMonth(newMonth.toISOString().split('T')[0]);
+  };
+  const moveNext = () => {
+    setCustomHeaderNewMonth(true);
+  };
+  const movePrevious = () => {
+    setCustomHeaderNewMonth(false);
+  };
+
   const renderCalendarWithCustomHeader = () => {
     const CustomHeader = React.forwardRef((props, ref) => {
+      customHeaderProps.current = props;
+      
       return (
         // @ts-expect-error
         <View ref={ref} {...props} style={styles.customHeader}>
-          <Text>This is a custom header!</Text>
-          <TouchableOpacity onPress={() => console.warn('Tapped!')}>
-            <Text>Tap Me</Text>
+          <TouchableOpacity onPress={movePrevious}>
+            <Text>Previous</Text>
+          </TouchableOpacity>
+          <Text>Custom header!</Text>
+          <Text>{currentMonth}</Text>
+          <TouchableOpacity onPress={moveNext}>
+            <Text>Next</Text>
           </TouchableOpacity>
         </View>
       );
@@ -428,6 +455,7 @@ const CalendarScreen = () => {
       <Fragment>
         <Text style={styles.text}>Calendar with custom header component</Text>
         <Calendar
+          initialDate={INITIAL_DATE}
           testID={testIDs.calendars.LAST}
           style={[styles.calendar, styles.customCalendar]}
           customHeader={CustomHeader}

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
@@ -122,21 +122,23 @@ function getTheme() {
     // arrows
     arrowColor: 'black',
     arrowStyle: {padding: 0},
+    // knob
+    expandableKnobColor: themeColor,
     // month
     monthTextColor: 'black',
     textMonthFontSize: 16,
     textMonthFontFamily: 'HelveticaNeue',
-    textMonthFontWeight: 'bold',
+    textMonthFontWeight: 'bold' as 'bold',
     // day names
     textSectionTitleColor: 'black',
     textDayHeaderFontSize: 12,
     textDayHeaderFontFamily: 'HelveticaNeue',
-    textDayHeaderFontWeight: 'normal',
+    textDayHeaderFontWeight: 'normal' as 'normal',
     // dates
     dayTextColor: themeColor,
     textDayFontSize: 18,
     textDayFontFamily: 'HelveticaNeue',
-    textDayFontWeight: '500',
+    textDayFontWeight: '500' as '500',
     textDayStyle: {marginTop: Platform.OS === 'android' ? 2 : 4},
     // selected date
     selectedDayBackgroundColor: themeColor,
@@ -186,7 +188,7 @@ export default class ExpandableCalendarScreen extends Component<Props> {
         onMonthChange={this.onMonthChange}
         showTodayButton
         disabledOpacity={0.6}
-        // theme={this.todayBtnTheme}
+        theme={this.todayBtnTheme}
         // todayBottomMargin={16}
       >
         {this.props.weekView ? (
@@ -202,7 +204,7 @@ export default class ExpandableCalendarScreen extends Component<Props> {
             // calendarStyle={styles.calendar}
             // headerStyle={styles.calendar} // for horizontal only
             // disableWeekScroll
-            // theme={this.theme}
+            theme={this.theme}
             // disableAllTouchEventsForDisabledDays
             firstDay={1}
             markedDates={this.marked}

example/src/screens/horizontalCalendarList.tsx

@@ -1,19 +1,19 @@
 import {Navigation} from 'react-native-navigation';
 
 import MenuScreen from './menuScreen';
-import CalendarsScreen from './calendarScreen';
+import CalendarScreen from './calendarScreen';
 import AgendaScreen from './agendaScreen';
-import CalendarsList from './calendarsList';
-import HorizontalCalendarList from './horizontalCalendarList';
+import CalendarsListScreen from './calendarListScreen';
+import NewCalendarsListScreen from './newCalendarListScreen';
 import ExpandableCalendarScreen from './expandableCalendarScreen';
 import TimelineCalendarScreen from './timelineCalendarScreen';
 
 export function registerScreens() {
   Navigation.registerComponent('Menu', () => MenuScreen);
-  Navigation.registerComponent('Calendars', () => CalendarsScreen);
-  Navigation.registerComponent('Agenda', () => AgendaScreen);
-  Navigation.registerComponent('CalendarsList', () => CalendarsList);
-  Navigation.registerComponent('HorizontalCalendarList', () => HorizontalCalendarList);
+  Navigation.registerComponent('CalendarScreen', () => CalendarScreen);
+  Navigation.registerComponent('AgendaScreen', () => AgendaScreen);
+  Navigation.registerComponent('CalendarListScreen', () => CalendarsListScreen);
+  Navigation.registerComponent('NewCalendarListScreen', () => NewCalendarsListScreen);
   Navigation.registerComponent('ExpandableCalendarScreen', () => ExpandableCalendarScreen);
-  Navigation.registerComponent('TimelineCalendar', () => TimelineCalendarScreen);
+  Navigation.registerComponent('TimelineCalendarScreen', () => TimelineCalendarScreen);
 }

example/src/screens/index.ts

@@ -94,7 +94,7 @@ export default class MenuScreen extends Component<Props> {
   }
 
   onCalendarListPress() {
-    this.pushScreen('CalendarsList');
+    this.pushScreen('CalendarListScreen');
   }
 
   onHorizontalCalendarListPress() {