fix: [ExpandableCalendar] setting screenReaderEnabled to true causing error

[david-mi]

The issue

On ExpandableCalendar component, when screenReaderEnabled state is set to true, it causes a "rendered fewer Hooks than expected" error

react-native-calendars/src/expandableCalendar/index.tsx

Line 128 in da9b1bd

const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);

Demo

• On the left, the application with the screen reader enabled
• One the right, the application without the screen reader

Analysis

Based on this part of react documentation : Never call component functions directly

This error is occuring because some components are called as regular functions instead of JSX :

react-native-calendars/src/expandableCalendar/index.tsx

Lines 610 to 617 in da9b1bd

	<Animated.View testID={`${testID}.expandableContainer`} ref={wrapper} style={wrapperStyle} {...panResponder.panHandlers}>
	{renderCalendarList()}
	{renderWeekCalendar()}
	{!hideKnob && renderKnob()}
	{!horizontal && renderAnimatedHeader()}
	</Animated.View>
	)}
	</View>

Suggested Fix

My fix involves few changes by simply converting render functions name to Pascal case, and then calling them as JSX

Demo