How to position nextComponent with position absolute

[aravicubet]

I want to implement something like this, but when adding a component the calendar is pushed to the bottom and the component positions properly. How to position the next and previous component anwhere and call the required next, previous actions

const ArrowNext = () => {
  return (
    <View
      style={{
        height: 40,
        width: 40,
        borderRadius: 20,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center',
        position: 'absolute',
        top: 20,
        left: 0,
        right: 0,
        bottom: 0,
      }}>
      <Text>{'>'}</Text>
    </View>
  );
};

  <CalendarPicker
        startFromMonday={true}
        customDayHeaderStyles={customDayHeaderStylesCallback}
        customDatesStyles={customDatesStylesCallback}
        dayShape="circle"
        selectedRangeStyle={{backgroundColor: colors.veryLightGreen, borderRadius: 17.5, width: 25, height: 25}}
        minDate={new Date()}
        todayBackgroundColor={colors.lightGrey}
        allowRangeSelection
        onDateChange={onDayPress}
        width={scale(300)}
        height={scale(300)}
        selectedDayColor={colors.green}
        restrictMonthNavigation
        nextComponent={<></>}
        todayTextStyle={{fontWeight: 'bold'}}
        nextComponent={<ArrowNext />}
        // selectedDayTextColor={colors.white}
      />```

[peacechen]

The current layout doesn't support the navigation arrows to the side of the calendar. Create a PR and add a prop to support that. You could implement it yourself by adding next/previous arrows to each side of the calendar, then set their callbacks to update the initialDate prop. initialDate may be any day of the month that you want the calendar to be on.

[aravicubet]

I tried with initialDate. But the problem is if i select a date from one month, then change the initialDate prop for navigating to next month, then it resets the from date thats already chosen and when touched on a date in the next month it reselect the date again in the case of selecting multiple dates.