react-native-calendars
react-native-calendars copied to clipboard
customHeader prop not working
Description
When using customHeader prop, the default header is displayed instead of the custom header
const renderCustomHeader = (params) => ( <Title>MONTH</Title>)
<ExpandableCalendar customHeader={renderCustomHeader} firstDay={1} />
Environment
-
npm ls react-native-calendars
: 1.1297.0 -
npm ls react-native
: 0.71.3
Please can someone help with this, passing a function to the customHeader prop like above just give an empty space. passing it as a react component: <RenderCustomHeader /> gives an error. Also on the documentation, the type for customHeader prop is specified as "any", so i can't tell what kind of value that prop expects.
import { CalendarHeaderProps } from 'react-native-calendars/src/calendar/header';
import { HEADER_HEIGHT } from 'react-native-calendars/src/expandableCalendar/style';
// Header component
function MyHeader(props: CalendarHeaderProps) {
return (
<View style={{ height: HEADER_HEIGHT }} className="bg-red-100">
<Text>Custom header1</Text>
</View>
);
}
// Add headerStyle "display: 'none'" or customHeader will not work
<ExpandableCalendar
headerStyle={{ display: 'none' }}
customHeader={MyHeader}
/>