@umituz/react-native-settings 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -33,9 +33,16 @@ export {
 // =============================================================================
 
 export { SettingsScreen } from './presentation/screens/SettingsScreen';
+export type { SettingsScreenProps } from './presentation/screens/SettingsScreen';
 export { AppearanceScreen } from './presentation/screens/AppearanceScreen';
 export { LanguageSelectionScreen } from './presentation/screens/LanguageSelectionScreen';
 
+// =============================================================================
+// PRESENTATION LAYER - Types
+// =============================================================================
+
+export type { SettingsConfig } from './presentation/screens/types';
+
 // =============================================================================
 // PRESENTATION LAYER - Components
 // =============================================================================

package/src/presentation/screens/SettingsScreen.tsx

@@ -8,9 +8,10 @@
  * - Material Design 3 compliance
  * - OFFLINE MODE: No account, premium, feedback, or donation
  * - Optimized spacing for better visual density
+ * - Configurable features via SettingsConfig prop
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { List, Divider } from 'react-native-paper';
 
 import { useNavigation } from '@react-navigation/native';
@@ -18,7 +19,7 @@ import { useTheme } from '@umituz/react-native-design-system-theme';
 import { ScreenLayout } from '@umituz/react-native-design-system';
 import { SettingItem } from '../components/SettingItem';
 import { getLanguageByCode, useLocalization } from '@umituz/react-native-localization';
-import { useTranslation } from 'react-i18next';
+import { SettingsConfig } from './types';
 
 // Optional notification service - only import if package is available
 let notificationService: any = null;
@@ -29,16 +30,79 @@ try {
   // Package not available, notificationService will be null
 }
 
-export const SettingsScreen: React.FC = () => {
+/**
+ * Check if a navigation screen exists in the navigation state
+ */
+const hasNavigationScreen = (navigation: any, screenName: string): boolean => {
+  try {
+    const state = navigation.getState();
+    if (!state) return false;
+
+    // Recursively check all routes in navigation state
+    const checkRoutes = (routes: any[]): boolean => {
+      if (!routes || !Array.isArray(routes)) return false;
+      
+      for (const route of routes) {
+        if (route.name === screenName) {
+          return true;
+        }
+        // Check nested navigators
+        if (route.state?.routes) {
+          if (checkRoutes(route.state.routes)) {
+            return true;
+          }
+        }
+      }
+      return false;
+    };
+
+    return checkRoutes(state.routes || []);
+  } catch {
+    // If we can't check navigation state, assume it's not available
+    return false;
+  }
+};
+
+export interface SettingsScreenProps {
+  /**
+   * Configuration for which settings features to show
+   * @default { appearance: 'auto', notifications: 'auto', about: 'auto', legal: 'auto' }
+   */
+  config?: SettingsConfig;
+}
+
+export const SettingsScreen: React.FC<SettingsScreenProps> = ({ 
+  config = {} 
+}) => {
   const navigation = useNavigation();
   const { theme, themeMode } = useTheme();
-  const { currentLanguage } = useLocalization();
-  const { t } = useTranslation();
+  const { currentLanguage, t } = useLocalization();
 
   const currentLang = getLanguageByCode(currentLanguage);
   const languageDisplay = currentLang ? `${currentLang.flag} ${currentLang.nativeName}` : 'English';
   const themeDisplay = themeMode === 'dark' ? t('settings.darkMode') : t('settings.lightMode');
 
+  // Determine which features should be shown
+  const features = useMemo(() => {
+    const appearanceConfig = config.appearance ?? 'auto';
+    const notificationsConfig = config.notifications ?? 'auto';
+    const aboutConfig = config.about ?? 'auto';
+    const legalConfig = config.legal ?? 'auto';
+
+    return {
+      appearance: appearanceConfig === true || 
+        (appearanceConfig === 'auto' && hasNavigationScreen(navigation, 'Appearance')),
+      notifications: notificationsConfig === true || 
+        (notificationsConfig === 'auto' && 
+         notificationService !== null && 
+         hasNavigationScreen(navigation, 'Notifications')),
+      about: aboutConfig === true || 
+        (aboutConfig === 'auto' && hasNavigationScreen(navigation, 'About')),
+      legal: legalConfig === true || 
+        (legalConfig === 'auto' && hasNavigationScreen(navigation, 'Legal')),
+    };
+  }, [config, navigation]);
+
   const handleAppearancePress = () => {
     navigation.navigate('Appearance' as never);
   };
@@ -64,52 +128,62 @@ export const SettingsScreen: React.FC = () => {
   return (
     <ScreenLayout testID="settings-screen" hideScrollIndicator>
       {/* Appearance Section */}
-      <List.Section style={{ marginBottom: 8 }}>
-        <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.appearance')}</List.Subheader>
-        <SettingItem
-          icon="Palette"
-          iconGradient={theme.colors.settingGradients.themeLight as unknown as string[]}
-          title={t('settings.appearance.title')}
-          description={t('settings.appearance.themeDescription')}
-          onPress={handleAppearancePress}
-          testID="appearance-button"
-        />
-      </List.Section>
-
-      {/* General Section */}
-      <List.Section style={{ marginBottom: 8 }}>
-        <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.general')}</List.Subheader>
-        <SettingItem
-          icon="Bell"
-          iconGradient={theme.colors.settingGradients.notifications as unknown as string[]}
-          title={t('settings.notifications.title')}
-          description={t('settings.notifications.description')}
-          onPress={handleNotificationsPress}
-          testID="notifications-button"
-        />
-      </List.Section>
+      {features.appearance && (
+        <List.Section style={{ marginBottom: 8 }}>
+          <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.appearance')}</List.Subheader>
+          <SettingItem
+            icon="Palette"
+            iconGradient={theme.colors.settingGradients.themeLight as unknown as string[]}
+            title={t('settings.appearance.title')}
+            description={t('settings.appearance.themeDescription')}
+            onPress={handleAppearancePress}
+            testID="appearance-button"
+          />
+        </List.Section>
+      )}
+
+      {/* General Section - Notifications */}
+      {features.notifications && (
+        <List.Section style={{ marginBottom: 8 }}>
+          <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.general')}</List.Subheader>
+          <SettingItem
+            icon="Bell"
+            iconGradient={theme.colors.settingGradients.notifications as unknown as string[]}
+            title={t('settings.notifications.title')}
+            description={t('settings.notifications.description')}
+            onPress={handleNotificationsPress}
+            testID="notifications-button"
+          />
+        </List.Section>
+      )}
 
       {/* About & Legal Section */}
-      <List.Section style={{ marginBottom: 8 }}>
-        <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.about')}</List.Subheader>
-        <SettingItem
-          icon="Info"
-          iconGradient={theme.colors.settingGradients.info as unknown as string[]}
-          title={t('settings.about.title')}
-          description={t('settings.about.description')}
-          onPress={handleAboutPress}
-          testID="about-button"
-        />
-        <Divider />
-        <SettingItem
-          icon="FileText"
-          iconGradient={theme.colors.settingGradients.info as unknown as string[]}
-          title={t('settings.legal.title')}
-          description={t('settings.legal.description')}
-          onPress={handleLegalPress}
-          testID="legal-button"
-        />
-      </List.Section>
+      {(features.about || features.legal) && (
+        <List.Section style={{ marginBottom: 8 }}>
+          <List.Subheader style={{ color: theme.colors.textSecondary }}>{t('settings.sections.about')}</List.Subheader>
+          {features.about && (
+            <SettingItem
+              icon="Info"
+              iconGradient={theme.colors.settingGradients.info as unknown as string[]}
+              title={t('settings.about.title')}
+              description={t('settings.about.description')}
+              onPress={handleAboutPress}
+              testID="about-button"
+            />
+          )}
+          {features.about && features.legal && <Divider />}
+          {features.legal && (
+            <SettingItem
+              icon="FileText"
+              iconGradient={theme.colors.settingGradients.info as unknown as string[]}
+              title={t('settings.legal.title')}
+              description={t('settings.legal.description')}
+              onPress={handleLegalPress}
+              testID="legal-button"
+            />
+          )}
+        </List.Section>
+      )}
     </ScreenLayout>
   );
 };

package/src/presentation/screens/types.ts

@@ -0,0 +1,35 @@
+/**
+ * Settings Configuration
+ * 
+ * Controls which settings features are visible in the SettingsScreen.
+ * Each feature can be:
+ * - true: Always show (if navigation screen exists)
+ * - false: Never show
+ * - 'auto': Automatically detect (check if navigation screen exists and package is available)
+ */
+export interface SettingsConfig {
+  /**
+   * Show Appearance settings (Theme & Language)
+   * @default 'auto'
+   */
+  appearance?: boolean | 'auto';
+
+  /**
+   * Show Notifications settings
+   * @default 'auto'
+   */
+  notifications?: boolean | 'auto';
+
+  /**
+   * Show About settings
+   * @default 'auto'
+   */
+  about?: boolean | 'auto';
+
+  /**
+   * Show Legal settings (Terms, Privacy Policy)
+   * @default 'auto'
+   */
+  legal?: boolean | 'auto';
+}
+