React-native-calendars: How to update selected date and scroll to newly selected state?

[BigPun86]

Description

I am using the Agenda component and now i would like to change the state "selected" and update the component. Currently changing the selected state does not change anything.

Expected Behavior

After updating selected state calendar list should jump/scroll to the new selected date. Actually the same behaviour when pressing a date in the calendar.

Observed Behavior

Nothing happened! When debugging after updating selected state it will jump into render() but Agenda wont be updated...

Environment

• react-native-calendars@^1.22.0:
• [email protected]:

Also specify:

1. Phone/emulator/simulator & version:

• iPhone XR
• iPhone 7 (Simulator)

[lucamir]

I have the same problem.
I would like to link a day from another screen with a navigation param, and set the agenda selected props with that.
it works for the first render, but if i try again with another day the component don't re-render. Any solution?

[ricardoribas]

@lucamir @BigPun86 after debugging the library it seems that the selected is only consumed when the components renders for the first time. However, you can hack that selected value by adding a $ref to the component and update it yourself. However, there is a method inside the component that makes extra logic (scrolling to be more specific). I believe that this could be solved by making a PR to the component and adding that functionality. 🙏 But for sure the owners of the project will give us better insights than i do.

[manodupont]

Any progress on this ?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rdewolff]

Looking to use that feature too.

[JosephVasse]

Hi, currently stuck with the same problem : i'm updating the "selected day" but the Agenda doesn't re-render. Any new ideas ?
Thanks

[JosephVasse]

Ok, i managed to make it work.

As i'm kind of new to react native this solution might not be the best possible, but it seems to work.

Here it is :

in my Component i added a "key" prop. This prop's value is the "selectedDay" prop.
Each update in the "key" prop triggers an update of the component.

[raaannzzz]

Thanks, @JosephVasse this works for me as well

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.