@developer_tribe/react-builder 1.2.22 → 1.2.23

package/src/assets/samples/vpn-onboard-6.json

@@ -82,9 +82,34 @@
     "attributes": {
       "useSafeAreaView": true,
       "description": "Ekranın ana kapsayıcısı. (#1)",
-      "title": "Main 1"
+      "title": "Main 1",
+      "styles": {
+        "paddingBottom": 16
+      }
     },
     "children": [
+      {
+        "type": "StatusBarColor",
+        "attributes": {
+          "title": "Status Bar Color",
+          "description": "Status bar background color.",
+          "styles": {
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": null
+      },
+      {
+        "type": "NavigationBarColor",
+        "attributes": {
+          "title": "Navigation Bar Color",
+          "description": "Navigation bar background color.",
+          "styles": {
+            "backgroundColor": "THEME_COLORS.BACKGROUND"
+          }
+        },
+        "children": null
+      },
       {
         "type": "OnboardProvider",
         "children": [
@@ -111,7 +136,7 @@
                       "description": "Sayfa başlığı. (#1)",
                       "title": "OnboardTitle 1",
                       "styles": {
-                        "color": "#F4F5FF"
+                        "color": "THEME_COLORS.ONBOARD_TITLE"
                       }
                     },
                     "children": "onboard.title.one-page"
@@ -122,7 +147,7 @@
                       "description": "Sayfa alt başlığı. (#1)",
                       "title": "OnboardSubtitle 1",
                       "styles": {
-                        "color": "#DBDDEB"
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE"
                       }
                     },
                     "children": "onboard.subtitle.one-page"
@@ -153,7 +178,7 @@
                       "description": "Sayfa başlığı. (#2)",
                       "title": "OnboardTitle 2",
                       "styles": {
-                        "color": "#F4F5FF"
+                        "color": "THEME_COLORS.ONBOARD_TITLE"
                       }
                     },
                     "children": "onboard.title.two-page"
@@ -164,7 +189,7 @@
                       "description": "Sayfa alt başlığı. (#2)",
                       "title": "OnboardSubtitle 2",
                       "styles": {
-                        "color": "#DBDDEB"
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE"
                       }
                     },
                     "children": "onboard.subtitle.two-page"
@@ -195,7 +220,7 @@
                       "description": "Sayfa başlığı. (#3)",
                       "title": "OnboardTitle 3",
                       "styles": {
-                        "color": "#F4F5FF"
+                        "color": "THEME_COLORS.ONBOARD_TITLE"
                       }
                     },
                     "children": "onboard.title.three-page"
@@ -206,7 +231,7 @@
                       "description": "Sayfa alt başlığı. (#3)",
                       "title": "OnboardSubtitle 3",
                       "styles": {
-                        "color": "#DBDDEB"
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE"
                       }
                     },
                     "children": "onboard.subtitle.three-page"
@@ -237,7 +262,7 @@
                       "description": "Sayfa başlığı. (#4)",
                       "title": "OnboardTitle 4",
                       "styles": {
-                        "color": "#F4F5FF"
+                        "color": "THEME_COLORS.ONBOARD_TITLE"
                       }
                     },
                     "children": "onboard.title.four-page"
@@ -248,7 +273,7 @@
                       "description": "Sayfa alt başlığı. (#4)",
                       "title": "OnboardSubtitle 4",
                       "styles": {
-                        "color": "#DBDDEB"
+                        "color": "THEME_COLORS.ONBOARD_SUBTITLE"
                       }
                     },
                     "children": "onboard.subtitle.four-page"
@@ -262,7 +287,10 @@
             ],
             "attributes": {
               "description": "Onboarding ana yapısı. (#1)",
-              "title": "Onboard 1"
+              "title": "Onboard 1",
+              "styles": {
+                "flex": 1
+              }
             }
           },
           {
@@ -271,10 +299,22 @@
               "dotType": "expanding_dot",
               "dot_thickness": 20,
               "inactive_dot_opacity": 0.3,
-              "inactive_dot_color": "#E4E5E7",
-              "active_dot_color": "#007AFF",
+              "inactive_dot_color": "STATIC_COLORS.ONBOARD_DOT_INACTIVE",
+              "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
               "styles": {
-                "flex": 2
+                "paddingVertical": 12
+              }
+            }
+          },
+          {
+            "type": "Separator",
+            "attributes": {
+              "title": "Separator",
+              "description": "Horizontal separator line",
+              "styles": {
+                "width": "100%",
+                "height": 2,
+                "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
               }
             }
           },
@@ -287,8 +327,9 @@
               "description": "Sayfa buton grubu. (#1)",
               "title": "OnboardButtons 1",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -296,8 +337,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "#0450E2",
-                  "button_background_color": "#161827",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -314,8 +355,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0450E2",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -339,8 +380,9 @@
               "description": "Sayfa buton grubu. (#2)",
               "title": "OnboardButtons 2",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -348,8 +390,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "#0450E2",
-                  "button_background_color": "#161827",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -366,8 +408,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0450E2",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -391,8 +433,9 @@
               "description": "Sayfa buton grubu. (#3)",
               "title": "OnboardButtons 3",
               "styles": {
-                "flex": 2,
-                "justifyContent": "flex-end"
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -400,8 +443,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "#0450E2",
-                  "button_background_color": "#161827",
+                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
                       "type": "Navigate",
@@ -418,8 +461,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0450E2",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -445,15 +488,20 @@
               "condition": "carousel-index",
               "conditionVariable": 3,
               "description": "Sayfa buton grubu. (#4)",
-              "title": "OnboardButtons 4"
+              "title": "OnboardButtons 4",
+              "styles": {
+                "height": 40,
+                "marginVertical": 12,
+                "flexShrink": 0
+              }
             },
             "children": [
               {
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "#FFFFFF",
-                  "button_background_color": "#0450E2",
+                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
+                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -477,7 +525,8 @@
               "title": "Onboard Footer Wrap",
               "description": "Wrapper for OnboardFooter component",
               "styles": {
-                "flex": 2
+                "marginHorizontal": 25,
+                "flexShrink": 0
               }
             },
             "children": [
@@ -486,14 +535,14 @@
                 "attributes": {
                   "textLocalizationKey": "view.onboarding.footer.description",
                   "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-                  "linkedWordFirstColor": "#0450E2",
+                  "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
                   "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-                  "linkedWordSecondColor": "#0450E2",
+                  "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {
                     "gap": 8,
-                    "color": "#81838F"
+                    "color": "THEME_COLORS.FOOTER_TEXT"
                   }
                 }
               }

package/src/attribute-analyser/style/native/useExtractImageStyle.ts

@@ -1,9 +1,13 @@
 import { useMemo } from 'react';
 import type { NodeData } from '../../../types/Node';
-import type { ImagePropsGenerated } from '../../../build-components/Image/ImageProps.generated';
+import type {
+  ImagePropsGenerated,
+  ResizeModeOptionType,
+} from '../../../build-components/Image/ImageProps.generated';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractImageStyleNative } from '../../../utils/extractImageStyle';
 import { defaultAppConfig } from '../../../types/PreviewConfig';
+import { getStyleBag } from '../../../utils/attributeStyle';
 
 export function useExtractImageStyle<
   T extends ImagePropsGenerated['attributes'],
@@ -13,33 +17,31 @@ export function useExtractImageStyle<
   const projectColors = builderProjectColors;
 
   return useMemo(() => {
-    // extractImageStyleNative includes `resizeMode` in the returned object, but in RN
-    // resizeMode is typically passed as an Image prop. We normalize to `{ style, other }`.
-    const styleWithResizeMode = extractImageStyleNative(node, {
-      theme,
-      projectColors,
-    });
+    // extractImageStyleNative returns Record<string, unknown> that may include resizeMode.
+    // In RN, resizeMode is typically an Image prop, not a style property.
     const { resizeMode: resizeModeFromStyle, ...style } =
-      (styleWithResizeMode as unknown as Record<string, unknown>) ?? {};
+      extractImageStyleNative(node, { theme, projectColors });
 
-    const attrs = node.attributes as unknown as Record<string, unknown>;
-    const styleBag =
-      (attrs?.style as Record<string, unknown> | undefined) ?? undefined;
-    const { style: _style, ...rest } = attrs ?? {};
-    void _style;
+    const attrs = node.attributes;
+
+    // Prefer the typed resizeMode from attributes, fall back to extracted style value.
+    const imgStylesBag = getStyleBag(attrs);
+    const resizeMode = ((imgStylesBag?.resizeMode as string | undefined) ??
+      resizeModeFromStyle) as ResizeModeOptionType | undefined;
+
+    // Forward all non-style attributes; style bag is already consumed above.
+    //Optimzation trade off by readability: fromEntries+filter avoids generic-to-Record double assertion.
+    const forwardedAttrs = Object.fromEntries(
+      Object.entries(attrs ?? {}).filter(
+        ([key]) => key !== 'style' && key !== 'styles',
+      ),
+    );
 
     return {
       style,
       other: {
-        ...rest,
-        // In RN, resizeMode is commonly an Image prop (not style). We expose it as "other".
-        resizeMode: (resizeModeFromStyle ??
-          (styleBag?.resizeMode as unknown)) as
-          | 'cover'
-          | 'contain'
-          | 'stretch'
-          | 'center'
-          | undefined,
+        ...forwardedAttrs,
+        resizeMode,
       },
     };
   }, [node, theme, projectColors]);

package/src/attribute-analyser/style/native/useExtractTextStyle.ts

@@ -4,6 +4,7 @@ import type { TextPropsGenerated } from '../../../build-components/Text/TextProp
 import { defaultAppConfig } from '../../../types/PreviewConfig';
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractTextStyleNative } from '../../../utils/extractTextStyle';
+import { getStyleBag } from '../../../utils/attributeStyle';
 
 export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
@@ -26,11 +27,15 @@ export function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(
         fonts,
       });
 
-      const attrs = node.attributes as unknown as Record<string, unknown>;
-      const styleBag =
-        (attrs?.style as Record<string, unknown> | undefined) ?? undefined;
-      const { style: _style, ...rest } = attrs ?? {};
+      const attrs = node.attributes ?? {};
+      const styleBag = getStyleBag(attrs);
+      const {
+        style: _style,
+        styles: _styles,
+        ...rest
+      } = attrs as Record<string, unknown>;
       void _style;
+      void _styles;
 
       return {
         style,

package/src/attribute-analyser/style/native/useExtractViewStyle.ts

@@ -4,6 +4,7 @@ import type { ViewPropsGenerated } from '../../../build-components/View/ViewProp
 import { useBuilderParams } from '../../../components/BuilderProvider';
 import { extractViewStyleNative } from '../../../utils/extractViewStyle';
 import { defaultAppConfig } from '../../../types/PreviewConfig';
+import { getStyleBag, toAttributeRecord } from '../../../utils/attributeStyle';
 
 export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
@@ -15,17 +16,28 @@ export function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(
   return useMemo(() => {
     const style = extractViewStyleNative(node, { theme, projectColors });
 
-    const attrs = node.attributes as unknown as Record<string, unknown>;
-    const styleBag =
-      (attrs?.style as Record<string, unknown> | undefined) ?? undefined;
-    const { style: _style, ...rest } = attrs ?? {};
-    void _style;
+    const attrs = node.attributes;
+
+    // Forward all non-style attributes; style bag is already consumed by extractViewStyleNative.
+    //Optimzation trade off by readability: fromEntries+filter avoids generic-to-Record double assertion.
+    const forwardedAttrs = Object.fromEntries(
+      Object.entries(attrs ?? {}).filter(
+        ([key]) => key !== 'style' && key !== 'styles',
+      ),
+    );
+
+    // scrollable may reside inside the styles bag at runtime (not on ViewStyleGenerated).
+    const attrRecord = toAttributeRecord(attrs);
+    const styleBag = getStyleBag(attrs);
+    const scrollable = (attrRecord.scrollable ?? styleBag?.scrollable) as
+      | boolean
+      | undefined;
 
     return {
       style,
       other: {
-        ...rest,
-        scrollable: styleBag?.scrollable as boolean | undefined,
+        ...forwardedAttrs,
+        scrollable,
       },
     };
   }, [node, theme, projectColors]);

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -32,7 +32,9 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
-function buildProjectColorsFallback(appConfig: any): ProjectColors | undefined {
+function buildProjectColorsFallback(
+  appConfig: Record<string, unknown> | undefined | null,
+): ProjectColors | undefined {
   const addColor = (collection: Set<string>, value?: string) => {
     if (typeof value !== 'string') return;
     const trimmed = value.trim();
@@ -41,10 +43,17 @@ function buildProjectColorsFallback(appConfig: any): ProjectColors | undefined {
   };
 
   const fallback = new Set<string>();
-  const styles = [
-    appConfig?.screenStyle?.light,
-    appConfig?.screenStyle?.dark,
-  ].filter(Boolean) as Array<{
+  const screenStyle = (
+    appConfig as {
+      screenStyle?: {
+        light?: Record<string, string>;
+        dark?: Record<string, string>;
+      };
+    }
+  )?.screenStyle;
+  const styles = [screenStyle?.light, screenStyle?.dark].filter(
+    Boolean,
+  ) as Array<{
     backgroundColor?: string;
     color?: string;
     seperatorColor?: string;
@@ -74,12 +83,8 @@ export function useAttributesEditorModel({
   projectColors,
 }: AttributesEditorProps): AttributesEditorModel {
   const isInvalidNode = !node || isNodeString(node);
-  const baseData = isInvalidNode
-    ? ({
-        type: 'View',
-        children: null,
-        attributes: {},
-      } as unknown as NodeData<NodeDefaultAttribute>)
+  const baseData: NodeData<NodeDefaultAttribute> = isInvalidNode
+    ? { type: 'View', children: null, attributes: {} }
     : (node as NodeData<NodeDefaultAttribute>);
 
   const data = useNode(baseData);
@@ -152,7 +157,7 @@ export function useAttributesEditorModel({
       'Legacy/unmigrated attributes detected. This editor expects schemaVersion=2 (style nested under attributes.styles). Please run migrations.',
       {
         componentType: data?.type,
-        nodeKey: (baseData as any)?.key,
+        nodeKey: baseData.key,
         legacyFlatStyleKeys,
         hasInvalidStyleBag,
         styleBagSource: styleBagInfo.source,
@@ -178,7 +183,9 @@ export function useAttributesEditorModel({
 
   const projectColorsForPicker = useMemo<ProjectColors | undefined>(() => {
     if (projectColors) return projectColors;
-    return buildProjectColorsFallback(appConfig);
+    return buildProjectColorsFallback(
+      appConfig as unknown as Record<string, unknown>,
+    );
   }, [appConfig, projectColors]);
 
   const viewAttributes = useMemo<
@@ -400,11 +407,10 @@ export function useAttributesEditorModel({
               : {}
         ) as Record<string, unknown>;
         const nextStyle = { ...prevStyle, [name]: val };
-        // Keep both keys in sync:
-        // - `styles` is the canonical store for the editor (latest migration).
-        // - `style` is kept for back-compat because build-components currently read `attributes.style`.
+        // `styles` is the canonical store (schemaVersion=2).
         nextAttrs.styles = nextStyle;
-        nextAttrs.style = nextStyle;
+        // Remove legacy `style` key if present so the validator doesn't reject it.
+        delete nextAttrs.style;
         if (name in nextAttrs) delete nextAttrs[name];
       } else {
         nextAttrs[name] = val;

package/src/build-components/BackgroundImage/pattern.json

@@ -27,13 +27,6 @@
     "desiredParent": ["all", "background"],
     "label": "Background Image",
     "description": "Background image.",
-    "src": {
-      "label": "Src",
-      "description": "Image source URL.",
-      "category": "other",
-      "specialCategory": null,
-      "sort": 1
-    },
     "styles": {
       "resizeMode": {
         "label": "Resize Mode",
@@ -42,6 +35,15 @@
         "specialCategory": null,
         "sort": 4
       }
+    },
+    "attributes": {
+      "src": {
+        "label": "Src",
+        "description": "Image source URL.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      }
     }
   },
   "defaults": {

package/src/build-components/CarouselDots/CarouselDots.tsx

@@ -10,6 +10,7 @@ import { parseColor } from '../../utils/parseColor';
 import { parseSize } from '../../size-matters';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { defaultAppConfig } from '../../types/PreviewConfig';
+import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
   useLogRender('CarouselDots');
@@ -20,13 +21,12 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const attributeName = node.sourceType ?? node.type ?? 'carouselDots';
   const attributeKey = node.key ?? generatedId;
 
-  const attrsAny = node.attributes as any;
-  const stylesBag =
-    (attrsAny?.styles as Record<string, unknown> | undefined) ??
-    (attrsAny?.style as Record<string, unknown> | undefined) ??
-    undefined;
+  const attrRecord = toAttributeRecord(node.attributes);
+  const stylesBag = getStyleBag(node.attributes);
   const dotType =
-    (stylesBag?.dotType as any) ?? (attrsAny?.dotType as any) ?? 'normal_dot';
+    (stylesBag?.dotType as string | undefined) ??
+    (attrRecord.dotType as string | undefined) ??
+    'normal_dot';
   const style = useExtractViewStyle(node);
 
   // Use the appropriate context based on sourceType
@@ -40,16 +40,17 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
-    attrsAny?.inactive_dot_opacity ??
+    (attrRecord.inactive_dot_opacity as number | undefined) ??
     0.3;
   const inactiveDotColorOverride =
     (stylesBag?.inactive_dot_color as string | undefined) ??
-    attrsAny?.inactive_dot_color;
+    (attrRecord.inactive_dot_color as string | undefined);
   const activeDotColor =
     (stylesBag?.active_dot_color as string | undefined) ??
-    attrsAny?.active_dot_color;
+    (attrRecord.active_dot_color as string | undefined);
   const dotThicknessRaw =
-    (stylesBag?.dot_thickness as any) ?? attrsAny?.dot_thickness;
+    (stylesBag?.dot_thickness as string | number | undefined) ??
+    (attrRecord.dot_thickness as string | number | undefined);
 
   const { appConfig: builderAppConfig, projectColors } = useBuilderParams();
   const appConfig = builderAppConfig ?? defaultAppConfig;
@@ -92,7 +93,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
     return `${Math.max(0, n / 3)}px`;
   }, [dotSizeCss]);
 
-  const gapValue = (style as any)?.gap ?? dotGapCss;
+  const gapValue = style.gap ?? dotGapCss;
   const containerStyle = useMergedStyle(style, {
     display: 'flex',
     flexWrap: 'wrap',

package/src/build-components/CarouselProvider/CarouselProvider.tsx

@@ -9,7 +9,9 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 export const carouselContext = createContext<any>(undefined);
 function CarouselProvider({ node }: CarouselProviderComponentProps) {
   node = useNode(node);
-  const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    node.attributes as Parameters<typeof useEmblaCarousel>[0],
+  );
   const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'carouselProvider';
   const attributeKey = node.key ?? generatedId;

package/src/build-components/Image/ImageProps.generated.ts

@@ -2,7 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -19,6 +18,7 @@ export type JustifyContentOptionType =
   | 'space-around'
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
+export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 
 export interface ImageStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
@@ -55,6 +55,7 @@ export interface ImageStyleGenerated {
   left?: string;
   right?: string;
   zIndex?: number;
+  resizeMode?: ResizeModeOptionType;
 }
 
 export interface ImagePropsGenerated {
@@ -65,9 +66,6 @@ export interface ImagePropsGenerated {
     title?: string;
     description?: string;
     src?: string;
-    width?: string;
-    height?: string;
-    resizeMode?: ResizeModeOptionType;
   };
 }