React Native Swipe Calendar
A swipeable calendar component for React Native.
Fully native interactions powered by Reanimated 2 and React Native Gesture Handler.
Install
- Follow installation instructions for reanimated and react-native-gesture-handler
npm install
oryarn add
react-native-swipe-calendar
import Calendar from 'react-native-swipe-calendar'
Props
Name | Type | Description |
---|---|---|
selectedDate |
Date | null |
Calendar date to be marked as "selected". |
onDateSelect |
(date: Date) => void |
Callback invoked when the a date is selected. |
onMonthChange |
(date: Date) => void |
Callback invoked when the month is changed. |
currentDate |
Date |
Date to initialize the calendar with. |
theme |
Partial<typeof DEFAULT_THEME> |
Overrides for default fonts and colors. |
HeaderComponent |
HeaderComponentType |
Custom replacement for Header component. |
DayComponent |
DayComponentType |
Custom replacement for Day compoent. |
DayLabelComponent |
DayLabelComponentType |
Custom replacement for Day Label component ("Su", "Mo", etc). |
minDate |
Date |
The minimum date the calendar will display |
maxDate |
Date |
The maximum date the calendar will display |
pageInterpolator |
typeof defaultPageInterpolator |
A worklet to customize page transition animations. Returns an animated style |
animationConfig |
Partial<Animated.WithSpringConfig> |
An animation spring config object to customize how page transitions animate. |
simultaneousHandlers |
React.Ref<unknown>, React.Ref<unknown>[] |
Any RNGH handler refs that wrap the calendar. |
Imperative Api
Access the imperative api by passing a ref
to the Calendar
component:
Name | Type | Description |
---|---|---|
incrementMonth |
(options: ImperativeApiOptions) => void |
Go to next month. |
decrementMonth |
(options: ImperativeApiOptions) => void |
Go to previous month. |
setMonth |
(date: Date, options: ImperativeApiOptions) => void |
Go to given month. |
Hooks
If you render your own components via DayComponent
prop or other custom view, you may need access to more internal state than is available on props. This state may be accessed via the exported useCalendarContext()
hook.
NOTE: Be careful about performance! Lots of instances of
DayComponent
are rendered at any given time. You may need to wrap memoized inner wrappers around your custom components.
Custom pageInterpolator
The pageInterpolator
prop enables customization of page animations using a Reanimated "worklet" function. For example, the following pageInterpolator
will scale up upcoming months and fade in as they enter, then rotate and fade out as they leave:
Example
https://snack.expo.dev/@computerjazz/react-native-swipe-calendar