React-native-calendars Show previous and next month instead of arrows using renderArrow function

Question

Description Show previous and next month instead of arrows using renderArrow function

Expected Behavior Show previous month at left side and next month at right side

Observed Behavior Both side shows previous month

My Code:

<Calendar
onDayPress={(day) => {this.setDay(day)}}
renderArrow={(left,right) => (left? {this.state.previousMonth}: {this.state.nextMonth})}
pastScrollRange={0}
markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true, selectedColor: '#C7A985'}}}
firstDay={1}
theme={{
selectedDayTextColor: 'white'
}}
/>

Answer 1

There are two things to note in your code.

• The renderArrow function contains direction as a parameter which subsequently contains the values left and right

• The renderArrow function accepts JSX attributes Therefore you need to modify your code in this way

   <Calendar
      onDayPress={(day) => {this.setDay(day)}}
      renderArrow={this._renderArrow}
      pastScrollRange={0}
      markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true, selectedColor: '#C7A985'}}}
      firstDay={1}
      theme={{
          selectedDayTextColor: 'white'
      }}
  />
  

and the function as

 _renderArrow = (direction) => {
        if(direction === 'left') {
            return <Text>{this.state.previousMonth}</Text>
        } else {
            return <Text>{this.state.nextMonth}</Text>
        }
    }