@umituz/react-native-auth 2.5.6 → 2.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.6",
+  "version": "2.5.9",
   "description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design with dependency injection, configurable validation, and comprehensive error handling.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/AuthBottomSheet.tsx

@@ -13,7 +13,6 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { useLocalization } from "@umituz/react-native-localization";
-import { X } from "lucide-react-native";
 import { useAuthModalStore } from "../stores/authModalStore";
 import { useAuth } from "../hooks/useAuth";
 import { LoginForm } from "./LoginForm";
@@ -105,7 +104,9 @@ export const AuthBottomSheet: React.FC<AuthBottomSheetProps> = ({
           onPress={handleClose}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
-          <X size={24} color={tokens.colors.textSecondary} />
+          <Text style={[styles.closeIcon, { color: tokens.colors.textSecondary }]}>
+            ✕
+          </Text>
         </TouchableOpacity>
 
         <View style={styles.header}>
@@ -156,6 +157,10 @@ const styles = StyleSheet.create({
     padding: 8,
     zIndex: 10,
   },
+  closeIcon: {
+    fontSize: 24,
+    fontWeight: "400",
+  },
   header: {
     alignItems: "center",
     marginBottom: 24,

package/src/presentation/components/ProfileSection.tsx

@@ -14,6 +14,7 @@ export interface ProfileSectionConfig {
     isAnonymous: boolean;
     avatarUrl?: string;
     accountSettingsRoute?: string;
+    benefits?: string[]; // App-specific benefits for anonymous users to encourage sign-in
 }
 
 export interface ProfileSectionProps {
@@ -111,6 +112,22 @@ export const ProfileSection: React.FC<ProfileSectionProps> = ({
                         { borderTopColor: tokens.colors.border },
                     ]}
                 >
+                    {/* Benefits List */}
+                    {profile.benefits && profile.benefits.length > 0 && (
+                        <View style={styles.benefitsContainer}>
+                            {profile.benefits.map((benefit, index) => (
+                                <View key={index} style={styles.benefitItem}>
+                                    <Text style={[styles.benefitBullet, { color: tokens.colors.primary }]}>
+                                        ✓
+                                    </Text>
+                                    <Text style={[styles.benefitText, { color: tokens.colors.textSecondary }]}>
+                                        {benefit}
+                                    </Text>
+                                </View>
+                            ))}
+                        </View>
+                    )}
+
                     <TouchableOpacity
                         style={[
                             styles.ctaButton,
@@ -176,6 +193,25 @@ const styles = StyleSheet.create({
         paddingTop: 12,
         borderTopWidth: 1,
     },
+    benefitsContainer: {
+        marginBottom: 16,
+        gap: 8,
+    },
+    benefitItem: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 8,
+    },
+    benefitBullet: {
+        fontSize: 16,
+        fontWeight: "600",
+        marginTop: 2,
+    },
+    benefitText: {
+        flex: 1,
+        fontSize: 14,
+        lineHeight: 20,
+    },
     ctaButton: {
         paddingVertical: 12,
         borderRadius: 8,

package/src/presentation/screens/AccountScreen.tsx

@@ -12,7 +12,8 @@ import { AccountActions, type AccountActionsConfig } from "../components/Account
 
 export interface AccountScreenConfig {
     profile: ProfileSectionConfig;
-    accountActions: AccountActionsConfig;
+    accountActions?: AccountActionsConfig;
+    isAnonymous: boolean;
 }
 
 export interface AccountScreenProps {
@@ -27,9 +28,17 @@ export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
             style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
             contentContainerStyle={styles.content}
         >
-            <ProfileSection profile={config.profile} />
-            <View style={styles.divider} />
-            <AccountActions config={config.accountActions} />
+            <ProfileSection
+                profile={config.profile}
+                onSignIn={config.profile.isAnonymous ? config.accountActions?.onLogout : undefined}
+            />
+
+            {!config.isAnonymous && config.accountActions && (
+                <>
+                    <View style={styles.divider} />
+                    <AccountActions config={config.accountActions} />
+                </>
+            )}
         </ScrollView>
     );
 };