@hero-design/rn 8.15.0 → 8.16.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 8b2a37cf3788f3a5
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 28.2s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output c5819fd205a488aa
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 26.7s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1,6 +1,6 @@
 import * as reactNative from 'react-native';
 import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
-import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, isValidElement, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import DateTimePicker from '@react-native-community/datetimepicker';
@@ -981,6 +981,7 @@ var blue$1 = colorScales.blue,
   blueLight75: blue$1.lighten75,
   blueLight90: blue$1.lighten90,
   dodgerBlue: ultramarineBlue$3.base,
+  dodgerBlueDark15: ultramarineBlue$3.darken15,
   dodgerBlueDark30: ultramarineBlue$3.darken30,
   dodgerBlueLight30: ultramarineBlue$3.lighten30,
   dodgerBlueLight75: ultramarineBlue$3.lighten75,
@@ -1005,6 +1006,7 @@ var blue$1 = colorScales.blue,
   greyLight90: grey$2.lighten90,
   greyLight95: grey$2.lighten95,
   grotesqueGreen: grotesqueGreen.base,
+  grotesqueGreenDark30: grotesqueGreen.darken30,
   grotesqueGreenDark45: grotesqueGreen.darken45,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
@@ -12377,8 +12379,16 @@ var StyledErrorButtonSecondary = index$a(CompoundButton)(function (_ref5) {
     padding: theme.__hd__.error.space.button.padding
   };
 });
-var StyledErrorImage = index$a(Image)(function (_ref6) {
+var StyledErrorImageContainer = index$a(View)(function (_ref6) {
   var theme = _ref6.theme;
+  return {
+    marginBottom: theme.__hd__.error.space.imageMarginBottom,
+    width: theme.__hd__.error.sizes.image,
+    height: theme.__hd__.error.sizes.image
+  };
+});
+var StyledErrorImage = index$a(Image)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -12386,8 +12396,8 @@ var StyledErrorImage = index$a(Image)(function (_ref6) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$a(Typography.Text)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledErrorTitle = index$a(Typography.Text)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     fontFamily: theme.__hd__.error.fonts.title,
     fontSize: theme.__hd__.error.fontSizes.title,
@@ -12396,8 +12406,8 @@ var StyledErrorTitle = index$a(Typography.Text)(function (_ref7) {
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$a(Typography.Text)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     fontFamily: theme.__hd__.error.fonts.description,
     fontSize: theme.__hd__.error.fontSizes.description,
@@ -12408,6 +12418,19 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref8) {
 
 var _excluded$a = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var renderImage = function renderImage(image) {
+  if ( /*#__PURE__*/isValidElement(image)) {
+    return /*#__PURE__*/React.cloneElement(image, {
+      testID: 'error-image'
+    });
+  }
+  return /*#__PURE__*/React.createElement(StyledErrorImage, {
+    source: typeof image === 'string' ? {
+      uri: image
+    } : image,
+    testID: "error-image"
+  });
+};
 var ErrorPage = function ErrorPage(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'in-page' : _ref$variant,
@@ -12426,12 +12449,7 @@ var ErrorPage = function ErrorPage(_ref) {
   return /*#__PURE__*/React.createElement(StyledErrorContainer$1, {
     testID: testID,
     themeVariant: variant
-  }, /*#__PURE__*/React.createElement(StyledErrorContent, nativeProps, image && /*#__PURE__*/React.createElement(StyledErrorImage, {
-    source: typeof image === 'string' ? {
-      uri: image
-    } : image,
-    testID: "error-image"
-  }), /*#__PURE__*/React.createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React.createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React.createElement(StyledErrorButtonPrimary, {
+  }, /*#__PURE__*/React.createElement(StyledErrorContent, nativeProps, image && /*#__PURE__*/React.createElement(StyledErrorImageContainer, null, renderImage(image)), /*#__PURE__*/React.createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React.createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React.createElement(StyledErrorButtonPrimary, {
     variant: "filled",
     text: ctaText,
     onPress: onCtaPress

package/lib/index.js

@@ -1010,6 +1010,7 @@ var blue$1 = colorScales.blue,
   blueLight75: blue$1.lighten75,
   blueLight90: blue$1.lighten90,
   dodgerBlue: ultramarineBlue$3.base,
+  dodgerBlueDark15: ultramarineBlue$3.darken15,
   dodgerBlueDark30: ultramarineBlue$3.darken30,
   dodgerBlueLight30: ultramarineBlue$3.lighten30,
   dodgerBlueLight75: ultramarineBlue$3.lighten75,
@@ -1034,6 +1035,7 @@ var blue$1 = colorScales.blue,
   greyLight90: grey$2.lighten90,
   greyLight95: grey$2.lighten95,
   grotesqueGreen: grotesqueGreen.base,
+  grotesqueGreenDark30: grotesqueGreen.darken30,
   grotesqueGreenDark45: grotesqueGreen.darken45,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
@@ -12406,8 +12408,16 @@ var StyledErrorButtonSecondary = index$a(CompoundButton)(function (_ref5) {
     padding: theme.__hd__.error.space.button.padding
   };
 });
-var StyledErrorImage = index$a(Image)(function (_ref6) {
+var StyledErrorImageContainer = index$a(reactNative.View)(function (_ref6) {
   var theme = _ref6.theme;
+  return {
+    marginBottom: theme.__hd__.error.space.imageMarginBottom,
+    width: theme.__hd__.error.sizes.image,
+    height: theme.__hd__.error.sizes.image
+  };
+});
+var StyledErrorImage = index$a(Image)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -12415,8 +12425,8 @@ var StyledErrorImage = index$a(Image)(function (_ref6) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$a(Typography.Text)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledErrorTitle = index$a(Typography.Text)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     fontFamily: theme.__hd__.error.fonts.title,
     fontSize: theme.__hd__.error.fontSizes.title,
@@ -12425,8 +12435,8 @@ var StyledErrorTitle = index$a(Typography.Text)(function (_ref7) {
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$a(Typography.Text)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     fontFamily: theme.__hd__.error.fonts.description,
     fontSize: theme.__hd__.error.fontSizes.description,
@@ -12437,6 +12447,19 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref8) {
 
 var _excluded$a = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var renderImage = function renderImage(image) {
+  if ( /*#__PURE__*/React.isValidElement(image)) {
+    return /*#__PURE__*/React__default["default"].cloneElement(image, {
+      testID: 'error-image'
+    });
+  }
+  return /*#__PURE__*/React__default["default"].createElement(StyledErrorImage, {
+    source: typeof image === 'string' ? {
+      uri: image
+    } : image,
+    testID: "error-image"
+  });
+};
 var ErrorPage = function ErrorPage(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'in-page' : _ref$variant,
@@ -12455,12 +12478,7 @@ var ErrorPage = function ErrorPage(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, {
     testID: testID,
     themeVariant: variant
-  }, /*#__PURE__*/React__default["default"].createElement(StyledErrorContent, nativeProps, image && /*#__PURE__*/React__default["default"].createElement(StyledErrorImage, {
-    source: typeof image === 'string' ? {
-      uri: image
-    } : image,
-    testID: "error-image"
-  }), /*#__PURE__*/React__default["default"].createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React__default["default"].createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React__default["default"].createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__default["default"].createElement(StyledErrorButtonPrimary, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledErrorContent, nativeProps, image && /*#__PURE__*/React__default["default"].createElement(StyledErrorImageContainer, null, renderImage(image)), /*#__PURE__*/React__default["default"].createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React__default["default"].createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React__default["default"].createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__default["default"].createElement(StyledErrorButtonPrimary, {
     variant: "filled",
     text: ctaText,
     onPress: onCtaPress

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.15.0",
+  "version": "8.16.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.15.0",
+    "@hero-design/colors": "8.16.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.15.0",
+    "@hero-design/eslint-plugin": "8.16.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.15.0",
+    "eslint-config-hd": "8.16.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.15.0",
+    "prettier-config-hd": "8.16.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Error/StyledError.tsx

@@ -50,6 +50,11 @@ const StyledErrorButtonSecondary = styled(Button)(({ theme }) => ({
   padding: theme.__hd__.error.space.button.padding,
 }));
 
+const StyledErrorImageContainer = styled(View)(({ theme }) => ({
+  marginBottom: theme.__hd__.error.space.imageMarginBottom,
+  width: theme.__hd__.error.sizes.image,
+  height: theme.__hd__.error.sizes.image,
+}));
 const StyledErrorImage = styled(Image)(({ theme }) => ({
   marginBottom: theme.__hd__.error.space.imageMarginBottom,
   width: theme.__hd__.error.sizes.image,
@@ -83,4 +88,5 @@ export {
   StyledErrorContent,
   StyledErrorTitle,
   StyledErrorDescription,
+  StyledErrorImageContainer,
 };

package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Error renders error screen with image correctly 1`] = `
+exports[`Error renders error screen with custom image element correctly 1`] = `
 <View
   style={
     Array [
@@ -30,32 +30,169 @@ exports[`Error renders error screen with image correctly 1`] = `
       ]
     }
   >
-    <Image
-      source={
-        Object {
-          "uri": "path_to_image",
+    <View
+      style={
+        Array [
+          Object {
+            "height": 176,
+            "marginBottom": 32,
+            "width": 176,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "path_to_image",
+          }
         }
+        style={
+          Array [
+            Object {
+              "borderRadius": 0,
+              "height": 72,
+              "width": 72,
+            },
+            undefined,
+          ]
+        }
+        testID="error-image"
+      />
+    </View>
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "RebondGrotesque-SemiBold",
+              "fontSize": 24,
+              "marginBottom": 8,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      We’re sorry, something went wrong
+    </Text>
+    <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "borderRadius": 0,
-            "height": 72,
-            "width": 72,
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
           Array [
             Object {
-              "height": 176,
-              "marginBottom": 32,
-              "resizeMode": "contain",
-              "width": 176,
+              "color": "#4d6265",
+              "fontFamily": "RebondGrotesque",
+              "fontSize": 18,
+              "textAlign": "center",
             },
             undefined,
           ],
         ]
       }
-      testID="error-image"
-    />
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Please try again later
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Error renders error screen with image correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#f6f6f7",
+        "display": "flex",
+        "flex": 1,
+        "flexDirection": "column",
+      },
+      undefined,
+    ]
+  }
+  themeVariant="in-page"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+          "justifyContent": "center",
+          "padding": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "height": 176,
+            "marginBottom": 32,
+            "width": 176,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Image
+        source={
+          Object {
+            "uri": "path_to_image",
+          }
+        }
+        style={
+          Array [
+            Object {
+              "borderRadius": 0,
+              "height": 72,
+              "width": 72,
+            },
+            Array [
+              Object {
+                "height": 176,
+                "marginBottom": 32,
+                "resizeMode": "contain",
+                "width": 176,
+              },
+              undefined,
+            ],
+          ]
+        }
+        testID="error-image"
+      />
+    </View>
     <Text
       allowFontScaling={false}
       style={
@@ -165,32 +302,45 @@ exports[`Error renders full screen error page correctly 1`] = `
         ]
       }
     >
-      <Image
-        source={
-          Object {
-            "uri": "path_to_image",
-          }
-        }
+      <View
         style={
           Array [
             Object {
-              "borderRadius": 0,
-              "height": 72,
-              "width": 72,
+              "height": 176,
+              "marginBottom": 32,
+              "width": 176,
             },
+            undefined,
+          ]
+        }
+      >
+        <Image
+          source={
+            Object {
+              "uri": "path_to_image",
+            }
+          }
+          style={
             Array [
               Object {
-                "height": 176,
-                "marginBottom": 32,
-                "resizeMode": "contain",
-                "width": 176,
+                "borderRadius": 0,
+                "height": 72,
+                "width": 72,
               },
-              undefined,
-            ],
-          ]
-        }
-        testID="error-image"
-      />
+              Array [
+                Object {
+                  "height": 176,
+                  "marginBottom": 32,
+                  "resizeMode": "contain",
+                  "width": 176,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="error-image"
+        />
+      </View>
       <Text
         allowFontScaling={false}
         style={

package/src/components/Error/__tests__/index.spec.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Error from '..';
+import Image from '../../Image';
 
 const title = `We’re sorry, something went wrong`;
 const description = 'Please try again later';
@@ -26,6 +27,23 @@ describe('Error', () => {
     expect(getByTestId('error-image')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
+  it('renders error screen with custom image element correctly', () => {
+    const image = (
+      <Image
+        source={{
+          uri: 'path_to_image',
+        }}
+      />
+    );
+    const { toJSON, getByText, getByTestId } = renderWithTheme(
+      <Error title={title} description={description} image={image} />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    expect(getByText(description)).toBeTruthy();
+    expect(getByTestId('error-image')).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
   it('renders full screen error page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
       <Error

package/src/components/Error/index.tsx

@@ -1,6 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
-import type { ImageSourcePropType, ViewProps } from 'react-native';
+import React, {
+  ReactElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import type {
+  ImageSourcePropType,
+  ViewProps,
+  ImageProps as RNImageProps,
+} from 'react-native';
 import {
   ErrorVariant,
   StyledErrorButtonContainer,
@@ -10,10 +19,12 @@ import {
   StyledErrorContent,
   StyledErrorDescription,
   StyledErrorImage,
+  StyledErrorImageContainer,
   StyledErrorModal,
   StyledErrorTitle,
 } from './StyledError';
 import { useDeprecation } from '../../utils/hooks';
+import { ImageProps } from '../Image/index';
 
 interface ErrorProps extends ViewProps {
   /**
@@ -37,7 +48,10 @@ interface ErrorProps extends ViewProps {
   /**
    * Image of the error
    */
-  image?: ImageSourcePropType | string;
+  image?:
+    | ReactElement<ImageProps | RNImageProps>
+    | ImageSourcePropType
+    | string;
   /**
    * Testing id of the component.
    */
@@ -62,6 +76,23 @@ interface ErrorProps extends ViewProps {
 
 type onCloseCallbackType = 'cta' | 'secondaryCta' | null;
 
+const renderImage = (
+  image: ReactElement<ImageProps | RNImageProps> | ImageSourcePropType | string
+) => {
+  if (isValidElement(image)) {
+    return React.cloneElement(image, {
+      testID: 'error-image',
+    });
+  }
+
+  return (
+    <StyledErrorImage
+      source={typeof image === 'string' ? { uri: image } : image}
+      testID="error-image"
+    />
+  );
+};
+
 const ErrorPage = ({
   variant = 'in-page',
   title,
@@ -82,12 +113,10 @@ const ErrorPage = ({
     <StyledErrorContainer testID={testID} themeVariant={variant}>
       <StyledErrorContent {...nativeProps}>
         {image && (
-          <StyledErrorImage
-            source={typeof image === 'string' ? { uri: image } : image}
-            testID="error-image"
-          />
+          <StyledErrorImageContainer>
+            {renderImage(image)}
+          </StyledErrorImageContainer>
         )}
-
         <StyledErrorTitle>{title}</StyledErrorTitle>
 
         {description && (

package/types/components/Error/StyledError.d.ts

@@ -39,6 +39,12 @@ declare const StyledErrorButtonSecondary: import("@emotion/native").StyledCompon
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
+declare const StyledErrorImageContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
 declare const StyledErrorImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -51,4 +57,4 @@ declare const StyledErrorDescription: import("@emotion/native").StyledComponent<
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-export { ErrorVariant, StyledErrorModal, StyledErrorImage, StyledErrorContainer, StyledErrorButtonContainer, StyledErrorButtonPrimary, StyledErrorButtonSecondary, StyledErrorContent, StyledErrorTitle, StyledErrorDescription, };
+export { ErrorVariant, StyledErrorModal, StyledErrorImage, StyledErrorContainer, StyledErrorButtonContainer, StyledErrorButtonPrimary, StyledErrorButtonSecondary, StyledErrorContent, StyledErrorTitle, StyledErrorDescription, StyledErrorImageContainer, };

package/types/components/Error/index.d.ts

@@ -1,6 +1,7 @@
-import type { ReactElement } from 'react';
-import type { ImageSourcePropType, ViewProps } from 'react-native';
+import { ReactElement } from 'react';
+import type { ImageSourcePropType, ViewProps, ImageProps as RNImageProps } from 'react-native';
 import { ErrorVariant } from './StyledError';
+import { ImageProps } from '../Image/index';
 interface ErrorProps extends ViewProps {
     /**
      * @deprecated use conditional rendering instead
@@ -23,7 +24,7 @@ interface ErrorProps extends ViewProps {
     /**
      * Image of the error
      */
-    image?: ImageSourcePropType | string;
+    image?: ReactElement<ImageProps | RNImageProps> | ImageSourcePropType | string;
     /**
      * Testing id of the component.
      */