@reown/appkit-ui-react-native 1.2.6 → 1.3.1

package/src/assets/svg/WalletConnect.tsx

@@ -2,7 +2,7 @@ import Svg, { ClipPath, Defs, G, Path, type SvgProps } from 'react-native-svg';
 const SvgWalletConnect = (props: SvgProps) => (
   <Svg fill="none" viewBox="0 0 96 67" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       d="M25.32 18.8a32.56 32.56 0 0 1 45.36 0l1.5 1.47c.63.62.63 1.61 0 2.22l-5.15 5.05c-.31.3-.82.3-1.14 0l-2.07-2.03a22.71 22.71 0 0 0-31.64 0l-2.22 2.18c-.31.3-.82.3-1.14 0l-5.15-5.05a1.55 1.55 0 0 1 0-2.22l1.65-1.62Zm56.02 10.44 4.59 4.5c.63.6.63 1.6 0 2.21l-20.7 20.26c-.62.61-1.63.61-2.26 0L48.28 41.83a.4.4 0 0 0-.56 0L33.03 56.21c-.63.61-1.64.61-2.27 0L10.07 35.95a1.55 1.55 0 0 1 0-2.22l4.59-4.5a1.63 1.63 0 0 1 2.27 0L31.6 43.63a.4.4 0 0 0 .57 0l14.69-14.38a1.63 1.63 0 0 1 2.26 0l14.69 14.38a.4.4 0 0 0 .57 0l14.68-14.38a1.63 1.63 0 0 1 2.27 0Z"
     />
     <Path

package/src/assets/svg/WalletPlaceholder.tsx

@@ -11,7 +11,7 @@ const SvgWalletPlaceholder = (props: SvgProps) => {
         d="M4.56 8.64c-1.23 1.68-1.23 4.08-1.23 8.88v8.96c0 4.8 0 7.2 1.23 8.88.39.55.87 1.02 1.41 1.42C7.65 38 10.05 38 14.85 38h14.3c4.8 0 7.2 0 8.88-1.22a6.4 6.4 0 0 0 1.41-1.42c.83-1.14 1.1-2.6 1.19-4.92a6.4 6.4 0 0 0 5.16-4.65c.21-.81.21-1.8.21-3.79 0-1.98 0-2.98-.22-3.79a6.4 6.4 0 0 0-5.15-4.65c-.1-2.32-.36-3.78-1.19-4.92a6.4 6.4 0 0 0-1.41-1.42C36.35 6 33.95 6 29.15 6h-14.3c-4.8 0-7.2 0-8.88 1.22a6.4 6.4 0 0 0-1.41 1.42Z"
       />
       <Path
-        fill={props.fill || Theme['bg-300']}
+        fill={props.fill ?? Theme['bg-300']}
         fillRule="evenodd"
         d="M2.27 11.33a6.4 6.4 0 0 1 6.4-6.4h26.66a6.4 6.4 0 0 1 6.4 6.4v1.7a6.4 6.4 0 0 1 5.34 6.3v5.34a6.4 6.4 0 0 1-5.34 6.3v1.7a6.4 6.4 0 0 1-6.4 6.4H8.67a6.4 6.4 0 0 1-6.4-6.4V11.33ZM39.6 31.07h-6.93a9.07 9.07 0 1 1 0-18.14h6.93v-1.6a4.27 4.27 0 0 0-4.27-4.26H8.67a4.27 4.27 0 0 0-4.27 4.26v21.34a4.27 4.27 0 0 0 4.27 4.26h26.66a4.27 4.27 0 0 0 4.27-4.26v-1.6Zm-6.93-16a6.93 6.93 0 0 0 0 13.86h8a4.27 4.27 0 0 0 4.26-4.26v-5.34a4.27 4.27 0 0 0-4.26-4.26h-8Z"
         clipRule="evenodd"

package/src/assets/svg/WalletSmall.tsx

@@ -2,7 +2,7 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgWalletSmall = (props: SvgProps) => (
   <Svg viewBox="0 0 14 14" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M0 4C0 2.61929 1.11929 1.5 2.5 1.5H10C11.3666 1.5 12.4772 2.59659 12.4997 3.95787C13.3828 4.34357 14 5.22471 14 6.25V7.75C14 8.77529 13.3828 9.65643 12.4997 10.0421C12.4772 11.4034 11.3666 12.5 10 12.5H2.5C1.11929 12.5 0 11.3807 0 10V4ZM10.4331 10.25H9.25C7.45507 10.25 6 8.79492 6 7C6 5.20507 7.45507 3.75 9.25 3.75L10.4331 3.75C10.3467 3.60055 10.1851 3.5 10 3.5H2.5C2.22386 3.5 2 3.72386 2 4V10C2 10.2761 2.22386 10.5 2.5 10.5H10C10.1851 10.5 10.3467 10.3995 10.4331 10.25ZM9.25 5.75C8.55964 5.75 8 6.30964 8 7C8 7.69036 8.55964 8.25 9.25 8.25H11.5C11.7761 8.25 12 8.02614 12 7.75V6.25C12 5.97386 11.7761 5.75 11.5 5.75L9.25 5.75Z"
       clipRule="evenodd"

package/src/assets/svg/WarningCircle.tsx

@@ -2,11 +2,11 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgWarningCircle = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       d="M11 6.67a1 1 0 1 0-2 0v2.66a1 1 0 0 0 2 0V6.67ZM10 14.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
     />
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-7 9a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"
       clipRule="evenodd"

package/src/components/wui-icon/index.tsx

@@ -10,6 +10,7 @@ import ArrowLeftSvg from '../../assets/svg/ArrowLeft';
 import ArrowRightSvg from '../../assets/svg/ArrowRight';
 import ArrowTopSvg from '../../assets/svg/ArrowTop';
 import BrowserSvg from '../../assets/svg/Browser';
+import CardSvg from '../../assets/svg/Card';
 import CheckmarkSvg from '../../assets/svg/Checkmark';
 import ChevronBottomSvg from '../../assets/svg/ChevronBottom';
 import ChevronLeftSvg from '../../assets/svg/ChevronLeft';
@@ -23,6 +24,7 @@ import CoinPlaceholderSvg from '../../assets/svg/CoinPlaceholder';
 import CopySvg from '../../assets/svg/Copy';
 import CopySmallSvg from '../../assets/svg/CopySmall';
 import CursorSvg from '../../assets/svg/Cursor';
+import CurrencyDollarSvg from '../../assets/svg/CurrencyDollar';
 import DesktopSvg from '../../assets/svg/Desktop';
 import DisconnectSvg from '../../assets/svg/Disconnect';
 import DiscordSvg from '../../assets/svg/Discord';
@@ -48,6 +50,7 @@ import QrCodeSvg from '../../assets/svg/QrCode';
 import RecycleHorizontalSvg from '../../assets/svg/RecycleHorizontal';
 import RefreshSvg from '../../assets/svg/Refresh';
 import SearchSvg from '../../assets/svg/Search';
+import SettingsSvg from '../../assets/svg/Settings';
 import SwapHorizontalSvg from '../../assets/svg/SwapHorizontal';
 import SwapVerticalSvg from '../../assets/svg/SwapVertical';
 import TelegramSvg from '../../assets/svg/Telegram';
@@ -71,6 +74,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   arrowRight: ArrowRightSvg,
   arrowTop: ArrowTopSvg,
   browser: BrowserSvg,
+  card: CardSvg,
   checkmark: CheckmarkSvg,
   chevronBottom: ChevronBottomSvg,
   chevronLeft: ChevronLeftSvg,
@@ -84,6 +88,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   copy: CopySvg,
   copySmall: CopySmallSvg,
   cursor: CursorSvg,
+  currencyDollar: CurrencyDollarSvg,
   desktop: DesktopSvg,
   disconnect: DisconnectSvg,
   discord: DiscordSvg,
@@ -109,6 +114,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   recycleHorizontal: RecycleHorizontalSvg,
   refresh: RefreshSvg,
   search: SearchSvg,
+  settings: SettingsSvg,
   swapHorizontal: SwapHorizontalSvg,
   swapVertical: SwapVerticalSvg,
   telegram: TelegramSvg,

package/src/components/wui-pressable/index.tsx

@@ -20,6 +20,7 @@ export interface PressableProps extends RNPressableProps {
   animationDuration?: number;
   disabled?: boolean;
   pressable?: boolean;
+  transparent?: boolean;
 }
 
 export function Pressable({
@@ -28,6 +29,7 @@ export function Pressable({
   disabled = false,
   pressable = true,
   onPress,
+  transparent = false,
   backgroundColor = 'gray-glass-002',
   pressedBackgroundColor = 'gray-glass-010',
   bounceScale = 0.99, // Scale to 99% of original size
@@ -80,7 +82,14 @@ export function Pressable({
   return (
     <AnimatedPressable
       disabled={disabled || !pressable}
-      style={[{ backgroundColor: bgColor, transform: [{ scale: scaleAnimation.current }] }, style]}
+      style={[
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          backgroundColor: transparent ? 'transparent' : bgColor,
+          transform: [{ scale: scaleAnimation.current }]
+        },
+        style
+      ]}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       onPress={onPress}

package/src/components/wui-shimmer/index.tsx

@@ -5,8 +5,8 @@ import { useTheme } from '../../hooks/useTheme';
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
 export interface ShimmerProps {
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
   duration?: number;
   borderRadius?: number;
   backgroundColor?: string;

package/src/composites/wui-button/index.tsx

@@ -28,6 +28,7 @@ export type ButtonProps = NativeProps & {
   style?: StyleProp<ViewStyle>;
   iconStyle?: SvgProps['style'];
   loading?: boolean;
+  testID?: string;
 };
 
 export function Button({
@@ -41,6 +42,7 @@ export function Button({
   iconRight,
   iconStyle,
   loading,
+  testID,
   ...rest
 }: ButtonProps) {
   const Theme = useTheme();
@@ -84,6 +86,7 @@ export function Button({
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       onPress={onPress}
+      testID={testID}
       {...rest}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="center">

package/src/composites/wui-button/styles.ts

@@ -28,7 +28,7 @@ export const getThemedButtonStyle = (
 
   return {
     ...buttonBaseStyle,
-    backgroundColor: variant === 'fill' ? theme['accent-100'] : theme['gray-glass-002']
+    backgroundColor: variant === 'fill' ? theme['accent-100'] : theme['gray-glass-005']
   };
 };
 

package/src/composites/wui-card-select/index.tsx

@@ -100,5 +100,5 @@ function _CardSelect({
 }
 
 export const CardSelect = memo(_CardSelect, (prevProps, nextProps) => {
-  return prevProps.name === nextProps.name;
+  return prevProps.name === nextProps.name && prevProps.imageSrc === nextProps.imageSrc;
 });

package/src/composites/wui-double-image-loader/index.native.tsx

@@ -0,0 +1,120 @@
+import { Animated, useAnimatedValue, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useEffect } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { Image } from '../../components/wui-image';
+import { Icon } from '../../components/wui-icon';
+import { type IconType } from '../../utils/TypesUtil';
+import { WalletImage } from '../wui-wallet-image';
+import styles from './styles';
+interface Props {
+  style?: StyleProp<ViewStyle>;
+  leftImage?: string;
+  rightImage?: string;
+  renderRightPlaceholder?: () => React.ReactElement;
+  leftPlaceholderIcon?: IconType;
+  rightPlaceholderIcon?: IconType;
+  leftItemStyle?: StyleProp<ViewStyle>;
+  rightItemStyle?: StyleProp<ViewStyle>;
+}
+
+export function DoubleImageLoader({
+  style,
+  leftImage,
+  rightImage,
+  renderRightPlaceholder,
+  leftPlaceholderIcon = 'mobile',
+  rightPlaceholderIcon = 'browser',
+  leftItemStyle,
+  rightItemStyle
+}: Props) {
+  const Theme = useTheme();
+  const leftPosition = useAnimatedValue(10);
+  const rightPosition = useAnimatedValue(-10);
+
+  useEffect(() => {
+    const leftAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(leftPosition, {
+          toValue: -5,
+          duration: 1500,
+          useNativeDriver: true
+        }),
+        Animated.timing(leftPosition, {
+          toValue: 10,
+          duration: 1500,
+          useNativeDriver: true
+        })
+      ])
+    );
+
+    const rightAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(rightPosition, {
+          toValue: 5,
+          duration: 1500,
+          useNativeDriver: true
+        }),
+        Animated.timing(rightPosition, {
+          toValue: -10,
+          duration: 1500,
+          useNativeDriver: true
+        })
+      ])
+    );
+
+    leftAnimation.start();
+    rightAnimation.start();
+
+    return () => {
+      leftAnimation.stop();
+      rightAnimation.stop();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <FlexView flexDirection="row" alignItems="center" justifyContent="center" style={style}>
+      <Animated.View
+        style={[
+          styles.itemBorder,
+          styles.leftItemBorder,
+          {
+            transform: [{ translateX: leftPosition }],
+            backgroundColor: Theme['bg-200']
+          },
+          leftItemStyle
+        ]}
+      >
+        {leftImage ? (
+          <Image
+            source={leftImage}
+            style={[styles.rightImage, { backgroundColor: Theme['bg-200'] }]}
+          />
+        ) : (
+          <Icon name={leftPlaceholderIcon} size="lg" color="fg-200" />
+        )}
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.itemBorder,
+          styles.rightItemBorder,
+          {
+            transform: [{ translateX: rightPosition }],
+            backgroundColor: Theme['bg-200']
+          },
+          rightItemStyle
+        ]}
+      >
+        {rightImage ? (
+          <WalletImage imageSrc={rightImage} size="lg" border={false} />
+        ) : (
+          renderRightPlaceholder?.() ?? (
+            <Icon name={rightPlaceholderIcon} size="lg" color="fg-200" />
+          )
+        )}
+      </Animated.View>
+    </FlexView>
+  );
+}

package/src/composites/wui-double-image-loader/index.tsx

@@ -0,0 +1,74 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { Image } from '../../components/wui-image';
+import { Icon } from '../../components/wui-icon';
+import { type IconType } from '../../utils/TypesUtil';
+import { WalletImage } from '../wui-wallet-image';
+import styles from './styles';
+interface Props {
+  style?: StyleProp<ViewStyle>;
+  leftImage?: string;
+  rightImage?: string;
+  renderRightPlaceholder?: () => React.ReactElement;
+  leftPlaceholderIcon?: IconType;
+  rightPlaceholderIcon?: IconType;
+  leftItemStyle?: StyleProp<ViewStyle>;
+  rightItemStyle?: StyleProp<ViewStyle>;
+}
+
+export function DoubleImageLoader({
+  style,
+  leftImage,
+  rightImage,
+  renderRightPlaceholder,
+  leftPlaceholderIcon = 'mobile',
+  rightPlaceholderIcon = 'browser',
+  leftItemStyle,
+  rightItemStyle
+}: Props) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView flexDirection="row" alignItems="center" justifyContent="center" style={style}>
+      <FlexView
+        style={[
+          styles.itemBorder,
+          styles.leftItemBorder,
+          {
+            backgroundColor: Theme['bg-200']
+          },
+          leftItemStyle
+        ]}
+      >
+        {leftImage ? (
+          <Image
+            source={leftImage}
+            style={[styles.rightImage, { backgroundColor: Theme['bg-200'] }]}
+          />
+        ) : (
+          <Icon name={leftPlaceholderIcon} size="lg" color="fg-200" />
+        )}
+      </FlexView>
+      <FlexView
+        style={[
+          styles.itemBorder,
+          styles.rightItemBorder,
+          {
+            backgroundColor: Theme['bg-200']
+          },
+          rightItemStyle
+        ]}
+      >
+        {rightImage ? (
+          <WalletImage imageSrc={rightImage} size="lg" border={false} />
+        ) : (
+          renderRightPlaceholder?.() ?? (
+            <Icon name={rightPlaceholderIcon} size="lg" color="fg-200" />
+          )
+        )}
+      </FlexView>
+    </FlexView>
+  );
+}

package/src/composites/wui-double-image-loader/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  rightImage: {
+    height: 64,
+    width: 64,
+    borderRadius: BorderRadius.full
+  },
+  itemBorder: {
+    width: 74,
+    height: 74,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  leftItemBorder: {
+    borderRadius: BorderRadius.full,
+    zIndex: 2
+  },
+  rightItemBorder: {
+    borderRadius: 22,
+    width: 72,
+    height: 72
+  }
+});

package/src/composites/wui-icon-box/index.tsx

@@ -16,6 +16,7 @@ export interface IconBoxProps {
   borderColor?: ThemeKeys;
   borderSize?: number;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 export function IconBox({
@@ -28,7 +29,8 @@ export function IconBox({
   border,
   borderColor,
   borderSize = 4,
-  style
+  style,
+  testID
 }: IconBoxProps) {
   const Theme = useTheme();
   let _iconSize: SizeType;
@@ -97,6 +99,7 @@ export function IconBox({
         border && { borderColor: Theme[borderColor || 'bg-125'], borderWidth: borderSize / 2 },
         style
       ]}
+      testID={testID}
     >
       <Icon size={iconSize || _iconSize} color={iconColor} name={icon} />
     </View>

package/src/composites/wui-list-item/index.tsx

@@ -1,5 +1,13 @@
 import type { ReactNode } from 'react';
-import { View, Pressable, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  View,
+  Pressable,
+  Animated,
+  type StyleProp,
+  type ViewStyle,
+  type ImageStyle,
+  type ImageProps
+} from 'react-native';
 import { Icon } from '../../components/wui-icon';
 import { Image } from '../../components/wui-image';
 import { LoadingSpinner } from '../../components/wui-loading-spinner';
@@ -16,8 +24,12 @@ export interface ListItemProps {
   iconColor?: ColorType;
   iconBackgroundColor?: ColorType;
   iconBorderColor?: ColorType;
+  backgroundColor?: ColorType;
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
+  imageStyle?: StyleProp<ImageStyle>;
+  imageProps?: ImageProps;
+  imageContainerStyle?: StyleProp<ViewStyle>;
   chevron?: boolean;
   disabled?: boolean;
   loading?: boolean;
@@ -32,7 +44,10 @@ export function ListItem({
   children,
   icon,
   imageSrc,
+  imageProps,
   imageHeaders,
+  imageStyle,
+  imageContainerStyle,
   iconColor = 'fg-200',
   iconBackgroundColor,
   iconBorderColor = 'gray-glass-005',
@@ -42,28 +57,42 @@ export function ListItem({
   onPress,
   style,
   contentStyle,
-  testID
+  testID,
+  backgroundColor = 'gray-glass-002'
 }: ListItemProps) {
   const Theme = useTheme();
   const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
-    Theme['gray-glass-002'],
+    Theme[backgroundColor],
     Theme['gray-glass-010']
   );
 
   function visualTemplate() {
     if (imageSrc) {
       return (
-        <View style={[styles.imageContainer, { borderColor: Theme['gray-glass-005'] }]}>
+        <View
+          style={[
+            styles.imageContainer,
+            { borderColor: Theme['gray-glass-005'] },
+            imageContainerStyle
+          ]}
+        >
           <Image
-            source={imageSrc}
+            {...imageProps}
             headers={imageHeaders}
-            style={[styles.image, (disabled || loading) && styles.disabledImage]}
+            source={imageSrc}
+            style={[styles.image, (disabled || loading) && styles.disabledImage, imageStyle]}
           />
         </View>
       );
     } else if (icon) {
       return (
-        <View style={[styles.imageContainer, { borderColor: Theme[iconBorderColor] }]}>
+        <View
+          style={[
+            styles.imageContainer,
+            { borderColor: Theme[iconBorderColor] },
+            imageContainerStyle
+          ]}
+        >
           <IconBox
             icon={icon}
             iconColor={iconColor}

package/src/composites/wui-list-social/styles.ts

@@ -14,7 +14,7 @@ export default StyleSheet.create({
   rightPlaceholder: {
     width: 40,
     height: 40,
-    borderRadius: 100
+    borderRadius: BorderRadius.full
   },
   disabledLogo: {
     opacity: 0.4

package/src/composites/wui-list-token/index.tsx

@@ -50,10 +50,7 @@ export function ListToken({
       >
         <FlexView flexDirection="row" alignItems="center">
           {imageSrc ? (
-            <Image
-              source={imageSrc}
-              style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}
-            />
+            <Image source={imageSrc} style={styles.image} />
           ) : (
             <FlexView
               style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}

package/src/composites/wui-network-button/styles.ts

@@ -21,8 +21,7 @@ export default StyleSheet.create({
     height: 24,
     width: 24,
     borderRadius: BorderRadius.full,
-    borderWidth: 2,
-    paddingLeft: Spacing['4xs']
+    borderWidth: 2
   },
   imageDisabled: {
     opacity: 0.4

package/src/composites/wui-network-image/index.tsx

@@ -1,9 +1,8 @@
-import { Path, Svg, Image, Defs, Pattern } from 'react-native-svg';
+import { Path, Svg, Image, Defs, Pattern, G } from 'react-native-svg';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
 import type { SizeType } from '../../utils/TypesUtil';
-import { Icon } from '../../components/wui-icon';
-import { FlexView } from '../../layout/wui-flex';
+import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder';
 import { PathLg, PathNormal, PathSmall, PathXS } from './styles';
 
 export interface NetworkImageProps {
@@ -31,6 +30,13 @@ const sizeToHeight = {
   xs: 20
 };
 
+const sizeToIconSize = {
+  lg: 24,
+  md: 16,
+  sm: 14,
+  xs: 12
+};
+
 export function NetworkImage({
   imageSrc,
   imageHeaders,
@@ -44,42 +50,52 @@ export function NetworkImage({
   const Theme = useTheme();
   const svgStroke = selected ? Theme['accent-100'] : Theme['gray-glass-010'];
   const opacity = disabled ? 0.5 : 1;
+  const containerSize = sizeToHeight[size];
+  const iconSize = sizeToIconSize[size];
 
   return (
     <Svg
-      width={sizeToHeight[size]}
-      height={sizeToHeight[size]}
+      width={containerSize}
+      height={containerSize}
       stroke={borderColor ?? svgStroke}
       strokeWidth={borderWidth}
       style={style}
     >
-      <Defs>
-        <Pattern id="image-pattern">
-          {imageSrc ? (
-            <Image
-              height={sizeToHeight[size]}
-              width={sizeToHeight[size]}
-              opacity={opacity}
-              href={{ uri: imageSrc, headers: imageHeaders }}
-            />
-          ) : (
-            <FlexView
-              alignItems="center"
-              justifyContent="center"
-              // eslint-disable-next-line react-native/no-inline-styles
-              style={{
-                height: sizeToHeight[size],
-                width: sizeToHeight[size],
-                backgroundColor: 'transparent'
-              }}
+      {imageSrc ? (
+        <>
+          <Defs>
+            <Pattern
+              id="image-pattern"
+              width={containerSize}
+              height={containerSize}
+              patternUnits="userSpaceOnUse"
             >
-              <Icon name="networkPlaceholder" size={size} color="fg-200" />
-            </FlexView>
-          )}
-        </Pattern>
-      </Defs>
-      {!imageSrc && <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />}
-      <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
+              <Image
+                height={containerSize}
+                width={containerSize}
+                opacity={opacity}
+                href={{ uri: imageSrc, headers: imageHeaders }}
+              />
+            </Pattern>
+          </Defs>
+          <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
+        </>
+      ) : (
+        <>
+          <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />
+          <G
+            transform={`translate(${(containerSize - iconSize) / 2}, ${
+              (containerSize - iconSize) / 2
+            })`}
+          >
+            <NetworkPlaceholderSvg
+              fill={selected ? Theme['accent-100'] : Theme['fg-200']}
+              width={iconSize}
+              height={iconSize}
+            />
+          </G>
+        </>
+      )}
     </Svg>
   );
 }