Google calendar
Description
A calendar component with bi-directional scrolling—both vertical and horizontal—designed to closely mimic the Google Calendar interface. Vertical scrolling keeps the day headers sticky at the top, while horizontal scrolling locks the hour labels in place, ensuring a smooth and intuitive scheduling experience.
This layout allows users to navigate large time grids effortlessly, making it ideal for calendar, planner, or scheduling apps.
The component was built live during this [🛑 live stream](https://www.youtube.com/watch?v=lc6y3UPnQo8).
Installation
bunx @animatereactnative/cli@latest add google-calendar
npx @animatereactnative/cli@latest add google-calendar
yarn @animatereactnative/cli@latest add google-calendar
pnpm dlx @animatereactnative/cli@latest add google-calendar
Dependencies
| Package | Version |
|---|---|
@shopify/flash-list | 2.0.2 |
dayjs | ^1.11.13 |
react-native-reanimated | ~4.1.0 |
To install these dependencies, you can use the following command:
bun add @shopify/flash-list@"2.0.2" dayjs@"^1.11.13" react-native-reanimated@"~4.1.0"
npm install @shopify/flash-list@"2.0.2" dayjs@"^1.11.13" react-native-reanimated@"~4.1.0"
yarn install @shopify/flash-list@"2.0.2" dayjs@"^1.11.13" react-native-reanimated@"~4.1.0"
pnpm install @shopify/flash-list@"2.0.2" dayjs@"^1.11.13" react-native-reanimated@"~4.1.0"