🌙 react-native-sleep-awake-circle

A customizable React Native component for visualizing and adjusting sleep/wake schedules in a circular clock-like UI. ⏰

✨ Features

• 🎯 Interactive circular slider for sleep and awake times
• 📱 Built with react-native-reanimated & gesture-handler
• 👆 Drag to adjust both ends (sleep & wake)
• 🔄 Rotate the entire sleep segment by pressing the arc
• 🎨 Fully customizable icons, labels, and styles

📋 Requirements

| Package 📦 | Install with npm 🟢 | Install with yarn 🧶 | |--------------------------------|-------------------------------------------|--------------------------------------------| | react-native-svg | npm install react-native-svg | yarn add react-native-svg | | react-native-reanimated | npm install react-native-reanimated | yarn add react-native-reanimated | | react-native-gesture-handler | npm install react-native-gesture-handler| yarn add react-native-gesture-handler |

🚀 Installation

| Command type 💻 | Install command 📥 | |--------------|------------------------------------------------| | npm 🟢 | npm install react-native-sleep-awake-circle | | yarn 🧶 | yarn add react-native-sleep-awake-circle |

🛠️ Usage

import React from "react";
import { View } from "react-native";
import SleepAwakeSchedulingCircle from "react-native-sleep-awake-circle";

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <SleepAwakeSchedulingCircle
        onChange={(sleepTime, awakeTime) => console.log("Sleep and awake Time:", sleep, awake)}
      />
    </View>
  );
}

⚙️ Props Configuration

| Prop 🏷️ | Type 📝 | Default 🎯 | Description 📋 | |------------------|--------------------------- |-------------|---------------------------------------- | | onChange | (sleepT, awakeT) => void | undefined | Callback when sleep/awake values change | | sleepIcon | ReactNode | undefined | Custom icon for the sleep handle 🌙 | | wakeIcon | ReactNode | undefined | Custom icon for the wake handle ☀️ | | labelStyle | object | {} | Style override for labels 🎨 | | containerStyle | object | {} | Style override for the container 📦 |

📄 License

MIT 📜 - Mare te pehla koi aaya hoga
Mare te baad koi aao chahe
Lekin yo waqt mhara hai aur Bhagwan kasam chhikha kadwa ke jaavange kehnde-kuvandya ki
Yaad rahvega is zamane ne ke koe aaya tha aur kohram, macha ke gaya hai" 🎭