@umituz/react-native-settings 4.17.21 → 4.17.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.17.21",
+  "version": "4.17.23",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domain/repositories/ISettingsRepository.ts

@@ -18,6 +18,7 @@ export interface UserSettings {
   soundEnabled: boolean;
   vibrationEnabled: boolean;
   privacyMode: boolean;
+  disclaimerAccepted: boolean;
   updatedAt: Date;
 }
 

package/src/domains/appearance/presentation/components/AppearanceSection.tsx

@@ -73,7 +73,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
                             { backgroundColor: `${colors.primary}15` },
                         ]}
                     >
-                        <AtomicIcon name="droplet" size="lg" color="primary" />
+                        <AtomicIcon name="water-outline" size="lg" color="primary" />
                     </View>
                     <View style={styles.textContainer}>
                         <AtomicText
@@ -94,7 +94,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
                             </AtomicText>
                         )}
                     </View>
-                    <AtomicIcon name="chevron-right" size="md" color="secondary" />
+                    <AtomicIcon name="chevron-forward-outline" size="md" color="secondary" />
                 </View>
             </Pressable>
         </View>

package/src/domains/disclaimer/index.ts

@@ -0,0 +1,29 @@
+/**
+ * @umituz/react-native-disclaimer - Public API
+ *
+ * Disclaimer component for React Native apps
+ * Display legal notices, warnings, and important information
+ *
+ * Usage:
+ *   import { DisclaimerSetting, DisclaimerScreen } from '@umituz/react-native-disclaimer';
+ */
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { DisclaimerSetting } from './presentation/components/DisclaimerSetting';
+export type { DisclaimerSettingProps } from './presentation/components/DisclaimerSetting';
+
+export { DisclaimerCard } from './presentation/components/DisclaimerCard';
+export type { DisclaimerCardProps } from './presentation/components/DisclaimerCard';
+
+export { DisclaimerModal } from './presentation/components/DisclaimerModal';
+export type { DisclaimerModalProps } from './presentation/components/DisclaimerModal';
+
+// =============================================================================
+// PRESENTATION LAYER - Screens
+// =============================================================================
+
+export { DisclaimerScreen } from './presentation/screens/DisclaimerScreen';
+export type { DisclaimerScreenProps } from './presentation/screens/DisclaimerScreen';

package/src/domains/disclaimer/presentation/components/DisclaimerCard.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * Tests for DisclaimerCard Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { DisclaimerCard } from '../DisclaimerCard';
+
+// Mock dependencies
+jest.mock('@umituz/react-native-design-system', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+    },
+    spacing: {
+      md: 16,
+    },
+    typography: {
+      labelLarge: {
+        fontWeight: '500',
+        fontSize: 14,
+      },
+    },
+  }),
+  withAlpha: jest.fn((color: string, alpha: number) => `${color}${alpha}`),
+}));
+
+jest.mock('@umituz/react-native-design-system', () => ({
+  AtomicText: ({ children, type, color, style }: any) => (
+    <Text style={style} testID={`atomic-text-${type}-${color}`}>
+      {children}
+    </Text>
+  ),
+  AtomicIcon: ({ name, color, size, style }: any) => (
+    <Text style={style} testID={`atomic-icon-${name}-${color}-${size}`}>
+      Icon: {name}
+    </Text>
+  ),
+}));
+
+import { Text } from 'react-native';
+
+describe('DisclaimerCard', () => {
+  it('renders correctly with basic props', () => {
+    const { getByTestId, getByText } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(getByText('Test Title')).toBeTruthy();
+    expect(getByText('Test Message')).toBeTruthy();
+    expect(getByTestId('disclaimer-setting')).toBeTruthy();
+    expect(getByTestId('atomic-icon-AlertTriangle-warning')).toBeTruthy();
+    expect(getByTestId('atomic-icon-ArrowRight-secondary-sm')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={mockOnPress}
+      />
+    );
+
+    fireEvent.press(getByTestId('disclaimer-setting'));
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies correct styling with theme tokens', () => {
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    const card = getByTestId('disclaimer-setting');
+    expect(card.props.style).toContainEqual({
+      backgroundColor: '#FFF3E0',
+    });
+  });
+
+  it('renders with different icon names', () => {
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="info"
+        iconColor="#2196F3"
+        backgroundColor="#E3F2FD"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('atomic-icon-info-warning')).toBeTruthy();
+  });
+
+  it('handles long text content', () => {
+    const longTitle = 'This is a very long disclaimer title that should be handled properly';
+    const longMessage = 'This is a very long disclaimer message that should wrap properly and not break the layout';
+
+    const { getByText } = render(
+      <DisclaimerCard
+        title={longTitle}
+        shortMessage={longMessage}
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(getByText(longTitle)).toBeTruthy();
+    expect(getByText(longMessage)).toBeTruthy();
+  });
+
+  it('has correct accessibility properties', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={mockOnPress}
+      />
+    );
+
+    const touchable = getByTestId('disclaimer-setting');
+    expect(touchable.props.activeOpacity).toBe(0.7);
+  });
+
+  it('uses withAlpha utility correctly', () => {
+    const { withAlpha } = require('@umituz/react-native-design-system');
+
+    render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(withAlpha).toHaveBeenCalledWith('#FF9800', 0.2);
+    expect(withAlpha).toHaveBeenCalledWith('#FF9800', 0.4);
+  });
+
+  it('maintains correct layout structure', () => {
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    // Check that icon container has correct styles
+    expect(getByTestId('atomic-icon-AlertTriangle-warning')).toBeTruthy();
+
+    // Check that title and arrow are present
+    expect(getByTestId('atomic-icon-ArrowRight-secondary-sm')).toBeTruthy();
+  });
+
+  it('handles press events correctly', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={mockOnPress}
+      />
+    );
+
+    // Test single press
+    fireEvent.press(getByTestId('disclaimer-setting'));
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+
+    // Test multiple presses
+    fireEvent.press(getByTestId('disclaimer-setting'));
+    fireEvent.press(getByTestId('disclaimer-setting'));
+    expect(mockOnPress).toHaveBeenCalledTimes(3);
+  });
+});

package/src/domains/disclaimer/presentation/components/DisclaimerCard.tsx

@@ -0,0 +1,115 @@
+/**
+ * Disclaimer Card Component
+ * Extracted from DisclaimerSetting to follow single responsibility and 200-line rules
+ */
+
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+
+import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+
+export interface DisclaimerCardProps {
+  title: string;
+  shortMessage: string;
+  iconName: string;
+  iconColor: string;
+  backgroundColor: string;
+  onPress: () => void;
+}
+
+export const DisclaimerCard: React.FC<DisclaimerCardProps> = ({
+  title,
+  shortMessage,
+  iconName,
+  iconColor,
+  backgroundColor,
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        { backgroundColor },
+      ]}
+      onPress={onPress}
+      activeOpacity={0.7}
+      testID="disclaimer-setting"
+    >
+      {/* Icon and Title Row */}
+      <View style={styles.headerRow}>
+        <View
+          style={[
+            styles.iconContainer,
+            {
+              backgroundColor: withAlpha(iconColor, 0.2),
+              borderColor: withAlpha(iconColor, 0.4),
+              borderWidth: 1,
+            },
+          ]}
+        >
+          <AtomicIcon name={iconName as any} color="warning" />
+        </View>
+        <AtomicText type="bodyLarge" color="primary" style={styles.title}>
+          {title}
+        </AtomicText>
+        <AtomicIcon name="arrow-right" color="secondary" size="sm" />
+      </View>
+
+      {/* Short Message */}
+      <AtomicText
+        type="bodySmall"
+        color="secondary"
+        style={styles.shortMessage}
+      >
+        {shortMessage}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.md,
+      marginHorizontal: tokens.spacing.md,
+      marginTop: 8,
+      marginBottom: 8,
+      borderRadius: 12,
+    },
+
+    headerRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginBottom: 12,
+    },
+
+    iconContainer: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: 12,
+    },
+
+    title: {
+      flex: 1,
+      fontWeight: tokens.typography.labelLarge.fontWeight as any,
+      fontSize: tokens.typography.labelLarge.fontSize,
+    },
+
+    shortMessage: {
+      lineHeight: 18,
+      paddingLeft: 52, // Align with title (40px icon + 12px margin)
+      fontSize: 13,
+    },
+  });

package/src/domains/disclaimer/presentation/components/DisclaimerModal.test.tsx

@@ -0,0 +1,236 @@
+/**
+ * Tests for DisclaimerModal Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { DisclaimerModal } from '../DisclaimerModal';
+
+// Mock dependencies
+jest.mock('@umituz/react-native-design-system', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+      borderLight: '#e0e0e0',
+    },
+  }),
+}));
+
+jest.mock('@umituz/react-native-design-system', () => ({
+  AtomicText: ({ children, type, color, style }: any) => (
+    <Text style={style} testID={`atomic-text-${type}-${color}`}>
+      {children}
+    </Text>
+  ),
+  AtomicIcon: ({ name, color, size, style }: any) => (
+    <Text style={style} testID={`atomic-icon-${name}-${color}-${size}`}>
+      Icon: {name}
+    </Text>
+  ),
+}));
+
+import { Text, Modal, ScrollView } from 'react-native';
+
+describe('DisclaimerModal', () => {
+  it('renders null when visible is false', () => {
+    const { queryByTestId } = render(
+      <DisclaimerModal
+        visible={false}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(queryByTestId('disclaimer-modal')).toBeNull();
+  });
+
+  it('renders correctly when visible is true', () => {
+    const { getByTestId, getByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('disclaimer-modal')).toBeTruthy();
+    expect(getByText('Test Title')).toBeTruthy();
+    expect(getByText('Test Content')).toBeTruthy();
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const mockOnClose = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={mockOnClose}
+      />
+    );
+
+    fireEvent.press(getByTestId('close-disclaimer-modal'));
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies correct theme colors', () => {
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    const modalContainer = getByTestId('disclaimer-modal');
+    expect(modalContainer.props.style).toContainEqual({
+      backgroundColor: '#ffffff',
+    });
+  });
+
+  it('renders header with correct structure', () => {
+    const { getByTestId, getByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
+    expect(getByTestId('atomic-icon-X-primary-md')).toBeTruthy();
+    expect(getByText('Test Title')).toBeTruthy();
+  });
+
+  it('renders content in ScrollView', () => {
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('disclaimer-modal-content')).toBeTruthy();
+  });
+
+  it('handles long content correctly', () => {
+    const longContent = 'This is a very long disclaimer content that should scroll properly. '.repeat(20);
+    
+    const { getByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content={longContent}
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByText(longContent)).toBeTruthy();
+  });
+
+  it('applies correct text styling', () => {
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('atomic-text-bodyMedium-primary')).toBeTruthy();
+  });
+
+  it('has correct accessibility properties', () => {
+    const mockOnClose = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={mockOnClose}
+      />
+    );
+
+    const closeButton = getByTestId('close-disclaimer-modal');
+    expect(closeButton).toBeTruthy();
+  });
+
+  it('handles multiple close calls', () => {
+    const mockOnClose = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={mockOnClose}
+      />
+    );
+
+    const closeButton = getByTestId('close-disclaimer-modal');
+    
+    fireEvent.press(closeButton);
+    fireEvent.press(closeButton);
+    fireEvent.press(closeButton);
+    
+    expect(mockOnClose).toHaveBeenCalledTimes(3);
+  });
+
+  it('maintains correct layout structure', () => {
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    // Check modal container exists
+    expect(getByTestId('disclaimer-modal')).toBeTruthy();
+    
+    // Check header elements exist
+    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
+    expect(getByTestId('atomic-icon-X-primary-md')).toBeTruthy();
+    
+    // Check content exists
+    expect(getByTestId('disclaimer-modal-content')).toBeTruthy();
+  });
+
+  it('handles empty content gracefully', () => {
+    const { getByTestId, queryByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content=""
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('disclaimer-modal')).toBeTruthy();
+    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
+    // Empty content should still render the text component
+    expect(getByTestId('atomic-text-bodyMedium-primary')).toBeTruthy();
+  });
+
+  it('handles special characters in content', () => {
+    const specialContent = 'Content with special chars: © ® ™ "quotes" \'apostrophes\'';
+    
+    const { getByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content={specialContent}
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByText(specialContent)).toBeTruthy();
+  });
+});

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -0,0 +1,104 @@
+/**
+ * Disclaimer Modal Component
+ * Extracted from DisclaimerSetting to follow single responsibility and 200-line rules
+ */
+
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+
+export interface DisclaimerModalProps {
+  visible: boolean;
+  title: string;
+  content: string;
+  onClose: () => void;
+}
+
+export const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
+  visible,
+  title,
+  content,
+  onClose,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  if (!visible) return null;
+
+  return (
+    <View
+      style={[
+        styles.modalContainer,
+        { backgroundColor: tokens.colors.backgroundPrimary },
+      ]}
+    >
+      {/* Modal Header */}
+      <View
+        style={[
+          styles.modalHeader,
+          { borderBottomColor: tokens.colors.borderLight },
+        ]}
+      >
+        <AtomicText type="headlineMedium" color="primary">
+          {title}
+        </AtomicText>
+        <TouchableOpacity
+          onPress={onClose}
+          testID="close-disclaimer-modal"
+        >
+          <AtomicIcon name="x" color="primary" size="md" />
+        </TouchableOpacity>
+      </View>
+
+      {/* Scrollable Content */}
+      <ScrollView
+        style={styles.modalContent}
+        contentContainerStyle={styles.modalContentContainer}
+      >
+        <AtomicText
+          type="bodyMedium"
+          color="primary"
+          style={styles.modalText}
+        >
+          {content}
+        </AtomicText>
+      </ScrollView>
+    </View>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    modalContainer: {
+      flex: 1,
+    },
+
+    modalHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingVertical: 16,
+      borderBottomWidth: 1,
+    },
+
+    modalContent: {
+      flex: 1,
+    },
+
+    modalContentContainer: {
+      padding: 20,
+    },
+
+    modalText: {
+      lineHeight: 24,
+      fontSize: 15,
+    },
+  });

package/src/domains/disclaimer/presentation/components/DisclaimerSetting.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * Tests for DisclaimerSetting Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { DisclaimerSetting } from '../DisclaimerSetting';
+
+// Mock dependencies
+jest.mock('@umituz/react-native-localization', () => ({
+  useLocalization: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+jest.mock('@umituz/react-native-design-system', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+      warning: '#ff9800',
+    },
+    spacing: {
+      md: 16,
+    },
+  }),
+  withAlpha: (color: string, alpha: number) => `${color}${alpha}`,
+}));
+
+describe('DisclaimerSetting', () => {
+  it('renders disclaimer card correctly', () => {
+    const { getByTestId } = render(<DisclaimerSetting />);
+
+    expect(getByTestId('disclaimer-setting')).toBeTruthy();
+  });
+
+  it('opens modal when card is pressed', () => {
+    const { getByTestId } = render(<DisclaimerSetting />);
+
+    const card = getByTestId('disclaimer-setting');
+    fireEvent.press(card);
+
+    // Modal should be visible now
+    expect(getByTestId('close-disclaimer-modal')).toBeTruthy();
+  });
+
+  it('closes modal when close button is pressed', () => {
+    const { getByTestId } = render(<DisclaimerSetting />);
+
+    // Open modal first
+    const card = getByTestId('disclaimer-setting');
+    fireEvent.press(card);
+
+    // Close modal
+    const closeButton = getByTestId('close-disclaimer-modal');
+    fireEvent.press(closeButton);
+
+    // Modal should be closed
+    expect(() => getByTestId('close-disclaimer-modal')).toThrow();
+  });
+
+  it('uses custom props when provided', () => {
+    const customProps = {
+      titleKey: 'custom.title',
+      messageKey: 'custom.message',
+      shortMessageKey: 'custom.shortMessage',
+      iconName: 'info',
+    };
+
+    const { getByText } = render(<DisclaimerSetting {...customProps} />);
+
+    expect(getByText('custom.title')).toBeTruthy();
+    expect(getByText('custom.shortMessage')).toBeTruthy();
+  });
+});

package/src/domains/disclaimer/presentation/components/DisclaimerSetting.tsx

@@ -0,0 +1,108 @@
+/**
+ * DisclaimerSetting Component
+ *
+ * Displays customizable disclaimer with important legal notice
+ * Used in About screens for apps that require disclaimers
+ *
+ * Features:
+ * - Tappable card that opens full disclaimer modal
+ * - Warning icon with background color
+ * - Internationalized title and message
+ * - Full-screen modal with scrollable content
+ * - NO shadows (CLAUDE.md compliance)
+ * - Universal across iOS, Android, Web (NO Platform.OS checks)
+ *
+ * Usage:
+ * - Import and use in AboutScreen
+ * - Requires translations: settings.disclaimer.title, settings.disclaimer.message, settings.disclaimer.shortMessage
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal } from 'react-native';
+
+import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
+import { useLocalization } from '@umituz/react-native-localization';
+import { DisclaimerCard } from './DisclaimerCard';
+import { DisclaimerModal } from './DisclaimerModal';
+
+export interface DisclaimerSettingProps {
+  /** Custom title translation key */
+  titleKey?: string;
+  /** Custom message translation key */
+  messageKey?: string;
+  /** Custom short message translation key */
+  shortMessageKey?: string;
+  /** Custom icon name */
+  iconName?: string;
+  /** Custom icon color */
+  iconColor?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Custom modal title */
+  modalTitle?: string;
+  /** Custom modal content */
+  modalContent?: string;
+}
+
+export const DisclaimerSetting: React.FC<DisclaimerSettingProps> = ({
+  titleKey = "settings.disclaimer.title",
+  messageKey = "settings.disclaimer.message",
+  shortMessageKey = "settings.disclaimer.shortMessage",
+  iconName = "alert-triangle",
+  iconColor,
+  backgroundColor,
+  modalTitle,
+  modalContent,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+  const [modalVisible, setModalVisible] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      setModalVisible(false);
+    };
+  }, []);
+
+  const title = modalTitle || t(titleKey);
+  const content = modalContent || t(messageKey);
+  const shortMessage = t(shortMessageKey);
+  const finalIconColor = iconColor || tokens.colors.warning;
+  const finalBackgroundColor = backgroundColor || withAlpha(finalIconColor, 0.1);
+
+  const handleOpenModal = useCallback(() => {
+    setModalVisible(true);
+  }, []);
+
+  const handleCloseModal = useCallback(() => {
+    setModalVisible(false);
+  }, []);
+
+  return (
+    <>
+      <DisclaimerCard
+        title={title}
+        shortMessage={shortMessage}
+        iconName={iconName}
+        iconColor={finalIconColor}
+        backgroundColor={finalBackgroundColor}
+        onPress={handleOpenModal}
+      />
+
+      <Modal
+        visible={modalVisible}
+        animationType="slide"
+        presentationStyle="pageSheet"
+        onRequestClose={handleCloseModal}
+      >
+        <DisclaimerModal
+          visible={modalVisible}
+          title={title}
+          content={content}
+          onClose={handleCloseModal}
+        />
+      </Modal>
+    </>
+  );
+};
+

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -0,0 +1,121 @@
+/**
+ * DisclaimerScreen Component
+ *
+ * Full-screen disclaimer display for navigation-based usage
+ * Can be registered as a screen in navigation stack
+ *
+ * Features:
+ * - SafeAreaView wrapper for proper display
+ * - Scrollable content for long disclaimers
+ * - Customizable title and content via props or translations
+ * - NO shadows (CLAUDE.md compliance)
+ * - Universal across iOS, Android, Web
+ */
+
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useLocalization } from '@umituz/react-native-localization';
+
+export interface DisclaimerScreenProps {
+  /** Custom title (overrides translation) */
+  title?: string;
+  /** Custom title translation key */
+  titleKey?: string;
+  /** Custom content (overrides translation) */
+  content?: string;
+  /** Custom content translation key */
+  contentKey?: string;
+  /** Custom icon name */
+  iconName?: string;
+}
+
+export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
+  title,
+  titleKey = 'settings.disclaimer.title',
+  content,
+  contentKey = 'settings.disclaimer.message',
+  iconName = 'alert-triangle',
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  const displayTitle = title || t(titleKey);
+  const displayContent = content || t(contentKey);
+
+  return (
+    <SafeAreaView
+      style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+      edges={['bottom']}
+    >
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Icon Header */}
+        <View style={styles.iconHeader}>
+          <View
+            style={[
+              styles.iconContainer,
+              {
+                backgroundColor: withAlpha(tokens.colors.warning, 0.1),
+                borderColor: withAlpha(tokens.colors.warning, 0.3),
+              },
+            ]}
+          >
+            <AtomicIcon name={iconName as any} color="warning" size="lg" />
+          </View>
+        </View>
+
+        {/* Title */}
+        <AtomicText type="headlineMedium" color="primary" style={styles.title}>
+          {displayTitle}
+        </AtomicText>
+
+        {/* Content */}
+        <AtomicText type="bodyMedium" color="secondary" style={styles.content}>
+          {displayContent}
+        </AtomicText>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      padding: tokens.spacing.lg,
+      paddingTop: tokens.spacing.xl,
+    },
+    iconHeader: {
+      alignItems: 'center',
+      marginBottom: tokens.spacing.lg,
+    },
+    iconContainer: {
+      width: 72,
+      height: 72,
+      borderRadius: 36,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: 2,
+    },
+    title: {
+      textAlign: 'center',
+      marginBottom: tokens.spacing.lg,
+    },
+    content: {
+      lineHeight: 24,
+      textAlign: 'left',
+    },
+  });

package/src/index.ts

@@ -90,6 +90,9 @@ export * from './domains/about';
 // Legal Domain - Terms, privacy, licenses
 export * from './domains/legal';
 
+// Disclaimer Domain - Disclaimer card, modal, settings
+export * from './domains/disclaimer';
+
 // Appearance Domain - Theme, dark mode
 export * from './domains/appearance';
 

package/src/infrastructure/storage/SettingsStore.ts

@@ -46,6 +46,7 @@ const getDefaultSettings = (userId: string): UserSettings => {
     soundEnabled: true,
     vibrationEnabled: true,
     privacyMode: false,
+    disclaimerAccepted: false,
     updatedAt: new Date(),
   };