@xaui/native 0.2.2 → 0.2.4

package/dist/alert/index.cjs

@@ -18,8 +18,8 @@ var _reactnative = require('react-native');
 
 
 
-
 var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+var _reactnativeworklets = require('react-native-worklets');
 
 // src/components/alert/alert.style.ts
 
@@ -254,7 +254,7 @@ var Alert = ({
     opacity.value = _reactnativereanimated.withTiming.call(void 0, 0, { duration: 250 });
     scale.value = _reactnativereanimated.withTiming.call(void 0, 0.95, { duration: 250 }, (finished) => {
       if (finished) {
-        _reactnativereanimated.runOnJS.call(void 0, finishClosing)();
+        _reactnativeworklets.scheduleOnRN.call(void 0, finishClosing);
       }
     });
   }, [finishClosing, opacity, scale, visible]);

package/dist/alert/index.js

@@ -15,11 +15,11 @@ import React2, {
 } from "react";
 import { Pressable, Text, View } from "react-native";
 import Animated, {
-  useSharedValue,
   useAnimatedStyle,
-  withTiming,
-  runOnJS
+  useSharedValue,
+  withTiming
 } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 
 // src/components/alert/alert.style.ts
 import { StyleSheet } from "react-native";
@@ -254,7 +254,7 @@ var Alert = ({
     opacity.value = withTiming(0, { duration: 250 });
     scale.value = withTiming(0.95, { duration: 250 }, (finished) => {
       if (finished) {
-        runOnJS(finishClosing)();
+        scheduleOnRN(finishClosing);
       }
     });
   }, [finishClosing, opacity, scale, visible]);

package/dist/dialog/index.cjs

@@ -19,8 +19,8 @@ var _reactnative = require('react-native');
 
 
 
-
 var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+var _reactnativeworklets = require('react-native-worklets');
 var _core = require('@xaui/core');
 var _icons = require('@xaui/icons');
 
@@ -263,7 +263,7 @@ var Dialog = ({
       },
       (finished) => {
         if (finished) {
-          _reactnativereanimated.runOnJS.call(void 0, finishClosing)();
+          _reactnativeworklets.scheduleOnRN.call(void 0, finishClosing);
         }
       }
     );

package/dist/dialog/index.js

@@ -16,11 +16,11 @@ import React, {
 import { Modal, Pressable, Text, View } from "react-native";
 import Animated, {
   Easing,
-  runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withTiming
 } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
 import { withOpacity } from "@xaui/core";
 import { CloseIcon } from "@xaui/icons";
 
@@ -263,7 +263,7 @@ var Dialog = ({
       },
       (finished) => {
         if (finished) {
-          runOnJS(finishClosing)();
+          scheduleOnRN(finishClosing);
         }
       }
     );

package/dist/tabs/index.cjs

@@ -197,12 +197,13 @@ function toTabItems(children) {
     if (!_react2.default.isValidElement(child) || child.type !== Tab) {
       return [];
     }
-    if (child.key == null) {
+    const tabKey = child.props.tabKey;
+    if (!tabKey) {
       return [];
     }
     return [
       {
-        key: String(child.key),
+        key: tabKey,
         title: child.props.title,
         startContent: child.props.startContent,
         endContent: child.props.endContent,

package/dist/tabs/index.d.cts

@@ -31,6 +31,10 @@ type TabsItem = {
     content?: ReactNode;
 };
 type TabProps = {
+    /**
+     * Unique identifier for the tab. Used for selection, disabled state, and content rendering.
+     */
+    tabKey: string;
     /**
      * Label content for the tab trigger.
      */

package/dist/tabs/index.d.ts

@@ -31,6 +31,10 @@ type TabsItem = {
     content?: ReactNode;
 };
 type TabProps = {
+    /**
+     * Unique identifier for the tab. Used for selection, disabled state, and content rendering.
+     */
+    tabKey: string;
     /**
      * Label content for the tab trigger.
      */

package/dist/tabs/index.js

@@ -197,12 +197,13 @@ function toTabItems(children) {
     if (!React.isValidElement(child) || child.type !== Tab) {
       return [];
     }
-    if (child.key == null) {
+    const tabKey = child.props.tabKey;
+    if (!tabKey) {
       return [];
     }
     return [
       {
-        key: String(child.key),
+        key: tabKey,
         title: child.props.title,
         startContent: child.props.startContent,
         endContent: child.props.endContent,

package/dist/view/index.cjs

@@ -430,6 +430,37 @@ var Surface = ({
 };
 Surface.displayName = "Surface";
 
+// src/components/view/screen/screen.tsx
+
+
+var _reactnativesafeareacontext = require('react-native-safe-area-context');
+var Screen = ({
+  children,
+  padding,
+  backgroundColor,
+  safeArea = false,
+  style
+}) => {
+  const theme = _chunk7UFBLUMVcjs.useXUITheme.call(void 0, );
+  const resolvedBackgroundColor = _nullishCoalesce(backgroundColor, () => ( theme.colors.background));
+  const Container = safeArea ? _reactnativesafeareacontext.SafeAreaView : _reactnative.View;
+  return /* @__PURE__ */ _react2.default.createElement(
+    Container,
+    {
+      style: [
+        {
+          flex: 1,
+          backgroundColor: resolvedBackgroundColor,
+          padding
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+Screen.displayName = "Screen";
+
 // src/components/view/center/center.tsx
 
 
@@ -1094,4 +1125,5 @@ MasonryGridBuilder.displayName = "MasonryGridBuilder";
 
 
 
-exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Center = Center; exports.Column = Column; exports.ConditionalView = ConditionalView; exports.Grid = Grid; exports.GridBuilder = GridBuilder; exports.GridItem = GridItem; exports.Margin = Margin; exports.MasonryGrid = MasonryGrid; exports.MasonryGridBuilder = MasonryGridBuilder; exports.MasonryGridItem = MasonryGridItem; exports.Padding = Padding; exports.PositionedView = PositionedView; exports.RoundedView = RoundedView; exports.Row = Row; exports.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface;
+
+exports.AspectRatio = AspectRatio; exports.BlurView = BlurView; exports.Center = Center; exports.Column = Column; exports.ConditionalView = ConditionalView; exports.Grid = Grid; exports.GridBuilder = GridBuilder; exports.GridItem = GridItem; exports.Margin = Margin; exports.MasonryGrid = MasonryGrid; exports.MasonryGridBuilder = MasonryGridBuilder; exports.MasonryGridItem = MasonryGridItem; exports.Padding = Padding; exports.PositionedView = PositionedView; exports.RoundedView = RoundedView; exports.Row = Row; exports.Screen = Screen; exports.SizedBox = SizedBox; exports.Spacer = Spacer; exports.Surface = Surface;

package/dist/view/index.d.cts

@@ -1,5 +1,5 @@
 import React, { ReactNode, ReactElement, ComponentType } from 'react';
-import { ViewStyle, StyleProp, ColorValue, ScrollViewProps } from 'react-native';
+import { StyleProp, ViewStyle, ColorValue, ScrollViewProps } from 'react-native';
 import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.cjs';
 
 type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
@@ -36,7 +36,7 @@ type RowProps = {
     /**
      * Custom style for the row container.
      */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 };
 type ColumnProps = RowProps & {
     /**
@@ -351,6 +351,33 @@ type SurfaceProps = {
 
 declare const Surface: React.FC<SurfaceProps>;
 
+type ScreenProps = {
+    /**
+     * Content rendered inside the screen container.
+     */
+    children: ReactNode;
+    /**
+     * Uniform padding applied to the screen.
+     */
+    padding?: number;
+    /**
+     * Optional custom background color.
+     * Uses theme background by default.
+     */
+    backgroundColor?: string;
+    /**
+     * Wrap content in a SafeAreaView.
+     * @default false
+     */
+    safeArea?: boolean;
+    /**
+     * Additional container styles.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Screen: React.FC<ScreenProps>;
+
 type CenterProps = {
     /**
      * Content to render inside the centered container.
@@ -685,4 +712,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, ReactElement, ComponentType } from 'react';
-import { ViewStyle, StyleProp, ColorValue, ScrollViewProps } from 'react-native';
+import { StyleProp, ViewStyle, ColorValue, ScrollViewProps } from 'react-native';
 import { T as ThemeColor, R as Radius } from '../index-BOw6tbkc.js';
 
 type MainAxisAlignment = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
@@ -36,7 +36,7 @@ type RowProps = {
     /**
      * Custom style for the row container.
      */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 };
 type ColumnProps = RowProps & {
     /**
@@ -351,6 +351,33 @@ type SurfaceProps = {
 
 declare const Surface: React.FC<SurfaceProps>;
 
+type ScreenProps = {
+    /**
+     * Content rendered inside the screen container.
+     */
+    children: ReactNode;
+    /**
+     * Uniform padding applied to the screen.
+     */
+    padding?: number;
+    /**
+     * Optional custom background color.
+     * Uses theme background by default.
+     */
+    backgroundColor?: string;
+    /**
+     * Wrap content in a SafeAreaView.
+     * @default false
+     */
+    safeArea?: boolean;
+    /**
+     * Additional container styles.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+
+declare const Screen: React.FC<ScreenProps>;
+
 type CenterProps = {
     /**
      * Content to render inside the centered container.
@@ -685,4 +712,4 @@ declare const MasonryGridBuilder: {
     displayName: string;
 };
 
-export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };
+export { AspectRatio, type AspectRatioProps, BlurView, type BlurViewProps, Center, type CenterProps, Column, type ColumnProps, ConditionalView, type ConditionalViewAnimation, type ConditionalViewProps, type CrossAxisAlignment, Grid, GridBuilder, type GridBuilderProps, GridItem, type GridItemProps, type GridProps, type MainAxisAlignment, Margin, type MarginProps, MasonryGrid, MasonryGridBuilder, type MasonryGridBuilderProps, MasonryGridItem, type MasonryGridItemProps, type MasonryGridProps, Padding, type PaddingProps, PositionedView, type PositionedViewProps, RoundedView, type RoundedViewProps, Row, type RowProps, Screen, type ScreenProps, SizedBox, type SizedBoxProps, Spacer, type SpacerProps, Surface, type SurfaceProps, type SurfaceThemeColor };

package/dist/view/index.js

@@ -430,9 +430,40 @@ var Surface = ({
 };
 Surface.displayName = "Surface";
 
-// src/components/view/center/center.tsx
+// src/components/view/screen/screen.tsx
 import React12 from "react";
 import { View as View12 } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+var Screen = ({
+  children,
+  padding,
+  backgroundColor,
+  safeArea = false,
+  style
+}) => {
+  const theme = useXUITheme();
+  const resolvedBackgroundColor = backgroundColor ?? theme.colors.background;
+  const Container = safeArea ? SafeAreaView : View12;
+  return /* @__PURE__ */ React12.createElement(
+    Container,
+    {
+      style: [
+        {
+          flex: 1,
+          backgroundColor: resolvedBackgroundColor,
+          padding
+        },
+        style
+      ]
+    },
+    children
+  );
+};
+Screen.displayName = "Screen";
+
+// src/components/view/center/center.tsx
+import React13 from "react";
+import { View as View13 } from "react-native";
 var Center = ({
   children,
   fullWidth,
@@ -440,8 +471,8 @@ var Center = ({
   noGrowth = false
 }) => {
   const fullWidthStyle = fullWidth ? { width: "100%" } : void 0;
-  return /* @__PURE__ */ React12.createElement(
-    View12,
+  return /* @__PURE__ */ React13.createElement(
+    View13,
     {
       style: [
         {
@@ -459,16 +490,16 @@ var Center = ({
 Center.displayName = "Center";
 
 // src/components/view/grid/grid.tsx
-import React14, { useMemo as useMemo2, useState } from "react";
+import React15, { useMemo as useMemo2, useState } from "react";
 import {
-  View as View14
+  View as View15
 } from "react-native";
 
 // src/components/view/grid/grid-item.tsx
-import React13 from "react";
-import { View as View13 } from "react-native";
+import React14 from "react";
+import { View as View14 } from "react-native";
 var GridItem = ({ children, style }) => {
-  return /* @__PURE__ */ React13.createElement(View13, { style }, children);
+  return /* @__PURE__ */ React14.createElement(View14, { style }, children);
 };
 GridItem.displayName = "GridItem";
 
@@ -482,7 +513,7 @@ var getSafeSpan = (span, columns) => {
   return Math.min(Math.floor(span), columns);
 };
 var isGridItemElement = (child) => {
-  if (!React14.isValidElement(child)) return false;
+  if (!React15.isValidElement(child)) return false;
   if (child.type === GridItem) return true;
   const displayName = child.type.displayName;
   return displayName === "GridItem";
@@ -501,15 +532,15 @@ var Grid = ({
   const resolvedRowSpacing = rowSpacing ?? spacing ?? 0;
   const resolvedColumnSpacing = columnSpacing ?? spacing ?? 0;
   const itemWidth = `${100 / safeColumns}%`;
-  const items = React14.Children.toArray(children);
+  const items = React15.Children.toArray(children);
   const totalColumnGap = resolvedColumnSpacing * (safeColumns - 1);
   const baseItemWidth = useMemo2(() => {
     if (!containerWidth) return void 0;
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   let currentColumn = 0;
-  return /* @__PURE__ */ React14.createElement(
-    View14,
+  return /* @__PURE__ */ React15.createElement(
+    View15,
     {
       style: [
         {
@@ -526,7 +557,7 @@ var Grid = ({
       }
     },
     items.map((child, index) => {
-      const key = React14.isValidElement(child) && child.key ? child.key : `grid-${index}`;
+      const key = React15.isValidElement(child) && child.key ? child.key : `grid-${index}`;
       const span = isGridItemElement(child) ? getSafeSpan(child.props.span, safeColumns) : 1;
       const spanWidth = baseItemWidth === void 0 ? `${100 / safeColumns * span}%` : baseItemWidth * span + resolvedColumnSpacing * (span - 1);
       if (currentColumn + span > safeColumns) {
@@ -546,7 +577,7 @@ var Grid = ({
           itemStyle,
           child.props.style
         ];
-        const element2 = React14.cloneElement(child, {
+        const element2 = React15.cloneElement(child, {
           key,
           style: mergedStyle
         });
@@ -554,8 +585,8 @@ var Grid = ({
         return element2;
       }
       const defaultItemWidth = baseItemWidth === void 0 ? itemWidth : baseItemWidth;
-      const element = /* @__PURE__ */ React14.createElement(
-        View14,
+      const element = /* @__PURE__ */ React15.createElement(
+        View15,
         {
           key,
           style: [
@@ -578,11 +609,11 @@ var Grid = ({
 };
 
 // src/components/view/grid/grid-builder.tsx
-import React15, { useMemo as useMemo3 } from "react";
+import React16, { useMemo as useMemo3 } from "react";
 import {
   FlatList,
   StyleSheet as StyleSheet2,
-  View as View15
+  View as View16
 } from "react-native";
 var getSafeColumns2 = (columns) => {
   if (!columns || columns <= 0) return 1;
@@ -669,7 +700,7 @@ var GridBuilder = ({
         },
         itemStyle
       ];
-      return /* @__PURE__ */ React15.createElement(View15, { style: placeholderStyle, pointerEvents: "none" });
+      return /* @__PURE__ */ React16.createElement(View16, { style: placeholderStyle, pointerEvents: "none" });
     }
     const element = resolvedRenderer({ item: item.item, index: item.index });
     if (element === null) return null;
@@ -685,7 +716,7 @@ var GridBuilder = ({
       },
       itemStyle
     ];
-    return /* @__PURE__ */ React15.createElement(View15, { style: wrapperStyle }, element);
+    return /* @__PURE__ */ React16.createElement(View16, { style: wrapperStyle }, element);
   };
   const flattenedStyle = StyleSheet2.flatten(style) ?? {};
   const {
@@ -706,7 +737,7 @@ var GridBuilder = ({
     ...columnGap !== void 0 ? { columnGap } : {}
   };
   const hasLayoutStyle = Object.keys(layoutStyle).length > 0;
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     FlatList,
     {
       data: paddedData,
@@ -726,7 +757,7 @@ var GridBuilder = ({
 GridBuilder.displayName = "GridBuilder";
 
 // src/components/view/conditional/conditional-view.tsx
-import React16, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
+import React17, { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
 import { Animated as Animated3 } from "react-native";
 
 // src/components/view/conditional/conditional-view.utils.ts
@@ -878,18 +909,18 @@ var ConditionalView = ({
   if (!shouldRender) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(Animated3.View, { style: animatedStyle }, children);
+  return /* @__PURE__ */ React17.createElement(Animated3.View, { style: animatedStyle }, children);
 };
 
 // src/components/view/masonry-grid/masonry-grid.tsx
-import React17, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
-import { View as View16 } from "react-native";
+import React18, { useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
+import { View as View17 } from "react-native";
 var getSafeColumns3 = (columns) => {
   if (!columns || columns <= 0) return 1;
   return Math.floor(columns);
 };
 var getItemKey = (child, index) => {
-  return React17.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
+  return React18.isValidElement(child) && child.key ? String(child.key) : `masonry-${index}`;
 };
 var MasonryGrid = ({
   children,
@@ -912,7 +943,7 @@ var MasonryGrid = ({
     return (containerWidth - totalColumnGap) / safeColumns;
   }, [containerWidth, safeColumns, totalColumnGap]);
   const items = useMemo5(
-    () => React17.Children.toArray(children).map((child, index) => ({
+    () => React18.Children.toArray(children).map((child, index) => ({
       key: getItemKey(child, index),
       element: child
     })),
@@ -929,8 +960,8 @@ var MasonryGrid = ({
     });
     return buckets;
   }, [items, layoutVersion, resolvedRowSpacing, safeColumns]);
-  return /* @__PURE__ */ React17.createElement(
-    View16,
+  return /* @__PURE__ */ React18.createElement(
+    View17,
     {
       style: [
         {
@@ -953,10 +984,10 @@ var MasonryGrid = ({
         },
         columnStyle
       ];
-      return /* @__PURE__ */ React17.createElement(View16, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
+      return /* @__PURE__ */ React18.createElement(View17, { key: `masonry-col-${columnIndex}`, style: columnStyles }, column.map((item, index) => {
         const isLastRow = index === column.length - 1;
-        return /* @__PURE__ */ React17.createElement(
-          View16,
+        return /* @__PURE__ */ React18.createElement(
+          View17,
           {
             key: item.key,
             style: { marginBottom: isLastRow ? 0 : resolvedRowSpacing },
@@ -975,18 +1006,18 @@ var MasonryGrid = ({
 };
 
 // src/components/view/masonry-grid/masonry-grid-item.tsx
-import React18 from "react";
-import { View as View17 } from "react-native";
+import React19 from "react";
+import { View as View18 } from "react-native";
 var MasonryGridItem = ({
   children,
   style
 }) => {
-  return /* @__PURE__ */ React18.createElement(View17, { style }, children);
+  return /* @__PURE__ */ React19.createElement(View18, { style }, children);
 };
 MasonryGridItem.displayName = "MasonryGridItem";
 
 // src/components/view/masonry-grid/masonry-grid-builder.tsx
-import React19, { useMemo as useMemo6, useRef as useRef4 } from "react";
+import React20, { useMemo as useMemo6, useRef as useRef4 } from "react";
 import {
   ScrollView
 } from "react-native";
@@ -1046,7 +1077,7 @@ var MasonryGridBuilder = ({
       onEndReached();
     }
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     ScrollView,
     {
       scrollEventThrottle: 16,
@@ -1058,7 +1089,7 @@ var MasonryGridBuilder = ({
       onScroll: handleScroll
     },
     header,
-    /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(
       MasonryGrid,
       {
         columns,
@@ -1068,7 +1099,7 @@ var MasonryGridBuilder = ({
         style: [{ width: "100%" }, style],
         columnStyle
       },
-      resolvedData.map((item, index) => /* @__PURE__ */ React19.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
+      resolvedData.map((item, index) => /* @__PURE__ */ React20.createElement(MasonryGridItem, { key: resolvedKeyExtractor(item, index) }, resolvedRenderer({ item, index })))
     ),
     footer
   );
@@ -1091,6 +1122,7 @@ export {
   PositionedView,
   RoundedView,
   Row,
+  Screen,
   SizedBox,
   Spacer,
   Surface

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaui/native",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Flutter-inspired React Native UI components with native animations powered by React Native Reanimated",
   "keywords": [
     "react-native",
@@ -276,6 +276,8 @@
     "react-native": ">=0.70.0",
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": ">=4.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-worklets": ">=0.5.0",
     "react-native-svg": ">=15.0.0"
   },
   "devDependencies": {
@@ -285,6 +287,8 @@
     "react-native": "^0.81.5",
     "react-native-gesture-handler": "^2.28.0",
     "react-native-reanimated": "^4.0.0",
+    "react-native-safe-area-context": "^5.6.0",
+    "react-native-worklets": "^0.5.1",
     "react-native-svg": "^15.8.0",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"