@umituz/react-native-design-system 2.6.30 → 2.6.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.30",
+  "version": "2.6.32",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/AtomicButton.tsx

@@ -18,6 +18,7 @@ export interface AtomicButtonProps {
   disabled?: boolean;
   loading?: boolean;
   icon?: IconName;
+  iconPosition?: 'left' | 'right';
   fullWidth?: boolean;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
@@ -34,6 +35,7 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
   disabled = false,
   loading = false,
   icon,
+  iconPosition = 'left',
   fullWidth = false,
   style,
   textStyle,
@@ -197,19 +199,19 @@ export const AtomicButton: React.FC<AtomicButtonProps> = React.memo(({
       disabled={isDisabled}
       testID={testID}
     >
-      <View style={styles.content}>
+      <View style={[styles.content, iconPosition === 'right' && styles.rowReverse]}>
         {loading ? (
           <AtomicSpinner
             size="sm"
             color={iconColor as string}
-            style={styles.icon}
+            style={iconPosition === 'right' ? styles.iconRight : styles.iconLeft}
           />
         ) : showIcon ? (
           <AtomicIcon
             name={icon}
             customSize={config.iconSize}
             customColor={iconColor as string | undefined}
-            style={styles.icon}
+            style={iconPosition === 'right' ? styles.iconRight : styles.iconLeft}
           />
         ) : null}
 
@@ -233,6 +235,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  rowReverse: {
+    flexDirection: 'row-reverse',
+  },
   fullWidth: {
     width: '100%',
   },
@@ -242,9 +247,12 @@ const styles = StyleSheet.create({
   disabledText: {
     opacity: 0.7,
   },
-  icon: {
+  iconLeft: {
     marginRight: 8,
   },
+  iconRight: {
+    marginLeft: 8,
+  },
 });
 
 export type { AtomicButtonProps as ButtonProps };

package/src/molecules/navigation/utils/ScreenFactory.ts

@@ -1,8 +1,10 @@
 import React from "react";
+import { TouchableOpacity } from "react-native";
 import type { ParamListBase } from "@react-navigation/native";
 import type {
   BottomTabScreenProps,
   BottomTabNavigationOptions,
+  BottomTabBarButtonProps,
 } from "@react-navigation/bottom-tabs";
 import type {
   TabScreen,
@@ -13,7 +15,22 @@ import type {
 import { LabelProcessor } from "./LabelProcessor";
 import { IconRenderer } from "./IconRenderer";
 
+const TabBarButton: React.FC<BottomTabBarButtonProps> = (props) => {
+  const { children, onPress, onLongPress, accessibilityState, style } = props;
 
+  return React.createElement(
+    TouchableOpacity,
+    {
+      onPress: onPress ?? undefined,
+      onLongPress: onLongPress ?? undefined,
+      activeOpacity: 0.7,
+      accessibilityRole: "button",
+      accessibilityState,
+      style: [{ flex: 1, alignItems: "center", justifyContent: "center" }, style],
+    },
+    children
+  );
+};
 
 export function createTabScreen<T extends ParamListBase = ParamListBase>(
   screen: TabScreen<T>,
@@ -34,6 +51,7 @@ export function createTabScreen<T extends ParamListBase = ParamListBase>(
       tabBarLabel: isFab ? "" : processedLabel,
       title: isFab ? "" : processedLabel,
       tabBarShowLabel: isFab ? false : undefined,
+      tabBarButton: (buttonProps) => React.createElement(TabBarButton, buttonProps),
       tabBarIcon: ({ focused }: { focused: boolean }) => {
         const iconName = IconRenderer.getIconName(
           screen.name,