General questions

[nandorojo]

Hey this looks awesome! I came across it on a Reanimated issue (I believe about slow lists). I maintain Moti and a few other React Native libraries. I've also contributed to react-native-paper-dates.

The product I'm working on is very heavily calendar focused, so I'm intrigued by this library. I've only been using web so far, but I'm building my RN app for native, and I'm thinking of using this library to create a split Calendar/list view, similar to the iOS Calendar app.

Question: are you planning on adding callbacks for things like onMonthChanged, etc? I'd like to fetch data for a given month as the user swipes, and do other things like that. I'd also like to mark dates that have multiple events with docs, etc. Just wondering if that's something that's planned for the future (I know this is still new!)

Thanks for making this, excited to try it out.

[likern]

@nandorojo I have plans to provide animated values, which can be used to achieve your desired effect (call onMonthChanged).

This is how year / month interpolation is working, it just isn't exposed.
You could use in worklet

export type CalendarCurrentAnimatedMonthFromCommonEra = Animated.SharedValue<CalendarMonthFromCommonEra>;
export type CalendarCurrentAnimatedMonthInYear = Animated.SharedValue<number>;
export type CalendarStartMonthFromCommonEra = number;
export type CalendarEndMonthFromCommonEra = number;
export type CalendarAnimatedScrollProgress = Animated.SharedValue<number>;

to use in animations and interpolations.

To achieve onMonthChanged (it will not be implemented directly since it's quite limited) (not real code, draft idea / pseudocode)

'worklet'
const month = Math.round(CalendarCurrentAnimatedMonthInYear.value)
runOnJS(onMonthChanged)(month);

[nandorojo]

Would you be open to having that callback function on the component? It could make for a better DX to not have to pass a shared value and keep track of it. The component itself could just call the callback whenever it changes, maybe using a currentMonth derived value and useAnimatedReaction? If not, I suppose I can create a wrapper.

[likern]

Would you be open to having that callback function on the component? It could make for a better DX to not have to pass a shared value and keep track of it. The component itself could just call the callback whenever it changes, maybe using a currentMonth derived value and useAnimatedReaction? If not, I suppose I can create a wrapper.

The problem with that approach is that it is very limiting to what developer can achieve with it.
For example, what if developer wants to use onMonthChanged not only for integer number, but for something more granular, like for every tenth part of it. Or it wants to start animation at 70% of month passed (30% is visible for horizontal mode) (run something at 1.7, 2.7, 3.7, etc,. months).

I would prefer to provide some unified / general interface with maximum capabilities. The best way I can do is just to provide animated values. It can be changed, but for now I think it's the best approach.

[nandorojo]

Gotcha, thanks for letting me know.

[nandorojo]

@likern another question for you - do you expect this to work on web? I assume it will if it uses reanimated and RNGH, but figured I'd ask. I'm happy to help make this happen if needed. I haven't tried it on web yet but I will be soon.

[likern]

@nandorojo Good question 👍🏻

---

I expect and hope it will work on Web because I don't use native dependencies.
Update: I think that for implementing #33 I have to use https://github.com/react-native-masked-view/masked-view which is a native dependency.
react-native-reanimated and react-native-svg both claim supporting Web platform.

---

I personally haven't worked with react-native-web and probably will not in near future.
My application (main consumer of react-native-caledar) is targeting Android as a first-class citizen (it's tested on real mobile phone). react-native-calendar is also expected to work on iOS, but I don't have neither iOS nor iMac to test this (and upgrade example app).

---

I am going to support Web when I will add it's support to main application.

---

On the other hand supporting Web has major downsides (without having real app supporting Web)

1. UI is designed for mobile phones and it might require redesign / adjust for Web
2. react-native-calendar is heavily gesture-based (and touch-based), while Web is button-click based
3. Web feature-parity will lag behind iOS / Android releases
4. Web will block to use non-supported features and I have to use common denominator features
5. I expect a lot of inconsistenses

So technically yes, I can add support for Web but I think it's just not a worthwhile.
Given the fact that even only Android is barely working:

1. I still has performance issues
2. react-native-web has no active maintainer and contributions are stale
3. And lots and lots of bugs in React Native like this one

[nandorojo]

react-native-calendar is heavily gesture-based (and touch-based), while Web is button-click based

This seems like the main blocker, but all it would take is adding some arrows right? Which could work well on native anyway.

[nandorojo]

I'm open to trying this on web and contributing where I see necessary. Just want to make sure you're cool with that, and that you're open to web PRs/help, and that you plan on it being a full library. Appreciate it!

[likern]

react-native-calendar is heavily gesture-based (and touch-based), while Web is button-click based

This seems like the main blocker, but all it would take is adding some arrows right? Which could work well on native anyway.

I think yes. No blocker here.

[nandorojo]

I'll try to take a look in the next week and see what I find.

[likern]

I'm open to trying this on web and contributing where I see necessary. Just want to make sure you're cool with that, and that you're open to web PRs/help, and that you plan on it being a full library. Appreciate it!

Yes, I'm open on adding new platforms