@symbiot.dev/react-native-swipeday v1.0.0

react-native-swipeday is a horizontally swipeable React Native component that displays individual days. It enables smooth left and right swiping to navigate between days, making it ideal for daily planners, calendars, habit trackers, and similar apps. Unlike a timeline, each slide focuses on a single full day, giving you complete control over the day's content. The component is built with full support for iOS, Android, Web, Expo, and Expo Go, making it highly versatile and easy to integrate across platforms.

📱 Demo

✨ Key Features

📅 Swipeable Day View – Navigate horizontally through days with optional snapping.
👥 Group-Based Layout – Organize your day view by teams, rooms, users, etc.
🎨 Custom Renderers – Inject your own headers, day content, or group layout via render props.
📱 Cross-Platform Support – Works seamlessly across:

• iOS & Android
• Web via React Native Web
• Expo & Expo Go

🧠 Minimal & Extensible – Lightweight core with deep customization hooks.
🚀 Performance Friendly – Virtualized scrolling and render control for optimal responsiveness.

🧠 Ideal For

• 👥 Employee shift planners
• 🛎️ Booking views by room, therapist, stylist, etc.
• 📆 Grouped daily timelines
• 🧑‍🏫 Class schedules split by instructor or location
• 📦 Delivery or service assignments by region
• 🛠 Field service or technician dispatch views
• 🧭 Any multi-entity day-based scheduling need

📦 Installation

npm install @symbiot.dev/react-native-swipeday date-fns react-native-reanimated react-native-gesture-handler
# or
yarn add @symbiot.dev/react-native-swipeday date-fns react-native-reanimated react-native-gesture-handler

# for web support
npm i react-native-web
# or
yarn add react-native-web

import { SwipeDay } from '@symbiot.dev/react-native-swipeday';

// ... and voilà 💫
<SwipeDay />

🎨 SwipeDayThemeProps – Theming & Appearance

You can customize the look and feel of SwipeDay using the theme prop. It supports both global styles and scheme-based overrides for 'light' and 'dark' modes.

🧩 Structure

The SwipeDayThemeProps type supports three layers:

1. Global Styling (applies to all schemes unless overridden)
2. Per-scheme Overrides – Use light and dark keys to define specific values
3. Theme Scheme Selector – Control active theme using scheme

type SwipeDayThemeProps = SwipeDayStyle & {
  scheme?: 'light' | 'dark';
  light?: SwipeDayStyle;
  dark?: SwipeDayStyle;
};

🧱 Available Styling Props

<SwipeDay
  //...
  theme={{
    backgroundColor: '#f0f0f0', // for light and dark mode
  }}
/>

// ----

<SwipeDay
  //...
  theme={{
    backgroundColor: '#f0f0f0', // only applies to light mode
    dark: {
      backgroundColor: '#020202',
    },
  }}
/>

📐 SwipeDayDimensionsProps – Layout & Dimensions

Control the physical dimensions of key areas inside the SwipeDay. All values are in pixels and optional — sensible defaults are provided.

🧱 Available Dimension Props

<SwipeDay
  //...
  width={300}
/>;

📅 SwipeDayDatetimeProps – Date & Time Configuration

Set the visible time range, number of days, start date, and other calendar-related behaviors.
These props give you precise control over how the SwipeDay renders days and time slots.

🧱 Available Datetime Props

<SwipeDay
  //...
  weekStartsOn={1} // starts on Monday
  numberOfDays={3}
  hiddenDays={[0, 6]} // exclude weekends (Sun,Sut)
/>;

🎮 SwipeDayControllerProps – Interaction & Display Toggles

Control user interaction features like swiping, snapping, and visibility of UI components like the headers.

🧱 Available Controller Props

<SwipeDay
  //...
  swipeable // swipe actions turned on
  scrollable // user can scroll
  snappable // date/group snapping enabled
/>

🔧 SwipeDayScrollProps – Scroll and Refresh Control

These types control the scroll and refresh behavior for day-based components, allowing flexible configuration either globally, per group, or per specific date.

🔍 SwipeDayScrollProp

Defines the scroll or refresh state and can be one of the following:

• boolean — enable or disable scrolling/refreshing globally.
• Record<string, boolean> — keyed by group IDs to enable or disable per group.
• Array<{ groupId: string; date: string; value: boolean }> — fine-grained control by group and date.

🧱 SwipeDayScrollProps

Props that manage scroll and refresh capabilities:

📦 Example Usage

<SwipeDay
  //...
  scrollable // enable scroll for all days
/>

📦 SwipeGayGroupProps – Groups

Configure how groups are handled in the SwipeGay component.

🧱 Available Props

Example Usage

const groups = [
  { id: 1, name: 'Group A' },
  { id: 2, name: 'Group B' },
];

<SwipeGayComponent
  //...
  numberOfGroups={2}
  groups={groups}
/>

⏱ SwipeDayFormatterProps – Text Formatting

Customize how dates and times appear within the SwipeDay component using format strings (e.g., dd, HH:mm, EEE).
These follow date-fns formatting syntax.

🧱 Available Formatter Props

import { zhCN } from 'date-fns/locale/zh-CN';

<SwipeDay
  //...
  locale={zhCN} // Chinese localization
/>;

🧭 SwipeDayActionsProps – User Interaction Callbacks

Callbacks to handle user interactions within a swipeable day grid, such as taps, long presses, header presses, and data refreshes.

🧱 Available Action Callbacks

import { useState } from 'react';

//...
const [selectedDate, setSelectedDate] = useState(new Date());

<SwipeDay
  //...
  onChangeDate={setSelectedDate} // Update selected date on swipe or tap
  onRefresh={({ date }) => console.log('Refreshing data for:', date)}
  onGroupHeaderPress={({ groupId }) => console.log('Group pressed:', groupId)}
  onDayLongPress={({ date }) => console.log('Long pressed:', date)}
/>

🔧 SwipeDayRef – Imperative Control API

Control and interact with the SwipeDay instance programmatically using a React ref.
Great for custom toolbars, buttons, or dynamic navigation.

🧱 Available Ref Methods

import { useRef } from 'react';
import { SwipeDay, SwipeDayRef } from '@symbiot.dev/react-native-swipeday';

const swipeDayRef = useRef<SwipeDayRef>(null);

<SwipeDay
  //...
  ref={swipeDayRef}
/>

//...
<Pressable onPress={() => swipeDayRef.current?.forward()}>{/*...*/}</Pressable>

🌐 Platform Support

• ✅ iOS
• ✅ Android
• ✅ Web
• ✅ Expo & Expo Go

📦 Bundle Size

Lightweight and fast — see actual size on Bundlephobia.

💬 Contributing

Contributions welcome! Feel free to open issues, discussions, or suggestions.

🌟 Who's Using This?

Using react-native-swipeday in your app or product?
Feel free to share your project — it might be featured in this section!

✉️ Open pull request, or reach out directly to get included.

🚀 Got Ideas or Gaps to Fill?

Know of existing libraries or functionality that could be improved?
Have an idea for something completely new?

Symbiot is ready to take on the challenge — feedback, feature requests, or collaboration ideas are always welcome!

🧠 Let’s build better tools together. Start the conversation or contact via email.

🧾 License

MIT — Made with ❤️ by Symbiot