@imksh/create 1.0.23 → 1.0.25

package/templates/react-native/README.md

@@ -1,159 +0,0 @@
-# 📱 Mobile App (React Native + Expo)
-
-This is the mobile application of the starter template, built entirely with **React Native** and **Expo**. It is designed to be a highly scalable boilerplate featuring a modern tech stack, a unified permissions system, and a robust custom UI component library.
-
-## ✨ Key Features
-
-- **Expo Router**: File-based routing that makes navigation predictable and deeply linkable.
-- **NativeWind (Tailwind CSS)**: Styling is powered by Tailwind CSS classes, complete with dynamic Light/Dark mode support.
-- **Custom UI Library**: Beautiful, highly-reusable components built from scratch (e.g., `Tabs`, `Button`, `Image`, `ScrollContainer`, `Input`) designed to work perfectly across both themes.
-- **Zustand State Management**: Lightweight and fast global state management, used to handle the user's auth session securely.
-- **Unified Permission Service**: A centralized handler for iOS and Android hardware permissions using `react-native-permissions`.
-- **Push Notification Pipeline**: Built-in support for generating Expo Push Tokens on physical devices and syncing them to your backend.
-
-## 🧩 Included UI Components
-
-The starter kit comes with a massive, completely customizable, and gesture-driven UI library built from scratch out of atomic elements.
-
-- **Layout**: `Container`, `Section`, `ScrollContainer`, `HStack`, `VStack`
-- **Buttons**: `Button` (with variants, sizes, and soft props), `IconButton`, `FloatingActionButton`
-- **Data Display**: `Avatar`, `Badge`, `Accordion`, `SwipeableRow`, `Card`
-- **Inputs**: `Input`, `Checkbox`, `Radio`, `Switch`, `Slider`, `SearchBar`
-- **Feedback & Loading**: `Spinner`, `ProgressBar`, `CircularProgress`, `Skeleton`, `GestureWrapper`
-- **Navigation**: `Tabs` (Underline & Button variants)
-- **Overlay & Modals**: `BottomModal` (Gesture-driven bottom sheet)
-
-## 🔌 Included Services
-
-Pre-configured service wrappers allow you to focus on logic rather than boilerplate:
-
-- **`auth.service.ts`**: Prebuilt Axios integrations for `sendOtp`, `signup`, `login`, `updateMe`, `logout`, and `savePushToken`.
-- **`permission.service.ts`**: A unified permissions handler exposing `requirePermission`, `openSettingsForApp`, and `registerForPushNotificationsAsync`.
-
----
-
-## 🛠 Tech Stack
-
-- **Framework**: Expo / React Native
-- **Styling**: NativeWind (Tailwind v3) & `react-native-reanimated`
-- **Routing**: `expo-router`
-- **State**: `zustand`
-- **Storage**: `@react-native-async-storage/async-storage`
-- **API**: `axios`
-
----
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-Make sure you have the following installed on your machine:
-
-- Node.js (v18+)
-- [EAS CLI](https://docs.expo.dev/build/setup/) (`npm install -g eas-cli`)
-- iOS Simulator (macOS only) or Android Emulator
-
-### Installation
-
-1. Navigate to the `mobile` directory:
-   ```bash
-   cd mobile
-   ```
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-3. Start the development server:
-   ```bash
-   npm run dev
-   ```
-4. Press `i` to open the app on an iOS Simulator, or `a` to open it on an Android Emulator.
-
----
-
-## 🏗 Project Structure
-
-```bash
-src/
-├── app/                  # Expo Router screens (e.g., _layout.tsx, login.tsx, (tabs)/)
-├── components/           # Reusable UI components
-│   ├── common/           # Generic components (Loading, etc.)
-│   └── ui/               # Custom UI library (Button, Tabs, Image, Input)
-├── constants/            # Theme tokens (Colors, Typography)
-├── services/             # API and business logic wrappers
-│   ├── auth.service.ts   # Axios API calls for authentication
-│   └── permission.service.ts # Unified hardware permission logic
-├── store/                # Zustand global stores (useAuthStore.ts)
-└── utils/                # Helper functions (storage.ts, api.ts)
-```
-
----
-
-## 📦 Build Instructions
-
-This template is configured for both cloud-based builds (via EAS) and fast local compilations using standard Gradle scripts.
-
-### Cloud Builds (Expo Application Services)
-
-If you don't have Android Studio or Xcode configured, you can build directly in the cloud:
-
-```bash
-# Build an Android APK (Uses the "preview" profile in eas.json)
-npm run build:eas:apk
-
-# Build an Android App Bundle (.aab) for the Play Store (Uses "production" profile)
-npm run build:eas:aab
-
-# Build an iOS app
-npm run build:ios
-```
-
-### Local Builds (Requires Android Studio/SDK)
-
-If you have your local SDK set up, you can compile extremely fast on your own machine:
-
-```bash
-# Compile a local .apk
-npm run build:apk
-
-# Compile a local .aab
-npm run build:aab
-```
-
-_(Note: Rebuilding natively is required whenever you add new npm packages containing native code, or modify the `app.json` plugins!)_
-
----
-
-## 🔒 Handling Permissions
-
-Rather than installing different disjointed `expo-*` libraries every time you need hardware access, this template centralizes all permission requests using the `PermissionService`.
-
-To check or request access:
-
-```typescript
-import { permissionService } from "@/services/permission.service";
-
-// Calling requirePermission() will automatically prompt the user if they haven't been asked yet
-const hasCameraAccess = await permissionService.requirePermission("camera");
-
-if (!hasCameraAccess) {
-  // Deep link the user to the OS settings if they permanently blocked the permission
-  permissionService.openSettingsForApp();
-}
-```
-
-## 🔔 Push Notifications
-
-To request push notifications, just call the utility function. It will automatically detect if it is running on a physical device, set up the required Android notification channels, fetch the token from Apple/Google, and return it:
-
-```typescript
-import { permissionService } from "@/services/permission.service";
-import { authService } from "@/services/auth.service";
-
-const token = await permissionService.registerForPushNotificationsAsync();
-
-// Send it to the backend!
-if (token) {
-  await authService.savePushToken(token);
-}
-```

package/templates/react-native/docs/README.md

@@ -1,17 +0,0 @@
-# Mobile App Documentation
-
-Welcome to the documentation for the Expo React Native Mobile App. This folder contains detailed information on how to use the app, navigate its architecture, and utilize the custom UI component library.
-
-## Table of Contents
-
-### Core
-- [Getting Started](./getting-started.md)
-
-### UI Component Library
-- [Buttons](./components/buttons.md)
-- [Data Display](./components/data-display.md) (e.g., SwipeableRow, Accordion, Avatar)
-- [Feedback](./components/feedback.md) (e.g., Progress, Spinners)
-- [Gestures & Touch](./components/gestures.md) (e.g., GestureWrapper)
-- [Inputs](./components/inputs.md) (e.g., TextInput, OTPInput, Switches)
-- [Layout](./components/layout.md) (e.g., Container, Divider, Grid)
-- [Navigation](./components/navigation.md) (e.g., Tabs, Pagination, ProgressStepper)

package/templates/react-native/docs/components/buttons.md

@@ -1,40 +0,0 @@
-# Button Components
-
-Buttons trigger actions. The custom UI library provides several highly polished button variations.
-
-## `Button`
-The primary button component for the application, supporting different variants (solid, outline, ghost), colors, and loading states.
-
-### Usage Example
-```tsx
-import { Button } from '@/components/ui/buttons/Button';
-
-export default function Actions() {
-  return (
-    <>
-      <Button 
-        title="Submit" 
-        onPress={() => console.log('Primary pressed')} 
-      />
-      <Button 
-        title="Cancel" 
-        variant="outline"
-        onPress={() => console.log('Outline pressed')} 
-      />
-      <Button 
-        title="Saving..." 
-        loading={true}
-      />
-    </>
-  );
-}
-```
-
-## `IconButton`
-A button that only contains an icon without text. Perfect for header buttons or tight layouts.
-
-## `FloatingActionButton` (FAB)
-A persistent button that hovers over the screen, typically placed in the bottom right corner. Ideal for primary creation actions like "Compose Message".
-
-## `ButtonGroup`
-A wrapper to seamlessly group multiple related buttons together horizontally.

package/templates/react-native/docs/components/data-display.md

@@ -1,44 +0,0 @@
-# Data Display Components
-
-These components are used to display data visually, such as lists, images, and accordions.
-
-## `SwipeableRow`
-A highly complex component that wraps list items, allowing them to be swiped left or right to reveal action buttons.
-
-### Usage Example
-```tsx
-import { SwipeableRow, SwipeAction } from '@/components/ui/data-display/SwipeableRow';
-import { MaterialIcons } from '@expo/vector-icons';
-
-export default function ItemList() {
-  const rightActions: SwipeAction[] = [
-    {
-      icon: <MaterialIcons name="archive" size={24} color="white" />,
-      backgroundColor: '#3B82F6', // Blue
-      onPress: () => console.log('Archived!'),
-    },
-    {
-      icon: <MaterialIcons name="delete" size={24} color="white" />,
-      backgroundColor: '#EF4444', // Red
-      onPress: () => console.log('Deleted!'),
-    },
-  ];
-
-  return (
-    <SwipeableRow rightActions={rightActions}>
-      <View className="p-4 bg-white dark:bg-gray-800">
-        <Text className="text-lg text-black dark:text-white">Swipe me left!</Text>
-      </View>
-    </SwipeableRow>
-  );
-}
-```
-
-## `Accordion`
-An expandable section to hide/show details.
-
-## `Avatar`
-Displays a user profile image or their initials if the image is missing.
-
-## `Badge`
-A small visual indicator, often used for unread counts or status indicators.

package/templates/react-native/docs/components/feedback.md

@@ -1,36 +0,0 @@
-# Feedback Components
-
-Components designed to provide visual or physical feedback to the user, including loading states and gesture wrappers.
-
-## `GestureWrapper`
-A powerful utility component that simplifies `react-native-gesture-handler`. It abstracts the boilerplate of the `GestureDetector` API.
-
-### Usage Example
-```tsx
-import { GestureWrapper } from '@/components/ui/feedback/GestureWrapper';
-import { View, Text } from 'react-native';
-
-export default function InteractiveCard() {
-  return (
-    <GestureWrapper
-      onTap={() => console.log("Card Tapped")}
-      onDoubleTap={() => console.log("Card Liked (Double Tap)")}
-      onSwipeLeft={() => console.log("Dismissed to the left")}
-      onPanUpdate={(e) => console.log(`Dragging at X: ${e.translationX}`)}
-    >
-      <View className="p-8 bg-blue-500 rounded-xl">
-        <Text className="text-white text-xl">Interact with me!</Text>
-      </View>
-    </GestureWrapper>
-  );
-}
-```
-
-## `CircularProgress` & `ProgressBar`
-Used to indicate loading progress or task completion.
-
-## `Skeleton`
-Used as a placeholder while data is loading.
-
-## `Spinner`
-An infinite spinning loading indicator.

package/templates/react-native/docs/components/gestures.md

@@ -1,60 +0,0 @@
-# Gesture Control Components
-
-Handling touch events and gestures natively in React Native can be complex, but this template provides highly abstracted, easy-to-use gesture wrappers powered by `react-native-gesture-handler` and `react-native-reanimated`.
-
-## `GestureWrapper`
-The most versatile component for gesture handling. It abstracts away the boilerplate of the `GestureDetector` API, allowing you to easily handle taps, double-taps, drags, and directional swipes.
-
-### Supported Events
-- **Taps**: `onTap`, `onDoubleTap`
-- **Directional Swipes**: `onSwipeLeft`, `onSwipeRight`, `onSwipeUp`, `onSwipeDown` (fires when a quick fling exceeds the velocity threshold).
-- **Pan / Dragging**: `onPanStart`, `onPanUpdate`, `onPanEnd` (provides the raw `translationX`/`translationY` event data).
-
-### Usage Example
-```tsx
-import { GestureWrapper } from '@/components/ui/feedback/GestureWrapper';
-import { View, Text } from 'react-native';
-
-export default function InteractiveCard() {
-  return (
-    <GestureWrapper
-      // Simple Taps
-      onTap={() => console.log("Card Tapped")}
-      onDoubleTap={() => console.log("Card Liked (Double Tap)")}
-      
-      // Swipes
-      onSwipeLeft={() => console.log("Dismissed to the left")}
-      onSwipeRight={() => console.log("Dismissed to the right")}
-      onSwipeUp={() => console.log("Swiped up")}
-      
-      // Continuous Dragging
-      onPanUpdate={(e) => console.log(`Dragging at X: ${e.translationX}`)}
-    >
-      <View className="p-8 bg-blue-500 rounded-xl">
-        <Text className="text-white text-xl">Interact with me!</Text>
-      </View>
-    </GestureWrapper>
-  );
-}
-```
-
-## `SwipeableRow` (Data Display)
-While `GestureWrapper` is great for generic components, if you need a classic "Swipe to reveal actions" row (commonly seen in lists or emails), use the `SwipeableRow` component.
-
-### Usage Example
-```tsx
-import { SwipeableRow, SwipeAction } from '@/components/ui/data-display/SwipeableRow';
-
-// Define the actions revealed when swiping
-const rightActions: SwipeAction[] = [
-  {
-    icon: <Icon name="delete" />,
-    backgroundColor: '#EF4444',
-    onPress: () => console.log('Delete tapped'),
-  },
-];
-
-<SwipeableRow rightActions={rightActions}>
-  <ListItem content="Swipe me!" />
-</SwipeableRow>
-```

package/templates/react-native/docs/components/inputs.md

@@ -1,41 +0,0 @@
-# Input Components
-
-Inputs are used to collect data from the user. They are highly styled, accessible, and integrate cleanly with form libraries like React Hook Form.
-
-## `Input` (Text Input)
-The core text input component.
-
-### Usage Example
-```tsx
-import { Input } from '@/components/ui/inputs/Input';
-import { useState } from 'react';
-
-export default function Form() {
-  const [email, setEmail] = useState('');
-
-  return (
-    <Input
-      label="Email Address"
-      placeholder="Enter your email"
-      value={email}
-      onChangeText={setEmail}
-      error={email.includes('@') ? '' : 'Invalid email'}
-    />
-  );
-}
-```
-
-## `OTPInput`
-A component optimized for handling multi-digit verification codes.
-- Usage: `<OTPInput length={6} onComplete={(code) => console.log(code)} />`
-
-## `PasswordInput`
-An extension of the `Input` component that includes a toggle to show/hide the password text.
-
-## Other Inputs
-- `Checkbox`: Boolean selection.
-- `Radio`: Select one from a list.
-- `Switch`: A modern iOS/Android style toggle.
-- `Slider`: Choose a numeric value on a track.
-- `SearchBar`: A specialized text input for searching with a clear button.
-- `TextArea`: A multiline text input.

package/templates/react-native/docs/components/layout.md

@@ -1,34 +0,0 @@
-# Layout Components
-
-Layout components provide the foundational structure of the application screens, ensuring consistent padding, spacing, and structural organization.
-
-## `Container`
-Wraps main content to ensure consistent margins across all screens.
-
-## `ScrollContainer`
-Similar to `Container`, but uses a `ScrollView`. Essential for screens whose content exceeds the device height.
-
-## `KeyboardAvoidingViewWrapper`
-An extremely helpful utility that wraps the screen and automatically adjusts the layout padding when the virtual keyboard appears, preventing inputs from being hidden by the keyboard.
-
-### Usage Example
-```tsx
-import { KeyboardAvoidingViewWrapper } from '@/components/ui/layout/KeyboardAvoidingViewWrapper';
-import { Input } from '@/components/ui/inputs/Input';
-
-export default function LoginScreen() {
-  return (
-    <KeyboardAvoidingViewWrapper>
-      {/* Content won't be blocked by the keyboard here! */}
-      <Input placeholder="Username" />
-      <Input placeholder="Password" />
-    </KeyboardAvoidingViewWrapper>
-  );
-}
-```
-
-## `Divider`
-A simple horizontal or vertical line to separate content sections visually.
-
-## `Grid` & `Stack`
-Utility components for quickly aligning children items using flexbox properties, saving you from writing repetitive nativewind classes.

package/templates/react-native/docs/components/navigation.md

@@ -1,31 +0,0 @@
-# Navigation Components
-
-These components are used to guide the user between different views or show their current position within a multi-step process.
-
-## `Tabs`
-A highly complex, customizable top tab bar component, typically used for switching views horizontally (e.g., inside a profile or feed).
-
-### Usage Example
-```tsx
-import { Tabs } from '@/components/ui/navigation/Tabs';
-import { useState } from 'react';
-
-export default function Profile() {
-  const [activeTab, setActiveTab] = useState(0);
-  const tabs = ["Posts", "Followers", "Following"];
-
-  return (
-    <Tabs 
-      tabs={tabs} 
-      activeIndex={activeTab} 
-      onChange={setActiveTab} 
-    />
-  );
-}
-```
-
-## `ProgressStepper`
-Used for multi-step wizards, such as an onboarding flow or a multi-page checkout, clearly displaying the completed, current, and upcoming steps.
-
-## `Pagination`
-Displays a series of dots to indicate the current page in a carousel or swipeable view.

package/templates/react-native/docs/features.md

@@ -1,85 +0,0 @@
-# 🌟 Starter Kit Features
-
-This starter kit is packed with a robust set of features, prebuilt components, and essential services designed to eliminate setup time so you can focus entirely on building your product.
-
----
-
-## 🧩 UI Components
-
-Our custom UI library is built entirely from atomic elements, fully typed, beautifully styled with NativeWind, and ready for gesture-driven interactions.
-
-### 📐 Layout
-- **`Container`**: A responsive wrapper for consistent screen margins.
-- **`Section`**: A structured block for grouping related components with headers.
-- **`ScrollContainer`**: An optimized scrolling view that natively handles keyboard avoidance and safe area insets.
-- **`HStack` / `VStack`**: Flexbox utility components for rapid horizontal and vertical alignment.
-
-### 🔘 Buttons
-- **`Button`**: The core interactive element supporting multiple variants (`primary`, `secondary`, `accent`, `outline`, `ghost`), sizing (`sm`, `md`, `lg`), and a dynamic `soft` prop for pale translucent styling.
-- **`IconButton`**: Icon-only circular buttons for compact interactions.
-- **`FloatingActionButton`**: A prominent, elevated CTA button, typically anchored at the bottom of the screen.
-
-### 📊 Data Display
-- **`Avatar`**: Display user profile images with automatic fallbacks and size variants.
-- **`Badge`**: Small status indicators supporting all semantic theme colors and the `soft` prop.
-- **`Accordion`**: Collapsible vertical panels for FAQs or dense information.
-- **`Card`**: Elevated, rounded containers for grouping information.
-- **`SwipeableRow`**: Natively gesture-driven list items that reveal hidden actions (e.g., delete, archive) upon swiping left or right.
-
-### 📝 Inputs & Controls
-- **`Input`**: A highly styled text input supporting left/right icons, error states, and secure text entry.
-- **`SearchBar`**: A dedicated input variant tailored for real-time search filtering.
-- **`Switch`**: A native-feeling toggle switch for boolean states.
-- **`Checkbox` & `Radio`**: Accessible selection controls for forms and settings.
-- **`Slider`**: A continuous drag slider for numeric value selection.
-
-### ⏳ Feedback & Loading
-- **`Spinner`**: A minimal, rotating activity indicator.
-- **`ProgressBar`**: A linear progress bar for uploading/downloading tasks.
-- **`CircularProgress`**: An SVG-based circular indicator for data syncing or completion rates.
-- **`Skeleton`**: Animated placeholder blocks for loading states before data is fetched.
-- **`GestureWrapper`**: A powerful higher-order component that wraps any view to easily handle double-taps, long-presses, and directional swipes using `react-native-reanimated`.
-
-### 🧭 Navigation & Overlays
-- **`Tabs`**: Clean, customizable local tab navigation (supports `underline` and `button` pill styles).
-- **`BottomModal`**: A gesture-driven, highly responsive bottom sheet that slides up and can be dismissed interactively via drag gestures.
-
----
-
-## 🔌 Core Services
-
-Pre-configured, strongly-typed service wrappers handle complex background logic so you don't have to write boilerplate.
-
-### 🔐 Authentication (`auth.service.ts`)
-Fully integrated Axios endpoints for standard auth flows:
-- `sendOtp`: Dispatch sign-up verification codes.
-- `signup`: Register a new user with OTP verification.
-- `login`: Authenticate existing users.
-- `updateMe`: Sync profile updates to the backend.
-- `logout`: Clear session data securely.
-- `savePushToken`: Send device push tokens to the server.
-
-### 📱 Hardware Permissions (`permission.service.ts`)
-A centralized, cross-platform handler that abstracts away iOS/Android permission complexity:
-- `requirePermission`: Request camera, location, photo library, or microphone access gracefully.
-- `openSettingsForApp`: Deep-link users to system settings if they previously blocked a permission.
-- `registerForPushNotificationsAsync`: Automatically negotiate with Apple APNs / Firebase FCM, configure local Android channels, and return the Expo Push Token.
-
----
-
-## 🏗 System Architecture
-
-### 🚀 Tech Stack
-- **Framework**: Expo / React Native
-- **Styling**: NativeWind (Tailwind v3) & `react-native-reanimated`
-- **Routing**: `expo-router`
-- **Global State**: `zustand`
-- **Storage**: `@react-native-async-storage/async-storage`
-- **API**: `axios`
-
-### 🎨 Theming
-- **Dynamic Light/Dark Mode**: The entire UI responds instantly to the system appearance.
-- **Semantic Colors**: Colors are defined centrally (e.g., `primary`, `base100`, `error`) via CSS variables, making global restyling effortless.
-
-### ⚡ Build Pipeline
-- Pre-configured `eas.json` and local `npm` scripts to instantly compile Cloud or Local `.apk`, `.aab`, and `.ipa` artifacts.

package/templates/react-native/docs/getting-started.md

@@ -1,47 +0,0 @@
-# Getting Started
-
-This mobile app is built on **Expo Router**, **NativeWind**, and **Zustand**. 
-
-## App Architecture
-
-- **`src/app/`**: This is the routing directory. Expo Router uses file-based routing similar to Next.js.
-  - `_layout.tsx`: The root wrapper. This is where providers (`GestureHandlerRootView`, `PaperProvider`, `StatusBar`) are initialized.
-  - `(tabs)/`: A route group that shares a bottom tab bar layout.
-  - `login.tsx`: The login screen route.
-- **`src/components/`**: Reusable React components. The `ui/` folder contains our custom design system.
-- **`src/store/`**: Global state management using `Zustand`. `useAuthStore.ts` handles the authentication lifecycle.
-- **`src/services/`**: Abstracts API calls and device native capabilities (e.g., `permission.service.ts` for unified hardware permissions).
-
-## Managing Theme
-
-The app uses **NativeWind** to handle styling. 
-By default, the theme is bound to the device OS theme, but it can be overridden and saved using `AsyncStorage`.
-
-```tsx
-import { useColorScheme } from 'nativewind';
-
-export default function MyComponent() {
-  const { colorScheme, toggleColorScheme } = useColorScheme();
-  
-  return (
-    <View className="bg-white dark:bg-gray-900">
-      <Text className="text-black dark:text-white">Current theme: {colorScheme}</Text>
-    </View>
-  );
-}
-```
-
-## Hardware Permissions
-
-Never install a separate `expo-*` permission library manually. Use the `PermissionService`:
-
-```typescript
-import { permissionService } from '@/services/permission.service';
-
-const requestCamera = async () => {
-  const granted = await permissionService.requirePermission('camera');
-  if (granted) {
-    console.log('Camera ready!');
-  }
-}
-```

package/templates/react-native/src/components/common/HomeHeader.tsx

@@ -1,43 +0,0 @@
-import { View, TouchableOpacity, Pressable } from "react-native";
-import React, { useState } from "react";
-import { Txt } from "./Typography";
-import { useColorScheme } from "nativewind";
-import { Colors } from "../../constants/Colors";
-import { Ionicons } from "@expo/vector-icons";
-import Sidebar from "../ui/Sidebar";
-
-export default function HomeHeader({
-  title,
-  icon,
-  fun,
-}: {
-  title?: string;
-  icon?: keyof typeof Ionicons.glyphMap;
-  fun?: () => void;
-}) {
-  const { colorScheme } = useColorScheme();
-  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(false);
-  const colors = Colors[colorScheme ?? "light"];
-  return (
-    <>
-      <View
-        className="h-28 pb-4 px-6 flex-row items-end justify-between border-b border-base-300 w-full"
-        style={{
-          backgroundColor: colors.base200,
-          // elevation: 1,
-        }}
-      >
-        <Pressable onPress={() => setIsSidebarOpen(true)}>
-          <Txt variant="xl" className="text-primary font-bold">
-            {title}
-          </Txt>
-        </Pressable>
-        <TouchableOpacity onPress={fun}>
-          <Ionicons name={icon} color={colors.baseContent} size={28} />
-        </TouchableOpacity>
-      </View>
-
-      <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
-    </>
-  );
-}

package/templates/react-native/src/components/settings/SettingToggle.tsx

@@ -1,26 +0,0 @@
-import { View, Switch } from "react-native";
-import { Txt } from "../common/Typography";
-import { Ionicons } from "@expo/vector-icons";
-
-export default function SettingToggle({ check, fun, icon, name }) {
-  return (
-    <View className="flex-row justify-between items-center my-4">
-      <View className="flex-row justify-center items-center">
-        <View className="p-4 bg-blue-600 rounded-2xl mr-5 justify-center items-center">
-          <Ionicons name={icon} size={18} color="#fff" />
-        </View>
-        <Txt variant="mid">{name}</Txt>
-      </View>
-      <Switch
-        trackColor={{ false: "#767577", true: "#81b0ff" }}
-        thumbColor={check ? "#2196F3" : "#f4f3f4"}
-        ios_backgroundColor="#3e3e3e"
-        onValueChange={fun}
-        value={check}
-        style={{
-          transform: [{ scaleX: 1.5 }, { scaleY: 1.5 }],
-        }}
-      />
-    </View>
-  );
-}