react-native-calendars icon indicating copy to clipboard operation
react-native-calendars copied to clipboard

customHeader prop not working

Open MarcHbb opened this issue 1 year ago • 2 comments

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

MarcHbb avatar May 22 '23 12:05 MarcHbb

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.

sleekLancelot avatar Feb 17 '24 00:02 sleekLancelot

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}
/>

elliothux avatar May 13 '24 11:05 elliothux