@reown/appkit-ui-react-native 0.0.0-chore-solflare-20250730210452 → 0.0.0-chore-spring-effect-20250909214820

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reown/appkit-ui-react-native",
-  "version": "0.0.0-chore-solflare-20250730210452",
+  "version": "0.0.0-chore-spring-effect-20250909214820",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
@@ -39,7 +39,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-chore-solflare-20250730210452",
+    "@reown/appkit-common-react-native": "0.0.0-chore-spring-effect-20250909214820",
     "polished": "4.3.1",
     "qrcode": "1.5.3"
   },

package/src/assets/svg/Reown.tsx

@@ -0,0 +1,40 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+const SvgReown = (props: SvgProps) => (
+  <Svg viewBox="0 0 60 16" fill="none" {...props}>
+    <Path
+      d="M9.3335 4.66667C9.3335 2.08934 11.4229 0 14.0002 0H20.6669C23.2442 0 25.3335 2.08934 25.3335 4.66667V11.3333C25.3335 13.9106 23.2442 16 20.6669 16H14.0002C11.4229 16 9.3335 13.9106 9.3335 11.3333V4.66667Z"
+      fill="#363636"
+    />
+    <Path d="M15.6055 11.0003L17.9448 4.66699H18.6316L16.2923 11.0003H15.6055Z" fill="#F6F6F6" />
+    <Path
+      d="M0 4.33333C0 1.9401 1.9401 0 4.33333 0C6.72657 0 8.66669 1.9401 8.66669 4.33333V11.6667C8.66669 14.0599 6.72657 16 4.33333 16C1.9401 16 0 14.0599 0 11.6667V4.33333Z"
+      fill="#363636"
+    />
+    <Path d="M3.9165 9.99934V9.16602H4.74983V9.99934H3.9165Z" fill="#F6F6F6" />
+    <Path
+      d="M26 8C26 3.58172 29.3517 0 33.4863 0H52.5137C56.6483 0 60 3.58172 60 8C60 12.4183 56.6483 16 52.5137 16H33.4863C29.3517 16 26 12.4183 26 8Z"
+      fill="#363636"
+    />
+    <Path
+      d="M49.3687 9.95834V6.26232H50.0213V6.81966C50.256 6.40899 50.7326 6.16699 51.2606 6.16699C52.0599 6.16699 52.6173 6.67299 52.6173 7.65566V9.95834H51.972V7.69234C51.972 7.04696 51.6053 6.70966 51.07 6.70966C50.4906 6.70966 50.0213 7.17168 50.0213 7.82433V9.95834H49.3687Z"
+      fill="#F6F6F6"
+    />
+    <Path
+      d="M45.2538 9.95773L44.5718 6.26172H45.1877L45.6717 9.31242L46.3098 7.30306H46.9184L47.5491 9.29041L48.0404 6.26172H48.6564L47.9744 9.95773H47.2411L46.6178 8.03641L45.9871 9.95773H45.2538Z"
+      fill="#F6F6F6"
+    />
+    <Path
+      d="M42.3709 10.0536C41.2489 10.0536 40.5889 9.21765 40.5889 8.1103C40.5889 7.01035 41.2489 6.16699 42.3709 6.16699C43.4929 6.16699 44.1529 7.01035 44.1529 8.1103C44.1529 9.21765 43.4929 10.0536 42.3709 10.0536ZM42.3709 9.51096C43.1775 9.51096 43.4856 8.82164 43.4856 8.10296C43.4856 7.39163 43.1775 6.70966 42.3709 6.70966C41.5642 6.70966 41.2562 7.39163 41.2562 8.10296C41.2562 8.82164 41.5642 9.51096 42.3709 9.51096Z"
+      fill="#F6F6F6"
+    />
+    <Path
+      d="M38.2805 10.0536C37.1952 10.0536 36.5132 9.22499 36.5132 8.1103C36.5132 7.00302 37.1952 6.16699 38.2805 6.16699C39.1972 6.16699 40.0038 6.68766 39.9159 8.27896H37.1805C37.2319 8.96103 37.5472 9.5183 38.2805 9.5183C38.7718 9.5183 39.0945 9.21765 39.2045 8.87299H39.8499C39.7472 9.48903 39.1679 10.0536 38.2805 10.0536ZM37.1952 7.78765H39.2852C39.2338 7.04696 38.8892 6.70232 38.2805 6.70232C37.6132 6.70232 37.2832 7.18635 37.1952 7.78765Z"
+      fill="#F6F6F6"
+    />
+    <Path
+      d="M33.3828 9.95773V6.26172H34.0501V6.88506C34.2848 6.47439 34.6882 6.26172 35.1061 6.26172H35.9935V6.88506H35.0548C34.4682 6.88506 34.0501 7.26638 34.0501 8.00706V9.95773H33.3828Z"
+      fill="#F6F6F6"
+    />
+  </Svg>
+);
+export default SvgReown;

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type StyleProp, type ViewStyle, KeyboardAvoidingView, Platform } from 'react-native';
+import { type StyleProp, type ViewStyle, View } from 'react-native';
 
 import { useTheme } from '../../hooks/useTheme';
 import styles from './styles';
@@ -13,9 +13,7 @@ export function Card({ children, style }: CardProps) {
   const Theme = useTheme();
 
   return (
-    <KeyboardAvoidingView
-      behavior="padding"
-      enabled={Platform.OS === 'ios'}
+    <View
       style={[
         styles.container,
         { backgroundColor: Theme['bg-100'], borderColor: Theme['gray-glass-015'] },
@@ -23,6 +21,6 @@ export function Card({ children, style }: CardProps) {
       ]}
     >
       {children}
-    </KeyboardAvoidingView>
+    </View>
   );
 }

package/src/components/wui-card/styles.ts

@@ -4,7 +4,7 @@ import { BorderRadius } from '../../utils/ThemeUtil';
 export default StyleSheet.create({
   container: {
     borderRadius: BorderRadius.l,
-    borderWidth: StyleSheet.hairlineWidth,
+    borderWidth: 0.5,
     borderBottomWidth: 0,
     overflow: 'hidden'
   }

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

@@ -49,6 +49,7 @@ import PaperplaneSvg from '../../assets/svg/Paperplane';
 import QrCodeSvg from '../../assets/svg/QrCode';
 import RecycleHorizontalSvg from '../../assets/svg/RecycleHorizontal';
 import RefreshSvg from '../../assets/svg/Refresh';
+import ReownSvg from '../../assets/svg/Reown';
 import SearchSvg from '../../assets/svg/Search';
 import SettingsSvg from '../../assets/svg/Settings';
 import SwapHorizontalSvg from '../../assets/svg/SwapHorizontal';
@@ -113,6 +114,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   qrCode: QrCodeSvg,
   recycleHorizontal: RecycleHorizontalSvg,
   refresh: RefreshSvg,
+  reown: ReownSvg,
   search: SearchSvg,
   settings: SettingsSvg,
   swapHorizontal: SwapHorizontalSvg,

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

@@ -3,8 +3,9 @@ import {
   useWindowDimensions,
   Modal as RNModal,
   type ModalProps as RNModalProps,
-  TouchableOpacity,
-  Animated
+  Animated,
+  Pressable,
+  View
 } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
 import styles from './styles';
@@ -17,10 +18,11 @@ export type ModalProps = Pick<
   onBackdropPress?: () => void;
 };
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 export function Modal({ visible, onBackdropPress, onRequestClose, testID, children }: ModalProps) {
-  const Theme = useTheme();
   const { height } = useWindowDimensions();
-
+  const Theme = useTheme();
   const backdropOpacity = useRef(new Animated.Value(0)).current;
   const translateY = useRef(new Animated.Value(height)).current;
   const [showBackdrop, setShowBackdrop] = useState(false);
@@ -29,7 +31,8 @@ export function Modal({ visible, onBackdropPress, onRequestClose, testID, childr
 
   const onContentLayout = (event: any) => {
     const { height: measuredHeight } = event.nativeEvent.layout;
-    setContentHeight(measuredHeight);
+
+    setContentHeight(measuredHeight > height ? height : measuredHeight);
   };
 
   // Handle modal visibility
@@ -77,19 +80,17 @@ export function Modal({ visible, onBackdropPress, onRequestClose, testID, childr
 
       modalAnimation = Animated.spring(translateY, {
         toValue: targetY,
-        damping: 25,
-        stiffness: 220,
+        damping: 50,
+        stiffness: 300,
         mass: 1,
         useNativeDriver: true
       });
       modalAnimation.start();
     } else if (!visible && modalVisible) {
-      // Hide modal to the bottom of the screen
-      modalAnimation = Animated.spring(translateY, {
+      // Hide modal to the bottom of the screen. Not using spring as it blocks the UI for a bit when closed
+      modalAnimation = Animated.timing(translateY, {
         toValue: height,
-        damping: 23,
-        stiffness: 260,
-        mass: 1,
+        duration: 150,
         useNativeDriver: true
       });
       modalAnimation.start(() => {
@@ -111,31 +112,24 @@ export function Modal({ visible, onBackdropPress, onRequestClose, testID, childr
   }, [modalVisible, translateY, backdropOpacity, height]);
 
   return (
-    <>
-      {showBackdrop && (
-        <Animated.View style={[styles.outerBackdrop, { opacity: backdropOpacity }]} />
-      )}
-      <RNModal
-        visible={modalVisible}
-        transparent
-        animationType="none"
-        statusBarTranslucent
-        onRequestClose={onRequestClose}
-        testID={testID}
-      >
-        {showBackdrop && (
-          <TouchableOpacity
-            style={styles.innerBackdropTouchable}
-            activeOpacity={1}
-            onPress={onBackdropPress}
-          />
-        )}
-        <Animated.View
-          style={[styles.modal, { backgroundColor: Theme['bg-100'], transform: [{ translateY }] }]}
-        >
-          <Animated.View onLayout={onContentLayout}>{children}</Animated.View>
-        </Animated.View>
-      </RNModal>
-    </>
+    <RNModal
+      visible={modalVisible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={onRequestClose}
+      testID={testID}
+    >
+      {showBackdrop ? (
+        <AnimatedPressable
+          style={[styles.backdrop, { opacity: backdropOpacity }]}
+          onPress={onBackdropPress}
+        />
+      ) : null}
+      <Animated.View style={[styles.modal, { transform: [{ translateY }] }]}>
+        <Animated.View onLayout={onContentLayout}>{children}</Animated.View>
+        <View style={[styles.bottomBackground, { backgroundColor: Theme['bg-100'] }]} />
+      </Animated.View>
+    </RNModal>
   );
 }

package/src/components/wui-modal/styles.ts

@@ -2,18 +2,13 @@ import { StyleSheet } from 'react-native';
 import { BorderRadius } from '../../utils/ThemeUtil';
 
 export default StyleSheet.create({
-  outerBackdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+  backdrop: {
+    flexGrow: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.5)'
   },
-  innerBackdropTouchable: {
-    flexGrow: 1
-  },
   modal: {
+    backgroundColor: 'transparent',
+    borderWidth: 0,
     borderTopLeftRadius: BorderRadius.l,
     borderTopRightRadius: BorderRadius.l,
     position: 'absolute',
@@ -21,5 +16,8 @@ export default StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0
+  },
+  bottomBackground: {
+    flexGrow: 1
   }
 });

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

@@ -1,66 +1,132 @@
-import { Svg, Rect } from 'react-native-svg';
-import { Animated, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { memo, useEffect, useRef, useState } from 'react';
 import { useTheme } from '../../hooks/useTheme';
 
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
+type PercentString = `${number}%`;
+type ShimmerDimension = number | PercentString;
 
 export interface ShimmerProps {
-  width?: number | string;
-  height?: number | string;
+  width?: ShimmerDimension;
+  height?: ShimmerDimension;
   duration?: number;
   borderRadius?: number;
   backgroundColor?: string;
   foregroundColor?: string;
+  highlightWidthRatio?: number;
+  highlightOpacity?: number;
+  angle?: number; // in degrees
   style?: StyleProp<ViewStyle>;
 }
 
-export const Shimmer = ({
+function Shimmer_({
   width = 200,
   height = 200,
   duration = 1000,
   borderRadius = 0,
   backgroundColor,
   foregroundColor,
+  highlightWidthRatio = 0.3,
+  highlightOpacity = 0.5,
+  angle = 20,
   style
-}: ShimmerProps) => {
-  const animatedValue = new Animated.Value(0);
+}: ShimmerProps) {
   const Theme = useTheme();
 
-  const animatedProps = {
-    fill: animatedValue.interpolate({
-      inputRange: [0, 0.5, 1],
-      outputRange: [
-        backgroundColor ?? Theme['bg-200'],
-        foregroundColor ?? Theme['bg-300'],
-        backgroundColor ?? Theme['bg-200']
-      ]
-    }),
+  const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
+  const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);
+
+  const translateRef = useRef(new Animated.Value(0));
+  const loopRef = useRef<Animated.CompositeAnimation | null>(null);
+
+  useEffect(() => {
+    if (!measuredWidth) {
+      return undefined;
+    }
+    const translateX = translateRef.current;
+    translateX.setValue(0);
+    const timing = Animated.timing(translateX, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true
+    });
+    const loop = Animated.loop(timing);
+    loopRef.current = loop;
+
+    loop.start();
+
+    return () => {
+      loop.stop();
+      if (loopRef.current === loop) {
+        loopRef.current = null;
+      }
+      translateX.stopAnimation(() => {
+        translateX.setValue(0);
+      });
+    };
+  }, [duration, measuredWidth]);
+
+  const baseColor = backgroundColor ?? Theme['bg-200'];
+  const highlightColor = foregroundColor ?? Theme['bg-300'];
+
+  const onLayout = (event: any) => {
+    const { width: w, height: h } = event.nativeEvent.layout;
+    // Update measurements whenever they change to adapt to dynamic layout/orientation
+    if (measuredWidth == null || Math.abs(w - measuredWidth) > 0.5) {
+      setMeasuredWidth(w);
+    }
+    if (measuredHeight == null || Math.abs(h - measuredHeight) > 0.5) {
+      setMeasuredHeight(h);
+    }
+  };
+
+  // Compute animated translateX only if we have width
+  let animatedTranslateX: any = 0;
+  let bandWidth = 0;
+  if (measuredWidth) {
+    bandWidth = Math.max(8, measuredWidth * highlightWidthRatio);
+    const travel = measuredWidth + bandWidth * 2;
+    animatedTranslateX = translateRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-bandWidth, travel - bandWidth]
+    });
+  }
+
+  const containerStyle: ViewStyle = {
     width,
     height,
-    x: 0,
-    y: 0,
-    rx: borderRadius,
-    ry: borderRadius
+    borderRadius,
+    overflow: 'hidden',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Theme['bg-300'],
+    backgroundColor: baseColor
   };
 
-  Animated.loop(
-    Animated.timing(animatedValue, {
-      toValue: 1,
-      duration,
-      useNativeDriver: false
-    })
-  ).start();
+  const bandStyle: ViewStyle = {
+    position: 'absolute',
+    top: measuredHeight ? -measuredHeight * 0.25 : 0,
+    bottom: measuredHeight ? -measuredHeight * 0.25 : 0,
+    width: bandWidth,
+    backgroundColor: highlightColor,
+    opacity: highlightOpacity
+  };
 
   return (
-    <Svg
-      width={width}
-      height={height}
-      style={[
-        { borderWidth: StyleSheet.hairlineWidth, borderColor: Theme['bg-300'], borderRadius },
-        style
-      ]}
-    >
-      <AnimatedRect {...animatedProps} />
-    </Svg>
+    <View onLayout={onLayout} style={[containerStyle, style]}>
+      {measuredWidth && measuredHeight ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            bandStyle,
+            {
+              transform: [{ translateX: animatedTranslateX }, { rotate: `${angle}deg` }]
+            }
+          ]}
+        />
+      ) : null}
+    </View>
   );
-};
+}
+
+export const Shimmer = memo(Shimmer_, () => {
+  return true;
+});

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

@@ -114,11 +114,11 @@ export function AccountButton({
           borderWidth={2}
           style={[styles.image, !avatarSrc && styles.avatarPlaceholder]}
         />
-        {address && (
+        {address ? (
           <Text variant="paragraph-500" color="fg-200" style={styles.address}>
             {formattedAddress}
           </Text>
-        )}
+        ) : null}
       </View>
     </AnimatedPressable>
   );

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

@@ -90,15 +90,15 @@ export function Button({
       {...rest}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-        {iconLeft && (
+        {iconLeft ? (
           <Icon
             color={iconColor}
             name={iconLeft}
             size={iconSize}
             style={[styles.iconLeft, iconStyle]}
           />
-        )}
-        {loading && <LoadingSpinner color={iconColor} size="md" />}
+        ) : null}
+        {loading ? <LoadingSpinner color={iconColor} size="md" /> : null}
         {!loading &&
           (typeof children === 'string' ? (
             <Text
@@ -110,14 +110,14 @@ export function Button({
           ) : (
             children
           ))}
-        {iconRight && (
+        {iconRight ? (
           <Icon
             color={iconColor}
             name={iconRight}
             size={iconSize}
             style={[styles.iconRight, iconStyle]}
           />
-        )}
+        ) : null}
       </FlexView>
     </AnimatedPressable>
   );

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

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
 import { Text } from '../../components/wui-text';
 import { IconBox } from '../wui-icon-box';
@@ -9,6 +9,7 @@ import { NetworkImage } from '../wui-network-image';
 import { WalletImage } from '../wui-wallet-image';
 import styles, { getBackgroundColor, ITEM_HEIGHT, ITEM_WIDTH } from './styles';
 import { UiUtil } from '../../utils/UiUtil';
+import { FlexView } from '../../layout/wui-flex';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
@@ -28,7 +29,7 @@ export interface CardSelectProps {
   testID?: string;
 }
 
-function _CardSelect({
+function CardSelect_({
   name,
   type = 'wallet',
   imageSrc,
@@ -43,6 +44,7 @@ function _CardSelect({
   const Theme = useTheme();
   const normalbackgroundColor = getBackgroundColor({ selected, disabled, pressed: false });
   const pressedBackgroundColor = getBackgroundColor({ selected, disabled, pressed: true });
+  const Image = useMemo(() => (type === 'wallet' ? WalletImage : NetworkImage), [type]);
 
   const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
     Theme[normalbackgroundColor],
@@ -51,54 +53,52 @@ function _CardSelect({
 
   const textColor = disabled ? 'fg-300' : selected ? 'accent-100' : 'fg-100';
 
-  const Image = type === 'wallet' ? WalletImage : NetworkImage;
-
-  const templateInstalled = () => {
-    if (!installed) return null;
-
-    return (
-      <IconBox
-        icon="checkmark"
-        iconSize="xs"
-        iconColor={'success-100'}
-        border
-        borderSize={6}
-        borderColor="bg-150"
-        background
-        backgroundColor="icon-box-bg-success-100"
-        size="sm"
-        style={styles.installedBox}
-      />
-    );
-  };
-
   return (
-    <AnimatedPressable
-      onPress={onPress}
-      onPressIn={setEndValue}
-      onPressOut={setStartValue}
-      disabled={disabled}
-      style={[styles.container, { backgroundColor: animatedValue }, style]}
-      testID={testID}
-    >
-      <View>
-        <Image
-          imageSrc={imageSrc}
-          imageHeaders={imageHeaders}
-          size="md"
-          style={disabled && styles.disabledImage}
-          selected={selected}
-          disabled={disabled}
-        />
-        {templateInstalled()}
-      </View>
-      <Text variant="tiny-500" color={textColor} style={styles.text} numberOfLines={1}>
-        {UiUtil.getWalletName(name)}
-      </Text>
-    </AnimatedPressable>
+    <FlexView style={style} alignItems="center" justifyContent="center">
+      <AnimatedPressable
+        onPress={onPress}
+        onPressIn={setEndValue}
+        onPressOut={setStartValue}
+        disabled={disabled}
+        style={[styles.container, { backgroundColor: animatedValue }]}
+        testID={testID}
+      >
+        <View>
+          <Image
+            imageSrc={imageSrc}
+            imageHeaders={imageHeaders}
+            size="md"
+            style={disabled ? styles.disabledImage : null}
+            selected={selected}
+            disabled={disabled}
+          />
+          {installed ? (
+            <IconBox
+              icon="checkmark"
+              iconSize="xs"
+              iconColor={'success-100'}
+              border
+              borderSize={6}
+              borderColor="bg-150"
+              background
+              backgroundColor="icon-box-bg-success-100"
+              size="sm"
+              style={styles.installedBox}
+            />
+          ) : null}
+        </View>
+        <Text variant="tiny-500" color={textColor} style={styles.text} numberOfLines={1}>
+          {UiUtil.getWalletName(name)}
+        </Text>
+      </AnimatedPressable>
+    </FlexView>
   );
 }
 
-export const CardSelect = memo(_CardSelect, (prevProps, nextProps) => {
-  return prevProps.name === nextProps.name;
+export const CardSelect = memo(CardSelect_, (prevProps, nextProps) => {
+  return (
+    prevProps.name === nextProps.name &&
+    prevProps.imageSrc === nextProps.imageSrc &&
+    prevProps.selected === nextProps.selected
+  );
 });

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

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import { BorderRadius, Spacing, WalletImageSize } from '../../utils/ThemeUtil';
 import { useTheme } from '../../hooks/useTheme';
@@ -11,7 +12,7 @@ export interface CardSelectLoaderProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export function CardSelectLoader({ style }: CardSelectLoaderProps) {
+export function CardSelectLoader_({ style }: CardSelectLoaderProps) {
   const Theme = useTheme();
 
   return (
@@ -34,3 +35,6 @@ export function CardSelectLoader({ style }: CardSelectLoaderProps) {
     </FlexView>
   );
 }
+export const CardSelectLoader = memo(CardSelectLoader_, () => {
+  return true;
+});

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

@@ -80,7 +80,7 @@ export function Chip({
       onPressOut={onPressOut}
       onPress={handlePress}
     >
-      {imageSrc && (
+      {imageSrc ? (
         <Image
           style={[
             styles.image,
@@ -90,22 +90,22 @@ export function Chip({
           ]}
           source={imageSrc}
         />
-      )}
-      {leftIcon && <Icon name={leftIcon} color={themedTextColor as ColorType} />}
+      ) : null}
+      {leftIcon ? <Icon name={leftIcon} color={themedTextColor as ColorType} /> : null}
       <Text
         variant={size === 'md' ? 'paragraph-600' : 'small-600'}
         style={[styles.link, { color: Theme[themedTextColor] }]}
       >
         {label}
       </Text>
-      {rightIcon && (
+      {rightIcon ? (
         <Icon
           name={rightIcon}
           size={iconSize}
           color={themedTextColor as ColorType}
           style={styles.icon}
         />
-      )}
+      ) : null}
     </AnimatedPressable>
   );
 }