react-native-divkit 0.1.0-alpha.1 → 0.1.0-alpha.3

package/src/components/README.md

@@ -3,9 +3,11 @@
 ## MVP Components Implemented
 
 ### 1. DivText (`text/DivText.tsx`)
+
 Text rendering component with variable substitution and styling.
 
 **Features:**
+
 - ✅ Text rendering with variable substitution
 - ✅ Font styling (size, weight, color, family)
 - ✅ Text alignment (horizontal, RTL support)
@@ -15,6 +17,7 @@ Text rendering component with variable substitution and styling.
 - ✅ Font feature settings (basic)
 
 **Deferred:**
+
 - Text ranges (nested styling)
 - Text images
 - Text gradients
@@ -23,9 +26,11 @@ Text rendering component with variable substitution and styling.
 - Selectable text with custom actions
 
 ### 2. DivContainer (`container/DivContainer.tsx`)
+
 Flex container component for layout management.
 
 **Features:**
+
 - ✅ Vertical/horizontal/overlap orientation
 - ✅ Content alignment (horizontal & vertical)
 - ✅ Item spacing (gap)
@@ -33,6 +38,7 @@ Flex container component for layout management.
 - ✅ RTL support
 
 **Deferred:**
+
 - Wrap layout mode
 - Separators (visual dividers)
 - Line separators (for wrap mode)
@@ -41,9 +47,11 @@ Flex container component for layout management.
 - Clip to bounds
 
 ### 3. DivImage (`image/DivImage.tsx`)
+
 Image component with network loading and scaling.
 
 **Features:**
+
 - ✅ Network image loading
 - ✅ Scaling modes (fill, fit, stretch, no_scale)
 - ✅ Placeholder color while loading
@@ -52,6 +60,7 @@ Image component with network loading and scaling.
 - ✅ Aspect ratio
 
 **Deferred:**
+
 - GIF support (requires react-native-gif)
 - Image preview (blur-up technique)
 - Tint color and tint modes
@@ -61,9 +70,11 @@ Image component with network loading and scaling.
 - react-native-fast-image integration
 
 ### 4. DivState (`state/DivState.tsx`)
+
 State management component for switching between different UI states.
 
 **Features:**
+
 - ✅ State selection by state_id
 - ✅ Default state
 - ✅ State switching via actions (set_state)
@@ -72,6 +83,7 @@ State management component for switching between different UI states.
 - ✅ Two-way binding with variables
 
 **Deferred:**
+
 - Transition animations (in/out/change)
 - Animation timing and interpolation
 - Clip to bounds
@@ -79,15 +91,18 @@ State management component for switching between different UI states.
 - Multiple concurrent state transitions
 
 ### 5. DivComponent (`DivComponent.tsx`)
+
 Universal component router that dispatches to appropriate component based on type.
 
 **Supported Types:**
+
 - `text` → DivText
 - `container` → DivContainer
 - `image` / `gif` → DivImage
 - `state` → DivState
 
 **Deferred Types:**
+
 - `gallery`, `pager`, `tabs`
 - `slider`, `indicator`
 - `input`, `select`, `switch`
@@ -97,9 +112,11 @@ Universal component router that dispatches to appropriate component based on typ
 ## Utility Components
 
 ### Outer (`utilities/Outer.tsx`)
+
 Base wrapper component providing common functionality for all components.
 
 **Features:**
+
 - Visibility handling (visible/invisible/gone)
 - Sizing (width/height with fixed/match_parent/wrap_content)
 - Padding and margins
@@ -110,6 +127,7 @@ Base wrapper component providing common functionality for all components.
 - Action handling (onPress)
 
 ### Unknown (`utilities/Unknown.tsx`)
+
 Fallback component for unsupported types.
 
 ## Architecture
@@ -131,6 +149,7 @@ DivComponent (router)
 ## Integration with Context System
 
 All components integrate with:
+
 - **DivKitContext**: Access to variables, actions, configuration
 - **StateContext**: State management and transitions
 - **ActionContext**: Action execution
@@ -139,6 +158,7 @@ All components integrate with:
 ## Integration with Hooks
 
 All components use reactive hooks:
+
 - `useDerivedFromVarsSimple`: Variable substitution
 - `useAction`, `useActionHandler`: Action execution
 - `useDivKitContext`, `useStateContext`: Context access
@@ -149,29 +169,29 @@ All components use reactive hooks:
 import { DivComponent } from 'react-native-divkit';
 
 const json = {
-  type: 'container',
-  orientation: 'vertical',
-  items: [
-    {
-      type: 'text',
-      text: 'Hello @{userName}!',
-      font_size: 24
-    },
-    {
-      type: 'image',
-      image_url: 'https://example.com/image.png',
-      scale: 'fit'
-    }
-  ]
+    type: 'container',
+    orientation: 'vertical',
+    items: [
+        {
+            type: 'text',
+            text: 'Hello @{userName}!',
+            font_size: 24
+        },
+        {
+            type: 'image',
+            image_url: 'https://example.com/image.png',
+            scale: 'fit'
+        }
+    ]
 };
 
 const componentContext = {
-  json,
-  variables: variablesMap,
-  // ... other context props
+    json,
+    variables: variablesMap
+    // ... other context props
 };
 
-<DivComponent componentContext={componentContext} />
+<DivComponent componentContext={componentContext} />;
 ```
 
 ## Next Steps (Phase 6)

package/src/components/container/DivContainer.tsx

@@ -50,10 +50,7 @@ export function DivContainer({ componentContext }: DivContainerProps) {
         variables || new Map()
     );
 
-    const itemSpacing = useDerivedFromVarsSimple<number>(
-        json.item_spacing || 0,
-        variables || new Map()
-    );
+    const itemSpacing = useDerivedFromVarsSimple<number>(json.item_spacing || 0, variables || new Map());
 
     // Build container style
     const containerStyle = useMemo((): ViewStyle => {
@@ -120,19 +117,14 @@ export function DivContainer({ componentContext }: DivContainerProps) {
 
         return json.items.map((item, index) => {
             const childContext = componentContext.produceChildContext(item, {
-                path: index,
+                path: index
             });
 
             if (!childContext) {
                 return null;
             }
 
-            const child = (
-                <DivComponent
-                    key={item.id || `item-${index}`}
-                    componentContext={childContext}
-                />
-            );
+            const child = <DivComponent key={item.id || `item-${index}`} componentContext={childContext} />;
 
             // Wrap in positioned View for overlap mode
             if (orientation === 'overlap' && childWrapperStyle) {
@@ -149,9 +141,7 @@ export function DivContainer({ componentContext }: DivContainerProps) {
 
     return (
         <Outer componentContext={componentContext}>
-            <View style={containerStyle}>
-                {renderChildren()}
-            </View>
+            <View style={containerStyle}>{renderChildren()}</View>
         </Outer>
     );
 }

package/src/components/image/DivImage.tsx

@@ -43,10 +43,7 @@ export function DivImage({ componentContext }: DivImageProps) {
         variables || new Map()
     );
 
-    const scale = useDerivedFromVarsSimple<ImageScale>(
-        json.scale || 'fill',
-        variables || new Map()
-    );
+    const scale = useDerivedFromVarsSimple<ImageScale>(json.scale || 'fill', variables || new Map());
 
     const placeholderColor = useDerivedFromVarsSimple<string | undefined>(
         json.placeholder_color,
@@ -103,12 +100,6 @@ export function DivImage({ componentContext }: DivImageProps) {
         return style;
     }, [json.aspect]);
 
-    // Handle image load events
-    const handleLoadStart = () => {
-        setLoading(true);
-        setError(false);
-    };
-
     const handleLoadEnd = () => {
         setLoading(false);
     };
@@ -146,7 +137,6 @@ export function DivImage({ componentContext }: DivImageProps) {
                     source={{ uri: imageUrl }}
                     style={imageStyle}
                     resizeMode={resizeMode}
-                    onLoadStart={handleLoadStart}
                     onLoadEnd={handleLoadEnd}
                     onError={handleError}
                 />

package/src/components/state/DivState.tsx

@@ -116,7 +116,7 @@ export function DivState({ componentContext }: DivStateProps) {
         if (!currentState?.div) return undefined;
 
         return componentContext.produceChildContext(currentState.div, {
-            path: currentStateId,
+            path: currentStateId
         });
     }, [currentState, currentStateId, componentContext]);
 
@@ -129,18 +129,12 @@ export function DivState({ componentContext }: DivStateProps) {
         // Import DivComponent dynamically to avoid circular dependency
         const DivComponent = require('../DivComponent').DivComponent;
 
-        return (
-            <DivComponent
-                componentContext={childContext}
-            />
-        );
+        return <DivComponent componentContext={childContext} />;
     };
 
     return (
         <Outer componentContext={componentContext}>
-            <View>
-                {renderContent()}
-            </View>
+            <View>{renderContent()}</View>
         </Outer>
     );
 }

package/src/components/text/DivText.tsx

@@ -35,30 +35,18 @@ export function DivText({ componentContext }: DivTextProps) {
     const { json, variables } = componentContext;
 
     // Reactive properties - use hooks for properties that may contain variables
-    const text = useDerivedFromVarsSimple<string>(
-        json.text || '',
-        variables || new Map()
-    );
+    const text = useDerivedFromVarsSimple<string>(json.text || '', variables || new Map());
 
-    const fontSize = useDerivedFromVarsSimple<number>(
-        json.font_size || 12,
-        variables || new Map()
-    );
+    const fontSize = useDerivedFromVarsSimple<number>(json.font_size || 12, variables || new Map());
 
-    const textColor = useDerivedFromVarsSimple<string>(
-        json.text_color || '#000000',
-        variables || new Map()
-    );
+    const textColor = useDerivedFromVarsSimple<string>(json.text_color || '#000000', variables || new Map());
 
     const textAlignmentHorizontal = useDerivedFromVarsSimple(
         json.text_alignment_horizontal || 'start',
         variables || new Map()
     );
 
-    const maxLines = useDerivedFromVarsSimple<number | undefined>(
-        json.max_lines,
-        variables || new Map()
-    );
+    const maxLines = useDerivedFromVarsSimple<number | undefined>(json.max_lines, variables || new Map());
 
     // Build text style
     const textStyle = useMemo((): TextStyle => {
@@ -77,10 +65,10 @@ export function DivText({ componentContext }: DivTextProps) {
         // Font weight
         if (json.font_weight) {
             const weightMap: Record<FontWeight, TextStyle['fontWeight']> = {
-                'light': '300',
-                'regular': '400',
-                'medium': '500',
-                'bold': '700'
+                light: '300',
+                regular: '400',
+                medium: '500',
+                bold: '700'
             };
             style.fontWeight = weightMap[json.font_weight] || '400';
         } else if (json.font_weight_value) {

package/src/components/utilities/Background.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+import Svg, { Defs, RadialGradient, Stop, Rect } from 'react-native-svg';
+import type { Background as BackgroundType, RadialBackground } from '../../types/background';
+
+export interface BackgroundProps {
+    layers?: BackgroundType[];
+    style?: ViewStyle;
+    width?: number;
+    height?: number;
+}
+
+const RadialGradientLayer = ({ layer }: { layer: RadialBackground }) => {
+    // Default to 50% 50% if not specified
+    let cx = '50%';
+    let cy = '50%';
+    
+    if (layer.center_x) {
+        if (layer.center_x.type === 'fixed') {
+            cx = `${layer.center_x.value}`;
+        } else {
+            cx = `${layer.center_x.value * 100}%`;
+        }
+    }
+    
+    if (layer.center_y) {
+        if (layer.center_y.type === 'fixed') {
+            cy = `${layer.center_y.value}`;
+        } else {
+            cy = `${layer.center_y.value * 100}%`;
+        }
+    }
+
+    // Colors
+    // If colors array provided, distribute evenly
+    // If color_map provided, use it
+    let stops: JSX.Element[] = [];
+
+    if (layer.colors) {
+        stops = layer.colors.map((color, index) => (
+            <Stop
+                key={index}
+                offset={index / (layer.colors!.length - 1)}
+                stopColor={color}
+                stopOpacity={1}
+            />
+        ));
+    } else if (layer.color_map) {
+        stops = layer.color_map.map((point, index) => (
+            <Stop
+                key={index}
+                offset={point.position}
+                stopColor={point.color}
+                stopOpacity={1}
+            />
+        ));
+    }
+
+    // Radius
+    // DivKit defaults: farthest_corner
+    // SVG RadialGradient rx ry defaults to 50%
+    // To support "farthest_corner" accurately we might need complex math or just use a large radius like 100%?
+    // For now, let's stick to 50% (containing circle) or 100%?
+    // A safe default for radial gradients covering a view is often 50% rx/ry if the center is center.
+    // If the center is custom, we might need adjustments.
+    // Let's use '50%' for rx/ry which is standard for "closest-side" sort of.
+    // Specifying units="userSpaceOnUse" allows pixel values.
+    // Specifying units="objectBoundingBox" (default) allows percentages.
+    
+    // We'll use objectBoundingBox
+    const rx = '50%';
+    const ry = '50%';
+
+    return (
+        <Svg height="100%" width="100%" style={StyleSheet.absoluteFill}>
+            <Defs>
+                <RadialGradient
+                    id="grad"
+                    cx={cx}
+                    cy={cy}
+                    rx={rx}
+                    ry={ry}
+                    fx={cx}
+                    fy={cy}
+                    gradientUnits="objectBoundingBox"
+                >
+                    {stops}
+                </RadialGradient>
+            </Defs>
+            <Rect x="0" y="0" width="100%" height="100%" fill="url(#grad)" />
+        </Svg>
+    );
+};
+
+export const Background = ({ layers, style }: BackgroundProps) => {
+    if (!layers || layers.length === 0) return null;
+
+    return (
+        <View style={[StyleSheet.absoluteFill, style, { zIndex: -1, overflow: 'hidden' }]} pointerEvents="none">
+            {layers.map((layer, index) => {
+                if (layer.type === 'solid') {
+                    return (
+                        <View
+                            key={index}
+                            style={[StyleSheet.absoluteFill, { backgroundColor: layer.color }]}
+                        />
+                    );
+                }
+                if (layer.type === 'radial_gradient') {
+                    return (
+                        <View key={index} style={StyleSheet.absoluteFill}>
+                            <RadialGradientLayer layer={layer} />
+                        </View>
+                    );
+                }
+                return null;
+            })}
+        </View>
+    );
+};

package/src/components/utilities/Outer.tsx

@@ -8,6 +8,7 @@ import type { MaybeMissing } from '../../expressions/json';
 import { useDerivedFromVarsSimple } from '../../hooks/useDerivedFromVars';
 import { useActionHandler, useHasActions } from '../../hooks/useAction';
 import { useDivKitContext } from '../../context/DivKitContext';
+import { Background } from './Background';
 
 export interface OuterProps<T extends DivBaseData = DivBaseData> {
     componentContext: ComponentContext<T>;
@@ -31,14 +32,8 @@ export function Outer<T extends DivBaseData = DivBaseData>({
 
     // Only use reactive hooks for truly dynamic properties (visibility, alpha)
     // For MVP, other properties are read directly from JSON (can be enhanced later)
-    const visibility = useDerivedFromVarsSimple<Visibility>(
-        json.visibility || 'visible',
-        variables || new Map()
-    );
-    const alpha = useDerivedFromVarsSimple<number>(
-        json.alpha !== undefined ? json.alpha : 1,
-        variables || new Map()
-    );
+    const visibility = useDerivedFromVarsSimple<Visibility>(json.visibility || 'visible', variables || new Map());
+    const alpha = useDerivedFromVarsSimple<number>(json.alpha !== undefined ? json.alpha : 1, variables || new Map());
 
     // Extract properties directly from JSON for MVP (non-reactive)
     const paddings = json.paddings;
@@ -76,7 +71,10 @@ export function Outer<T extends DivBaseData = DivBaseData>({
             if (widthVal.type === 'fixed') {
                 styles.width = (widthVal as FixedSize).value;
             } else if (widthVal.type === 'match_parent') {
-                styles.width = '100%';
+                // Use alignSelf: 'stretch' instead of width: '100%' so that
+                // margins are subtracted from the available space rather than
+                // added on top of 100%, which would cause overflow.
+                styles.alignSelf = 'stretch';
                 styles.flexGrow = (widthVal as MatchParentSize).weight || 1;
             } else if (widthVal.type === 'wrap_content') {
                 styles.alignSelf = 'flex-start';
@@ -84,7 +82,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
             }
         } else {
             // Default: match_parent
-            styles.width = '100%';
+            styles.alignSelf = 'stretch';
             styles.flexGrow = 1;
         }
 
@@ -148,15 +146,8 @@ export function Outer<T extends DivBaseData = DivBaseData>({
             }
         }
 
-        // Background (MVP: only solid colors)
-        if (background && Array.isArray(background)) {
-            const bg = background as any[];
-            const solidBg = bg.find((b: any) => b?.type === 'solid');
-            if (solidBg && solidBg.color) {
-                styles.backgroundColor = solidBg.color;
-            }
-        }
-
+        // Background handled by Background component
+        
         // Border
         if (border) {
             const b = border as any;
@@ -219,13 +210,22 @@ export function Outer<T extends DivBaseData = DivBaseData>({
         return StyleSheet.flatten([containerStyle, customStyle]);
     }, [containerStyle, customStyle]);
 
+    const borderStyle = useMemo(() => {
+        const s = finalStyle || {};
+        const res: ViewStyle = {};
+        if (s.borderRadius) res.borderRadius = s.borderRadius;
+        if (s.borderTopLeftRadius) res.borderTopLeftRadius = s.borderTopLeftRadius;
+        if (s.borderTopRightRadius) res.borderTopRightRadius = s.borderTopRightRadius;
+        if (s.borderBottomLeftRadius) res.borderBottomLeftRadius = s.borderBottomLeftRadius;
+        if (s.borderBottomRightRadius) res.borderBottomRightRadius = s.borderBottomRightRadius;
+        return res;
+    }, [finalStyle]);
+
     // Render with or without Pressable based on actions
     if (hasActions) {
         return (
-            <Pressable
-                onPress={handlePress}
-                style={finalStyle}
-            >
+            <Pressable onPress={handlePress} style={finalStyle}>
+                <Background layers={background as any} style={borderStyle} />
                 {children}
             </Pressable>
         );
@@ -233,6 +233,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
 
     return (
         <View style={finalStyle}>
+            <Background layers={background as any} style={borderStyle} />
             {children}
         </View>
     );