clox-view-switcher 0.1.1 → 0.1.3

package/android/build.gradle

@@ -39,4 +39,10 @@ android {
 dependencies {
   implementation project(':expo-modules-core')
   implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:1.9.23"
+  
+  // Image loading
+  implementation "io.coil-kt:coil:2.5.0"
+  
+  // For rounded corners and shadows
+  implementation "androidx.cardview:cardview:1.0.0"
 }

package/android/src/main/java/expo/modules/cloxviewswitcher/AppCardView.kt

@@ -0,0 +1,200 @@
+package expo.modules.cloxviewswitcher
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.Typeface
+import android.graphics.drawable.GradientDrawable
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.View
+import android.widget.FrameLayout
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import coil.load
+import coil.transform.RoundedCornersTransformation
+
+data class AppItem(
+    val id: String,
+    val title: String,
+    val image: String,
+    val icon: String
+)
+
+/**
+ * AppCardView - Matches iOS AppCardView exactly
+ * 
+ * Layout (from top to bottom):
+ * - Header HStack (icon + title) - 30pt height area
+ * - Card screenshot - 260x540
+ * Total frame: 260x580
+ * 
+ * Header has x offset of 15
+ */
+class AppCardView(
+    context: Context,
+    val item: AppItem,
+    private var backgroundColor: Int = Color.WHITE,
+    private var borderRadius: Float = 20f,
+    private var titleColor: Int = Color.WHITE,
+    private var titleSize: Float = 16f,
+    private var titleWeight: Int = Typeface.BOLD
+) : LinearLayout(context) {
+
+    // iOS dimensions (in points, need to convert to pixels)
+    companion object {
+        const val CARD_WIDTH_DP = 260f
+        const val CARD_HEIGHT_DP = 540f
+        const val TOTAL_HEIGHT_DP = 580f
+        const val HEADER_HEIGHT_DP = 40f  // Space for header (580 - 540 = 40)
+        const val ICON_SIZE_DP = 30f
+        const val ICON_CORNER_DP = 6f
+        const val HEADER_OFFSET_X_DP = 15f
+    }
+
+    private val density = context.resources.displayMetrics.density
+    
+    // Card dimensions in pixels
+    val cardWidthPx = (CARD_WIDTH_DP * density).toInt()
+    val cardHeightPx = (CARD_HEIGHT_DP * density).toInt()
+    val totalHeightPx = (TOTAL_HEIGHT_DP * density).toInt()
+    
+    private val headerContainer: LinearLayout
+    private val iconImageView: ImageView
+    private val titleTextView: TextView
+    private val cardContainer: FrameLayout
+    private val cardImageView: ImageView
+    
+    var onCardPress: ((String) -> Unit)? = null
+    
+    init {
+        orientation = VERTICAL
+        layoutParams = LayoutParams(cardWidthPx, totalHeightPx)
+        setBackgroundColor(Color.TRANSPARENT)
+        
+        // ==========================================
+        // HEADER (icon + title) - comes FIRST at TOP
+        // ==========================================
+        headerContainer = LinearLayout(context).apply {
+            orientation = HORIZONTAL
+            gravity = Gravity.CENTER_VERTICAL
+            layoutParams = LayoutParams(
+                LayoutParams.MATCH_PARENT,
+                (HEADER_HEIGHT_DP * density).toInt()
+            )
+            // Header has x offset of 15 (like iOS .offset(x: 15))
+            setPadding((HEADER_OFFSET_X_DP * density).toInt(), 0, 0, 0)
+        }
+        
+        // App icon - 30x30 with corner radius 6 (only show if icon is provided)
+        val iconSizePx = (ICON_SIZE_DP * density).toInt()
+        iconImageView = ImageView(context).apply {
+            layoutParams = LayoutParams(iconSizePx, iconSizePx).apply {
+                marginEnd = (8 * density).toInt()
+            }
+            scaleType = ImageView.ScaleType.CENTER_CROP
+            
+            // Transparent background - no placeholder color
+            setBackgroundColor(Color.TRANSPARENT)
+            clipToOutline = true
+            
+            if (item.icon.isNotEmpty()) {
+                visibility = View.VISIBLE
+                load(item.icon) {
+                    crossfade(true)
+                    transformations(RoundedCornersTransformation(ICON_CORNER_DP * density))
+                }
+            } else {
+                // Hide icon container if no icon provided
+                visibility = View.GONE
+            }
+        }
+        headerContainer.addView(iconImageView)
+        
+        // App title
+        titleTextView = TextView(context).apply {
+            text = item.title
+            setTextColor(titleColor)
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, titleSize)
+            setTypeface(typeface, titleWeight)
+        }
+        headerContainer.addView(titleTextView)
+        
+        addView(headerContainer)
+        
+        // ==========================================
+        // CARD SCREENSHOT - comes AFTER header
+        // ==========================================
+        cardContainer = FrameLayout(context).apply {
+            layoutParams = LayoutParams(cardWidthPx, cardHeightPx)
+            
+            // Background with rounded corners
+            val bgDrawable = GradientDrawable().apply {
+                setColor(backgroundColor)
+                cornerRadius = borderRadius * density
+            }
+            background = bgDrawable
+            clipToOutline = true
+            elevation = 6 * density  // Shadow like iOS shadow(radius: 3)
+        }
+        
+        cardImageView = ImageView(context).apply {
+            layoutParams = FrameLayout.LayoutParams(
+                FrameLayout.LayoutParams.MATCH_PARENT,
+                FrameLayout.LayoutParams.MATCH_PARENT
+            )
+            scaleType = ImageView.ScaleType.CENTER_CROP
+            
+            if (item.image.isNotEmpty()) {
+                load(item.image) {
+                    crossfade(true)
+                    transformations(RoundedCornersTransformation(borderRadius * density))
+                }
+            }
+        }
+        cardContainer.addView(cardImageView)
+        
+        addView(cardContainer)
+        
+        // Click listener on entire card
+        setOnClickListener {
+            onCardPress?.invoke(item.id)
+        }
+    }
+    
+    fun setTitleOpacity(opacity: Float) {
+        titleTextView.alpha = opacity
+        // Icon stays visible, only title opacity changes (matching iOS)
+    }
+    
+    fun updateStyles(
+        newBackgroundColor: Int,
+        newBorderRadius: Float,
+        newTitleColor: Int,
+        newTitleSize: Float,
+        newTitleWeight: Int
+    ) {
+        backgroundColor = newBackgroundColor
+        borderRadius = newBorderRadius
+        titleColor = newTitleColor
+        titleSize = newTitleSize
+        titleWeight = newTitleWeight
+        
+        // Update card background
+        val bgDrawable = GradientDrawable().apply {
+            setColor(backgroundColor)
+            cornerRadius = borderRadius * density
+        }
+        cardContainer.background = bgDrawable
+        
+        // Icon has transparent background, no update needed
+        
+        // Update title
+        titleTextView.setTextColor(titleColor)
+        titleTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, titleSize)
+        titleTextView.setTypeface(titleTextView.typeface, titleWeight)
+    }
+    
+    fun getCardWidthDp(): Float = CARD_WIDTH_DP
+    fun getTotalHeightDp(): Float = TOTAL_HEIGHT_DP
+}

package/android/src/main/java/expo/modules/cloxviewswitcher/CloxViewSwitcherModule.kt

@@ -7,15 +7,60 @@ class CloxViewSwitcherModule : Module() {
     override fun definition() = ModuleDefinition {
         Name("CloxViewSwitcher")
 
-        Events("onChange")
+        Events("onChange", "onItemPress", "onCardChange", "onItemRemove")
 
         Function("hello") {
             "Hello World! 👋"
         }
 
-        // Enables the module to be used as a native view.
         View(CloxViewSwitcherView::class) {
-            // Props will be added here
+            // Items prop - array of app items
+            Prop("items") { view: CloxViewSwitcherView, items: List<Map<String, String>> ->
+                view.setItems(items)
+            }
+            
+            // Spring animation response (duration)
+            Prop("springResponse") { view: CloxViewSwitcherView, value: Double ->
+                view.setSpringResponse(value)
+            }
+            
+            // Spring animation damping fraction
+            Prop("springDamping") { view: CloxViewSwitcherView, value: Double ->
+                view.setSpringDamping(value)
+            }
+            
+            // Scroll speed multiplier
+            Prop("scrollSpeed") { view: CloxViewSwitcherView, value: Double ->
+                view.setScrollSpeed(value)
+            }
+            
+            // Card background color (placeholder before images load)
+            Prop("cardBackgroundColor") { view: CloxViewSwitcherView, value: String ->
+                view.setCardBackgroundColor(value)
+            }
+            
+            // Card border radius
+            Prop("cardBorderRadius") { view: CloxViewSwitcherView, value: Double ->
+                view.setCardBorderRadius(value)
+            }
+            
+            // Title font color
+            Prop("titleFontColor") { view: CloxViewSwitcherView, value: String ->
+                view.setTitleFontColor(value)
+            }
+            
+            // Title font size
+            Prop("titleFontSize") { view: CloxViewSwitcherView, value: Double ->
+                view.setTitleFontSize(value)
+            }
+            
+            // Title font weight
+            Prop("titleFontWeight") { view: CloxViewSwitcherView, value: String ->
+                view.setTitleFontWeight(value)
+            }
+            
+            // Events
+            Events("onItemPress", "onCardChange", "onItemRemove")
         }
     }
 }