Arrows not showing on iOS

[RShah512]

689 Description

The left and right arrows in the Calendar are not visible on iPhone X device, but are visible when run from xCode simulator. I tried using the Calendar inside & outside Native Base Card and both the arrows are not visible. I have no extra styles added on that page. The arrows are correctly visible on android device.

Expected Behavior

The calendar arrows should be visible on the device

Environment

• npm ls react-native-calendars: 1.22
• npm ls react-native:0.60.3

Also specify:

1. Phone/emulator/simulator & version: iPhone X

Reproducible Demo

Issues that come with minimal repro's are resolved much more quickly than issues where a maintainer has to reproduce themselves.

[ggunti]

Same problem at me. Sometimes the arrows are not visible on android too. I can't figure out why sometimes they appear and why sometimes they don't. Did you find a solution?

[RShah512]

@ggunti Yes, I solved it by customising the renderArrow parameter renderArrow = { ( direction ) => { if ( direction == 'left') return (); if ( direction == 'right') return ( ); }

[ggunti]

Thank you! It works!

[Inbal-Tish]

@RShah512 Hi. I can't reproduce. Is it OS version related? Can you add a code snippet so I can see which component you're using and how?

[anija]

@ggunti Yes, I solved it by customising the renderArrow parameter renderArrow = { ( direction ) => { if ( direction == 'left') return (); if ( direction == 'right') return ( ); }

I was having a similar problem: arrows won't shows up on web. This workaround fixed my problem, thanks!

[sankaSanjeeva]

@ggunti Yes, I solved it by customising the renderArrow parameter renderArrow = { ( direction ) => { if ( direction == 'left') return (); if ( direction == 'right') return ( ); }

Thanks, I was searching how to separate left and right arrows So, I am doing like this

renderArrow={(direction) => {
    if (direction == 'left') {
        return (<Text>Prev</Text>)
    } else {
        return (<Text>Next</Text>)
    }
}}

If it is wrong let me know, thanks

[pencilcheck]

That is weird, I thought arrow should come as default??

[manueldeprada]

Easy fix that works for me in web, not tested on iOS:

      <Calendar
        theme={{
          arrowWidth: 20,
          arrowHeight: 20,
        }}