clox-view-switcher 0.1.1

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["apple", "android"],
+  "apple": {
+    "modules": ["CloxViewSwitcherModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.cloxviewswitcher.CloxViewSwitcherModule"]
+  }
+}

package/ios/AppSwitcherView.swift

@@ -0,0 +1,283 @@
+//
+//  AppSwitcherView.swift
+//  CloxViewSwitcher
+//
+//  Based on swiftui-app-switcher by Marcus Crafter
+//
+
+import SwiftUI
+
+/// Model representing an item in the switcher
+struct SwitcherItem: Identifiable {
+    var id: String
+    var title: String
+    var imageURL: String
+    var iconURL: String
+}
+
+/// Container view that handles gestures and renders the switcher
+struct AppSwitcherContainerView: View {
+    let items: [SwitcherItem]
+    let springResponse: Double
+    let springDamping: Double
+    let scrollSpeed: Double
+    let cardBackgroundColor: String
+    let cardBorderRadius: Double
+    let titleFontColor: String
+    let titleFontSize: Double
+    let titleFontWeight: String
+    let onItemPress: (String) -> Void
+    let onCardChange: (String) -> Void
+    
+    // Use @State instead of @GestureState to prevent automatic reset causing snap-back
+    @State private var activeDragX: CGFloat = 0
+    @State private var committedDragX: CGFloat = 0
+    @State private var isDragging: Bool = false
+    
+    // Direct visual offset for rubber band (bypasses exponential curveX)
+    @State private var rubberBandOffset: CGFloat = 0
+    
+    // Track the currently visible card to fire onCardChange
+    @State private var lastVisibleCardId: String? = nil
+    
+    // Total drag position (clamped to bounds - rubber band is separate)
+    private var dragX: CGFloat {
+        activeDragX + committedDragX
+    }
+    
+    // Bounds for drag
+    // maxDragX: how far right you can scroll (to see the last card)
+    // minDragX: how far left you can scroll (when first card is pushed left)
+    private var maxDragX: CGFloat { CGFloat(max(items.count - 1, 0)) * 50 + 20 }
+    private var minDragX: CGFloat { -50 }  // Trigger rubber band early - don't let first card go too far left
+    
+    // Rubber band settings - VISUAL pixels (not dragX), applied directly
+    private let rubberBandMultiplier: CGFloat = 0.4  // Resistance factor
+    private let maxVisualOvershoot: CGFloat = 40     // Max visual movement in pixels
+    
+    // Constants for offset calculation (must match AppSwitcherView)
+    private let openingPanOffset: CGFloat = 200
+    private let openingAlignmentOffset: CGFloat = 80
+    private let appViewSpacing: CGFloat = 50
+    private let minStackingPerCard: CGFloat = 15
+    private let curveDampingFactor: CGFloat = 20
+    
+    private func curveX(_ inputX: CGFloat) -> CGFloat {
+        pow(1.8, inputX / curveDampingFactor)
+    }
+    
+    private func card0BaseOffset() -> CGFloat {
+        curveX(dragX + openingPanOffset - appViewSpacing) - openingAlignmentOffset
+    }
+    
+    private func rawOffset(for index: Int) -> CGFloat {
+        curveX(dragX + openingPanOffset - CGFloat(index + 1) * appViewSpacing) - openingAlignmentOffset
+    }
+    
+    private func offset(for index: Int) -> CGFloat {
+        let baseOffset = rawOffset(for: index)
+        if index == 0 { return baseOffset }
+        let card0Pos = card0BaseOffset()
+        let stackingFloor = card0Pos - CGFloat(index) * minStackingPerCard
+        return min(baseOffset, stackingFloor)
+    }
+    
+    /// Find the currently visible card (the one with title showing)
+    private var visibleCardId: String? {
+        for index in items.indices {
+            let currentOffset = offset(for: index)
+            if currentOffset > -50 && currentOffset < 180 {
+                return items[index].id
+            }
+        }
+        return items.first?.id
+    }
+    
+    var body: some View {
+        ZStack {
+            Color.clear
+            
+            AppSwitcherView(
+                items: items,
+                dragX: dragX,
+                cardBackgroundColor: cardBackgroundColor,
+                cardBorderRadius: cardBorderRadius,
+                titleFontColor: titleFontColor,
+                titleFontSize: titleFontSize,
+                titleFontWeight: titleFontWeight,
+                onItemPress: { id in
+                    if !isDragging {
+                        onItemPress(id)
+                    }
+                }
+            )
+            .offset(x: rubberBandOffset)  // Apply rubber band as direct visual offset
+        }
+        .contentShape(Rectangle())
+        .gesture(
+            DragGesture(minimumDistance: 5)
+                .onChanged { value in
+                    isDragging = true
+                    // Apply scroll speed multiplier to translation
+                    let scaledTranslation = value.translation.width * CGFloat(scrollSpeed)
+                    let proposedTotal = committedDragX + scaledTranslation
+                    
+                    // Clamp dragX to bounds, calculate overshoot for rubber band
+                    if proposedTotal > maxDragX {
+                        // Past right bound - clamp dragX, apply visual rubber band
+                        activeDragX = maxDragX - committedDragX
+                        let overshoot = proposedTotal - maxDragX
+                        rubberBandOffset = min(overshoot * rubberBandMultiplier, maxVisualOvershoot)
+                        print("[DRAG] RIGHT RUBBER - overshoot: \(overshoot), visualOffset: \(rubberBandOffset)")
+                    } else if proposedTotal < minDragX {
+                        // Past left bound - clamp dragX, apply visual rubber band (negative)
+                        activeDragX = minDragX - committedDragX
+                        let overshoot = minDragX - proposedTotal
+                        rubberBandOffset = -min(overshoot * rubberBandMultiplier, maxVisualOvershoot)
+                        print("[DRAG] LEFT RUBBER - overshoot: \(overshoot), visualOffset: \(rubberBandOffset)")
+                    } else {
+                        // Within bounds - normal drag, no rubber band
+                        activeDragX = scaledTranslation
+                        rubberBandOffset = 0
+                    }
+                    
+                    print("[DRAG] translation: \(value.translation.width), dragX: \(dragX), rubberBandOffset: \(rubberBandOffset)")
+                }
+                .onEnded { value in
+                    // Calculate momentum from velocity
+                    let momentum = value.predictedEndTranslation.width - value.translation.width
+                    
+                    // Current clamped position
+                    let currentPosition = committedDragX + activeDragX
+                    
+                    print("[END] currentPosition: \(currentPosition), rubberBandOffset: \(rubberBandOffset)")
+                    print("[END] momentum: \(momentum)")
+                    
+                    // Commit to current position
+                    committedDragX = currentPosition
+                    activeDragX = 0
+                    
+                    // Animate rubber band back to zero (bounce back)
+                    withAnimation(.spring(response: springResponse, dampingFraction: springDamping)) {
+                        rubberBandOffset = 0
+                    }
+                    
+                    // If we were within bounds, apply momentum
+                    if rubberBandOffset == 0 {
+                        let targetWithMomentum = currentPosition + momentum * 0.5
+                        let finalPosition = max(minDragX, min(maxDragX, targetWithMomentum))
+                        
+                        print("[END] targetWithMomentum: \(targetWithMomentum), finalPosition: \(finalPosition)")
+                        
+                        withAnimation(.spring(response: springResponse, dampingFraction: springDamping)) {
+                            committedDragX = finalPosition
+                        }
+                    }
+                    
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
+                        isDragging = false
+                    }
+                }
+        )
+        .onChange(of: visibleCardId) { newValue in
+            if let id = newValue, id != lastVisibleCardId {
+                lastVisibleCardId = id
+                onCardChange(id)
+            }
+        }
+        .onAppear {
+            // Fire initial card change on appear
+            if let id = visibleCardId {
+                lastVisibleCardId = id
+                onCardChange(id)
+            }
+        }
+    }
+}
+
+/// The app switcher view showing overlapping app cards
+struct AppSwitcherView: View {
+    let items: [SwitcherItem]
+    var dragX: CGFloat
+    let cardBackgroundColor: String
+    let cardBorderRadius: Double
+    let titleFontColor: String
+    let titleFontSize: Double
+    let titleFontWeight: String
+    let onItemPress: (String) -> Void
+    
+    var body: some View {
+        ZStack {
+            ForEach(items.indices.reversed(), id: \.self) { index in
+                AppCardView(
+                    item: items[index],
+                    titleOpacity: titleOpacity(for: index),
+                    backgroundColor: cardBackgroundColor,
+                    borderRadius: cardBorderRadius,
+                    titleFontColor: titleFontColor,
+                    titleFontSize: titleFontSize,
+                    titleFontWeight: titleFontWeight,
+                    onPress: { onItemPress(items[index].id) }
+                )
+                .offset(x: offset(for: index))
+                .scaleEffect(scale(for: index))
+            }
+        }
+    }
+    
+    private let openingPanOffset: CGFloat = 200
+    private let openingAlignmentOffset: CGFloat = 80
+    private let appViewSpacing: CGFloat = 50
+    private let minStackingPerCard: CGFloat = 15 // Minimum pixels between stacked cards
+    
+    /// Calculate offset for card 0 (used as reference for stacking)
+    private func card0BaseOffset() -> CGFloat {
+        curveX(dragX + openingPanOffset - appViewSpacing) - openingAlignmentOffset
+    }
+    
+    /// Calculate raw curved offset without stacking adjustment
+    private func rawOffset(for index: Int) -> CGFloat {
+        curveX(dragX + openingPanOffset - CGFloat(index + 1) * appViewSpacing) - openingAlignmentOffset
+    }
+    
+    private func offset(for index: Int) -> CGFloat {
+        let baseOffset = rawOffset(for: index)
+        
+        // Card 0 uses its natural offset
+        if index == 0 {
+            return baseOffset
+        }
+        
+        // For other cards: ensure minimum stacking relative to card 0
+        // This prevents all cards from converging to the same position when dragged left
+        let card0Pos = card0BaseOffset()
+        let stackingFloor = card0Pos - CGFloat(index) * minStackingPerCard
+        
+        // Use the more-left position (min) to ensure stacking is maintained
+        return min(baseOffset, stackingFloor)
+    }
+    
+    private let scaleBandingFactor: CGFloat = 2000
+    
+    private func scale(for index: Int) -> CGFloat {
+        let cardOffset = offset(for: index)
+        if cardOffset > 0 {
+            return 1
+        }
+        return max(0.94, (1 - abs(cardOffset) / scaleBandingFactor))
+    }
+    
+    private func titleOpacity(for index: Int) -> Double {
+        let currentOffset = offset(for: index)
+        if currentOffset > -50 && currentOffset < 180 {
+            return 1
+        }
+        return 0
+    }
+    
+    private let curveDampingFactor: CGFloat = 20
+    
+    private func curveX(_ inputX: CGFloat) -> CGFloat {
+        pow(1.8, inputX / curveDampingFactor)
+    }
+}

package/ios/AppView.swift

@@ -0,0 +1,98 @@
+//
+//  AppView.swift
+//  CloxViewSwitcher
+//
+//  Based on swiftui-app-switcher by Marcus Crafter
+//
+
+import SwiftUI
+
+/// View representing an app card in the switcher
+struct AppCardView: View {
+    let item: SwitcherItem
+    var titleOpacity: Double
+    var backgroundColor: String
+    var borderRadius: Double
+    var titleFontColor: String
+    var titleFontSize: Double
+    var titleFontWeight: String
+    let onPress: () -> Void
+    
+    /// Convert hex string to Color
+    private func colorFromHex(_ hex: String) -> Color {
+        var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
+        hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")
+        
+        var rgb: UInt64 = 0
+        Scanner(string: hexSanitized).scanHexInt64(&rgb)
+        
+        let red = Double((rgb & 0xFF0000) >> 16) / 255.0
+        let green = Double((rgb & 0x00FF00) >> 8) / 255.0
+        let blue = Double(rgb & 0x0000FF) / 255.0
+        
+        return Color(red: red, green: green, blue: blue)
+    }
+    
+    /// Convert weight string to Font.Weight
+    private func fontWeight(from string: String) -> Font.Weight {
+        switch string.lowercased() {
+        case "regular": return .regular
+        case "medium": return .medium
+        case "semibold": return .semibold
+        case "bold": return .bold
+        case "heavy": return .heavy
+        default: return .bold
+        }
+    }
+    
+    var body: some View {
+        VStack(alignment: .leading) {
+            // Header with icon and title
+            HStack {
+                // App icon
+                AsyncImage(url: URL(string: item.iconURL)) { phase in
+                    switch phase {
+                    case .success(let image):
+                        image
+                            .resizable()
+                            .aspectRatio(contentMode: .fill)
+                    default:
+                        RoundedRectangle(cornerRadius: 6)
+                            .fill(colorFromHex(backgroundColor))
+                    }
+                }
+                .frame(width: 30, height: 30)
+                .clipShape(RoundedRectangle(cornerRadius: 6))
+                
+                Text(item.title)
+                    .font(.system(size: CGFloat(titleFontSize), weight: fontWeight(from: titleFontWeight)))
+                    .foregroundColor(colorFromHex(titleFontColor))
+                    .opacity(titleOpacity)
+            }
+            .offset(x: 15)
+            
+            // Main app screenshot
+            ZStack {
+                AsyncImage(url: URL(string: item.imageURL)) { phase in
+                    switch phase {
+                    case .success(let image):
+                        image
+                            .resizable()
+                            .aspectRatio(contentMode: .fill)
+                    default:
+                        Rectangle()
+                            .fill(colorFromHex(backgroundColor))
+                    }
+                }
+            }
+            .frame(width: 260, height: 540)
+            .clipShape(RoundedRectangle(cornerRadius: CGFloat(borderRadius)))
+            .shadow(radius: 3)
+        }
+        .frame(width: 260, height: 580)
+        .contentShape(Rectangle())
+        .onTapGesture {
+            onPress()
+        }
+    }
+}

package/ios/CloxViewSwitcher.podspec

@@ -0,0 +1,30 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'CloxViewSwitcher'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '15.1',
+    :tvos => '15.1'
+  }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/prolific-life/clox-view-switcher' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+  s.exclude_files = "build/**/*"
+end

package/ios/CloxViewSwitcherModule.swift

@@ -0,0 +1,66 @@
+import ExpoModulesCore
+
+public class CloxViewSwitcherModule: Module {
+    public func definition() -> ModuleDefinition {
+        Name("CloxViewSwitcher")
+
+        // Defines event names that the module can send to JavaScript.
+        Events("onChange", "onItemPress", "onCardChange")
+
+        // Defines a JavaScript synchronous function
+        Function("hello") {
+            return "Hello World! 👋"
+        }
+
+        // Enables the module to be used as a native view.
+        View(CloxViewSwitcherView.self) {
+            // Items prop - array of app items
+            Prop("items") { (view: CloxViewSwitcherView, items: [[String: String]]) in
+                view.setItems(items)
+            }
+            
+            // Spring animation response (duration)
+            Prop("springResponse") { (view: CloxViewSwitcherView, value: Double) in
+                view.setSpringResponse(value)
+            }
+            
+            // Spring animation damping fraction
+            Prop("springDamping") { (view: CloxViewSwitcherView, value: Double) in
+                view.setSpringDamping(value)
+            }
+            
+            // Scroll speed multiplier
+            Prop("scrollSpeed") { (view: CloxViewSwitcherView, value: Double) in
+                view.setScrollSpeed(value)
+            }
+            
+            // Card background color (placeholder before images load)
+            Prop("cardBackgroundColor") { (view: CloxViewSwitcherView, value: String) in
+                view.setCardBackgroundColor(value)
+            }
+            
+            // Card border radius
+            Prop("cardBorderRadius") { (view: CloxViewSwitcherView, value: Double) in
+                view.setCardBorderRadius(value)
+            }
+            
+            // Title font color
+            Prop("titleFontColor") { (view: CloxViewSwitcherView, value: String) in
+                view.setTitleFontColor(value)
+            }
+            
+            // Title font size
+            Prop("titleFontSize") { (view: CloxViewSwitcherView, value: Double) in
+                view.setTitleFontSize(value)
+            }
+            
+            // Title font weight
+            Prop("titleFontWeight") { (view: CloxViewSwitcherView, value: String) in
+                view.setTitleFontWeight(value)
+            }
+            
+            // Events
+            Events("onItemPress", "onCardChange")
+        }
+    }
+}

package/ios/CloxViewSwitcherView.swift

@@ -0,0 +1,138 @@
+//
+//  CloxViewSwitcherView.swift
+//  CloxViewSwitcher
+//
+//  Native view that wraps the SwiftUI app switcher
+//
+
+import ExpoModulesCore
+import UIKit
+import SwiftUI
+
+class CloxViewSwitcherView: ExpoView {
+    
+    private var hostingController: UIHostingController<AnyView>?
+    private var items: [SwitcherItem] = []
+    private var springResponse: Double = 0.5
+    private var springDamping: Double = 0.85
+    private var scrollSpeed: Double = 1.0
+    private var cardBackgroundColor: String = "#FFFFFF"
+    private var cardBorderRadius: Double = 20.0
+    private var titleFontColor: String = "#FFFFFF"
+    private var titleFontSize: Double = 14.0
+    private var titleFontWeight: String = "bold"
+    
+    // Event emitters
+    let onItemPress = EventDispatcher()
+    let onCardChange = EventDispatcher()
+    
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+        setupView()
+    }
+    
+    private func setupView() {
+        backgroundColor = .clear
+        updateSwiftUIView()
+    }
+    
+    func setItems(_ itemsData: [[String: String]]) {
+        self.items = itemsData.compactMap { dict in
+            guard let id = dict["id"],
+                  let title = dict["title"],
+                  let image = dict["image"],
+                  let icon = dict["icon"] else {
+                return nil
+            }
+            return SwitcherItem(id: id, title: title, imageURL: image, iconURL: icon)
+        }
+        updateSwiftUIView()
+    }
+    
+    func setSpringResponse(_ value: Double) {
+        self.springResponse = value
+        updateSwiftUIView()
+    }
+    
+    func setSpringDamping(_ value: Double) {
+        self.springDamping = value
+        updateSwiftUIView()
+    }
+    
+    func setScrollSpeed(_ value: Double) {
+        self.scrollSpeed = value
+        updateSwiftUIView()
+    }
+    
+    func setCardBackgroundColor(_ value: String) {
+        self.cardBackgroundColor = value
+        updateSwiftUIView()
+    }
+    
+    func setCardBorderRadius(_ value: Double) {
+        self.cardBorderRadius = value
+        updateSwiftUIView()
+    }
+    
+    func setTitleFontColor(_ value: String) {
+        self.titleFontColor = value
+        updateSwiftUIView()
+    }
+    
+    func setTitleFontSize(_ value: Double) {
+        self.titleFontSize = value
+        updateSwiftUIView()
+    }
+    
+    func setTitleFontWeight(_ value: String) {
+        self.titleFontWeight = value
+        updateSwiftUIView()
+    }
+    
+    private func updateSwiftUIView() {
+        // Remove existing hosting controller view
+        hostingController?.view.removeFromSuperview()
+        
+        // Create the SwiftUI view with items
+        let switcherView = AppSwitcherContainerView(
+            items: items,
+            springResponse: springResponse,
+            springDamping: springDamping,
+            scrollSpeed: scrollSpeed,
+            cardBackgroundColor: cardBackgroundColor,
+            cardBorderRadius: cardBorderRadius,
+            titleFontColor: titleFontColor,
+            titleFontSize: titleFontSize,
+            titleFontWeight: titleFontWeight,
+            onItemPress: { [weak self] id in
+                self?.onItemPress(["id": id])
+            },
+            onCardChange: { [weak self] id in
+                self?.onCardChange(["id": id])
+            }
+        )
+        
+        // Wrap it in a hosting controller
+        let hostingController = UIHostingController(rootView: AnyView(switcherView))
+        hostingController.view.backgroundColor = .clear
+        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
+        
+        self.hostingController = hostingController
+        
+        // Add the hosting controller's view
+        addSubview(hostingController.view)
+        
+        // Constrain to fill the parent view
+        NSLayoutConstraint.activate([
+            hostingController.view.topAnchor.constraint(equalTo: topAnchor),
+            hostingController.view.leadingAnchor.constraint(equalTo: leadingAnchor),
+            hostingController.view.trailingAnchor.constraint(equalTo: trailingAnchor),
+            hostingController.view.bottomAnchor.constraint(equalTo: bottomAnchor)
+        ])
+    }
+    
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        hostingController?.view.frame = bounds
+    }
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "clox-view-switcher",
+  "version": "0.1.1",
+  "description": "A native Expo module for view switching animations",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module",
+    "open:ios": "xed example/ios",
+    "open:android": "open -a \"Android Studio\" example/android",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "clox-view-switcher",
+    "CloxViewSwitcher",
+    "view-switcher",
+    "animation"
+  ],
+  "repository": "https://github.com/prolific-life/clox-view-switcher",
+  "bugs": {
+    "url": "https://github.com/prolific-life/clox-view-switcher/issues"
+  },
+  "author": "Yash Saxena <yash.saxena1217@gmail.com> (https://github.com/prolific-life/clox-view-switcher)",
+  "license": "MIT",
+  "homepage": "https://github.com/prolific-life/clox-view-switcher#readme",
+  "engines": {
+    "node": ">=18.14.0 || >=23.0.0"
+  },
+  "dependencies": {
+    "expo": "~54.0.12",
+    "react": "19.1.0",
+    "react-native": "0.81.4"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.0",
+    "@react-native-community/cli": "latest",
+    "expo-module-scripts": "^5.0.7"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "overrides": {
+    "glob": "^9.3.5",
+    "rimraf": "^5.0.0",
+    "pretty-format": "^29.7.0"
+  }
+}