@reown/appkit-ui-react-native 2.0.0-alpha.2 → 2.0.0-alpha.3

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

@@ -72,14 +72,14 @@ export function Tabs({ tabs, onTabChange, style }: TabsProps) {
             key={isString ? option : option.label}
             style={[styles.tabItem, { width: tabWidth }]}
           >
-            {!isString && option.icon && (
+            {!isString && option.icon ? (
               <Icon
                 name={option.icon}
                 size="xs"
                 color={isActive ? 'fg-100' : 'fg-200'}
                 style={styles.tabIcon}
               />
-            )}
+            ) : null}
             <Text variant="small-600" color={isActive ? 'fg-100' : 'fg-200'}>
               {isString ? option : option.label}
             </Text>

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

@@ -74,9 +74,9 @@ export function Toggle({
         ) : (
           title
         )}
-        {canClose && (
+        {canClose ? (
           <IconBox icon={isOpen ? 'chevronTop' : 'chevronBottom'} size="sm" iconColor="fg-200" />
-        )}
+        ) : null}
       </Pressable>
 
       <Animated.View style={[styles.contentWrapper, { height: animatedHeight }]}>

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

@@ -59,7 +59,7 @@ export function TokenButton({
           source={imageUrl}
           style={[styles.image, { backgroundColor: Theme['inverse-100'] }]}
         />
-        {renderClip && <View style={styles.clipContainer}>{renderClip}</View>}
+        {renderClip ? <View style={styles.clipContainer}>{renderClip}</View> : null}
       </View>
     ),
     <Text key="text">{text}</Text>
@@ -75,7 +75,9 @@ export function TokenButton({
       testID={testID}
     >
       {inverse ? content.reverse() : content}
-      {chevron && <Icon name="chevronBottom" size="xxs" color="fg-150" style={styles.chevron} />}
+      {chevron ? (
+        <Icon name="chevronBottom" size="xxs" color="fg-150" style={styles.chevron} />
+      ) : null}
     </Button>
   );
 }

package/src/composites/wui-transaction-visual/index.tsx

@@ -32,13 +32,13 @@ export function TransactionVisual({ images, networkSrc, isAllNFT }: TransactionV
           <Icon name={isFirstNFT ? 'nftPlaceholder' : 'coinPlaceholder'} size="sm" color="fg-200" />
         </FlexView>
       )}
-      {hasOneImage && firstImage?.url && (
+      {hasOneImage && firstImage?.url ? (
         <Image
           source={firstImage.url}
           style={[styles.image, firstImage?.type === 'NFT' && styles.imageNft, { backgroundColor }]}
         />
-      )}
-      {hasTwoImages && firstImage?.url && secondImage?.url && (
+      ) : null}
+      {hasTwoImages && firstImage?.url && secondImage?.url ? (
         <FlexView flexDirection="row" padding={['0', 's', '0', '0']}>
           <FlexView style={styles.halfContainer}>
             <Image
@@ -58,7 +58,7 @@ export function TransactionVisual({ images, networkSrc, isAllNFT }: TransactionV
             />
           </FlexView>
         </FlexView>
-      )}
+      ) : null}
       <FlexView
         alignItems="center"
         justifyContent="center"

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

@@ -66,7 +66,7 @@ export function WalletImage({
   return (
     <Animated.View style={style}>
       {templateVisual()}
-      {border && (
+      {border ? (
         <View
           style={[
             styles.border,
@@ -79,7 +79,7 @@ export function WalletImage({
             }
           ]}
         />
-      )}
+      ) : null}
     </Animated.View>
   );
 }

package/src/index.ts

@@ -48,6 +48,7 @@ export { ListTransaction, type ListTransactionProps } from './composites/wui-lis
 export { ListWallet, type ListWalletProps } from './composites/wui-list-wallet';
 export { Logo, type LogoProps } from './composites/wui-logo';
 export { LogoSelect, type LogoSelectProps } from './composites/wui-logo-select';
+export { Modal, type ModalProps } from './components/wui-modal';
 export { NetworkButton, type NetworkButtonProps } from './composites/wui-network-button';
 export { NetworkImage, type NetworkImageProps } from './composites/wui-network-image';
 export { NumericKeyboard, type NumericKeyboardProps } from './composites/wui-numeric-keyboard';

package/src/layout/wui-flex/index.tsx

@@ -20,6 +20,9 @@ export interface FlexViewProps {
   flexShrink?: FlexShrinkType;
   alignItems?: FlexAlignType;
   alignSelf?: FlexAlignType;
+  rowGap?: SpacingType;
+  gap?: SpacingType;
+  columnGap?: SpacingType;
   justifyContent?: FlexJustifyContentType;
   padding?: SpacingType | SpacingType[];
   margin?: SpacingType | SpacingType[];
@@ -36,6 +39,9 @@ export function FlexView(props: FlexViewProps) {
     alignItems: props.alignItems,
     alignSelf: props.alignSelf,
     justifyContent: props.justifyContent,
+    rowGap: props.rowGap && UiUtil.getSpacingStyles(props.rowGap),
+    gap: props.gap && UiUtil.getSpacingStyles(props.gap),
+    columnGap: props.columnGap && UiUtil.getSpacingStyles(props.columnGap),
     paddingTop: props.padding && UiUtil.getSpacingStyles(props.padding, 0),
     paddingRight: props.padding && UiUtil.getSpacingStyles(props.padding, 1),
     paddingBottom: props.padding && UiUtil.getSpacingStyles(props.padding, 2),

package/src/utils/TypesUtil.ts

@@ -179,6 +179,7 @@ export type IconType =
   | 'qrCode'
   | 'recycleHorizontal'
   | 'refresh'
+  | 'reown'
   | 'search'
   | 'settings'
   | 'swapHorizontal'

package/src/utils/UiUtil.ts

@@ -4,8 +4,8 @@ import { Spacing } from './ThemeUtil';
 import type { SpacingType, TruncateOptions } from './TypesUtil';
 
 export const UiUtil = {
-  getSpacingStyles(spacing: SpacingType | SpacingType[], index: number) {
-    if (Array.isArray(spacing)) {
+  getSpacingStyles(spacing: SpacingType | SpacingType[], index?: number) {
+    if (Array.isArray(spacing) && index !== undefined) {
       return spacing[index] ? Spacing[spacing[index] as SpacingType] : undefined;
     } else if (typeof spacing === 'string') {
       return Spacing[spacing];