React-native-calendars: Agenda not rendering

[hszeto]

I'm running: react-native 53.0 and react-native-calendars 1.17.4

Agenda is not being rendered. All I have is a blank screen.

render(){
  return(
    <Agenda />
  );
}

But this works.

render(){
  return(
    <CalendarList />
  );
}

Any idea what am I doing wrong or missing? My app has been npm run eject. Not sure if that matters....

[jgtorrejon]

I have the same problem, I set the documentation example in a Screen and doesn't rendered it.

[LeonardoAbrilBejarano]

+1

[jgtorrejon]

I try the Agenda example, and it works.

Agenda example

[hszeto]

@jgtorrejon which version of react-native-calendars are you using?

[jgtorrejon]

The last -> "1.17.4"

[hszeto]

I finally got something to render. But it looks weird.

render(){
  return(
      <View >
        <Agenda />
        <CalendarList />
      </View>
  );
}

Are Agenda and CalendarList supposed to work together? Nothing is rendered without CalendarList after Agenda. I also tried putting CalendarList before Agenda, that didn't work either.

[jgtorrejon]

@hszeto i don't know if that is the problem, but try removing the View tag.

[jgtorrejon]

@MrWangjiahuan to that you can use 'current' option inside a component.

[hszeto]

@jgtorrejon I tried with or without View tag... no help...

[hszeto]

I final got it working. Need to set a height.

render(){
  return(
    <View style={{height: 600}}>
        <Agenda />
    </View>
  );
}

[temitope]

wow. that took me a couple hours. it was the height the whole time. that should be documented perhaps since it is not required to set height for Calendar to work.

[RicardoBer]

Height is not the problem

You put one Agenda and one CalendarList in your view (two diferent components) in the example in the comment that you say that "it looks weird".

The Agenta component has a CalendarList inside it.

Let just stay one agenda on your view and remove the height style.