ExpandableCalendar - fix Android bottom padding in open position.

Calendars demo screen - fix crash

Author: Inbal-Tish

example/src/screens/calendars.tsx

@@ -7,11 +7,6 @@ const INITIAL_DATE = '2020-02-02';
 
 const CalendarsScreen = () => {
   const [selected, setSelected] = useState(INITIAL_DATE);
-  const [showMarkedDatesExamples, setShowMarkedDatesExamples] = useState(false);
-
-  const toggleSwitch = () => {
-    setShowMarkedDatesExamples(!showMarkedDatesExamples);
-  };
 
   const onDayPress: CalendarProps['onDayPress'] = day => {
     setSelected(day.dateString);
@@ -259,7 +254,8 @@ const CalendarsScreen = () => {
                   elevation: 2
                 },
                 text: {
-                  color: 'red'
+                  color: 'red',
+                  marginTop: 0
                 }
               }
             },
@@ -454,19 +450,6 @@ const CalendarsScreen = () => {
     );
   };
 
-  const renderMarkedDatesExamples = () => {
-    return (
-      <Fragment>
-        {renderCalendarWithMarkedDatesAndHiddenArrows()}
-        {renderCalendarWithMultiDotMarking()}
-        {renderCalendarWithPeriodMarkingAndSpinner()}
-        {renderCalendarWithPeriodMarkingAndDotMarking()}
-        {renderCalendarWithMultiPeriodMarking()}
-        {renderCalendarWithCustomMarkingType()}
-      </Fragment>
-    );
-  };
-
   const renderExamples = () => {
     return (
       <Fragment>
@@ -477,29 +460,19 @@ const CalendarsScreen = () => {
         {renderCalendarWithInactiveDays()}
         {renderCalendarWithCustomHeaderTitle()}
         {renderCalendarWithCustomHeader()}
+        {renderCalendarWithMarkedDatesAndHiddenArrows()}
+        {renderCalendarWithMultiDotMarking()}
+        {renderCalendarWithPeriodMarkingAndSpinner()}
+        {renderCalendarWithPeriodMarkingAndDotMarking()}
+        {renderCalendarWithMultiPeriodMarking()}
+        {renderCalendarWithCustomMarkingType()}
       </Fragment>
     );
   };
 
-  const renderSwitch = () => {
-    // Workaround for Detox 18 migration bug
-    return (
-      <View style={styles.switchContainer}>
-        <Switch
-          trackColor={{false: '#d9e1e8', true: '#00BBF2'}}
-          onValueChange={toggleSwitch}
-          value={showMarkedDatesExamples}
-        />
-        <Text style={styles.switchText}>Show markings examples</Text>
-      </View>
-    );
-  };
-
   return (
     <ScrollView showsVerticalScrollIndicator={false} testID={testIDs.calendars.CONTAINER}>
-      {renderSwitch()}
-      {showMarkedDatesExamples && renderMarkedDatesExamples()}
-      {!showMarkedDatesExamples && renderExamples()}
+      {renderExamples()}
     </ScrollView>
   );
 };

src/expandableCalendar/index.tsx

@@ -26,7 +26,7 @@ import {CALENDAR_KNOB} from '../testIDs';
 import {page, weekDayNames} from '../dateutils';
 import {parseDate, toMarkingFormat} from '../interface';
 import {Theme, DateData, Direction} from '../types';
-import styleConstructor, {HEADER_HEIGHT} from './style';
+import styleConstructor, {HEADER_HEIGHT, KNOB_CONTAINER_HEIGHT} from './style';
 import CalendarList, {CalendarListProps} from '../calendar-list';
 import Calendar from '../calendar';
 import asCalendarConsumer from './asCalendarConsumer';
@@ -43,7 +43,6 @@ const SPEED = 20;
 const BOUNCINESS = 6;
 const CLOSED_HEIGHT = 120; // header + 1 week
 const WEEK_HEIGHT = 46;
-const KNOB_CONTAINER_HEIGHT = 20;
 const DAY_NAMES_PADDING = 24;
 const PAN_GESTURE_THRESHOLD = 30;
 const LEFT_ARROW = require('../calendar/img/previous.png');
@@ -271,7 +270,7 @@ class ExpandableCalendar extends Component<ExpandableCalendarProps, State> {
     if (!this.props.horizontal) {
       return Math.max(commons.screenHeight, commons.screenWidth);
     }
-    return CLOSED_HEIGHT + WEEK_HEIGHT * (this.numberOfWeeks - 1) + (this.props.hideKnob ? 12 : KNOB_CONTAINER_HEIGHT);
+    return CLOSED_HEIGHT + (WEEK_HEIGHT * (this.numberOfWeeks - 1)) + (this.props.hideKnob ? 12 : KNOB_CONTAINER_HEIGHT) + (commons.isAndroid ? 3 : 0);
   }
 
   getYear(date: XDate) {

src/expandableCalendar/style.ts

@@ -5,6 +5,8 @@ import {Theme} from '../types';
 
 const commons = require('./commons');
 export const HEADER_HEIGHT = 68;
+export const KNOB_CONTAINER_HEIGHT = 24;
+
 
 export default function styleConstructor(theme: Theme = {}) {
   const appStyle = {...defaultStyle, ...theme};
@@ -35,7 +37,7 @@ export default function styleConstructor(theme: Theme = {}) {
       position: 'absolute',
       left: 0,
       right: 0,
-      height: 24,
+      height: KNOB_CONTAINER_HEIGHT,
       bottom: 0,
       alignItems: 'center',
       justifyContent: 'center',