React-native-calendars: renderArrow

[telltokichu]

Description

I am using renderArrow in Calendar component to render Custom Arrow Icons. I am hiding right and left arrows on certain conditions for example : when maxDate is reached the right arrow is not needed. On such occasion the right arrow is not rendering but while pressing the empty area where the right arrow renders the months are getting changed

Expected Behavior

once maxDate reached right arrow should not be rendered and future month navigation should not be done.

Observed Behavior

once maxDate reached right arrow is not rendering but while clicking on the empty area next month navigation is happening

Environment

• "react-native-calendars": "^1.22.0",
• "react-native": "0.58.3",

My code :

renderArrow = {
( direction ) =>
{
if ( direction == 'left' && this.state.prevMonthAvailable ) return ( < Icon name = 'chevron-left'
size = {
30
}
color = {
colors.blue
}
/>);
if ( direction == 'right' && this.state.nextMonthAvailable ) return ( < Icon name = 'chevron-right'
size = {
30
}
color = {
colors.blue
}
/>);
}
}
onMonthChange = {
( month ) =>
{
if ( moment( month.dateString ).isAfter( this.state.maxDate ) )
{
this.setState(
{
nextMonthAvailable: false
} )
}
}
}

[s349856186]

@telltokichu Solved ？ how to achieve maxMonth？

[huynhnhatthiep]

Now you can use renderArrow with syntax as below:
renderArrow={(direction) => direction === 'left' ? <IconLeft> : < IconRight/>}