@umituz/react-native-settings 1.3.3 → 1.3.5

package/package.json

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

package/src/presentation/screens/SettingsScreen.tsx

@@ -13,7 +13,8 @@
 
 import React, { useMemo } from 'react';
 import { List, Divider } from 'react-native-paper';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { DeviceEventEmitter, Alert, View, TouchableOpacity, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useNavigation } from '@react-navigation/native';
 import { useTheme, useAppDesignTokens } from '@umituz/react-native-design-system-theme';
@@ -31,6 +32,16 @@ try {
   // Package not available, notificationService will be null
 }
 
+// Optional onboarding store - only import if package is available
+let useOnboardingStore: any = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const onboardingPackage = require('@umituz/react-native-onboarding');
+  useOnboardingStore = onboardingPackage.useOnboardingStore;
+} catch {
+  // Package not available, useOnboardingStore will be null
+}
+
 /**
  * Check if a navigation screen exists in the navigation state
  */
@@ -78,6 +89,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   const navigation = useNavigation();
   const { theme, themeMode } = useTheme();
   const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
   const { currentLanguage, t } = useLocalization();
 
   const currentLang = getLanguageByCode(currentLanguage);
@@ -133,6 +145,33 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
     }
   };
 
+  const handleShowOnboarding = async () => {
+    if (!useOnboardingStore) {
+      Alert.alert('Error', 'Onboarding package is not available');
+      return;
+    }
+
+    try {
+      const onboardingStore = useOnboardingStore.getState();
+      // Reset onboarding state
+      await onboardingStore.reset();
+      // Emit event to trigger navigation to onboarding
+      DeviceEventEmitter.emit('reset-onboarding');
+      // Close settings first
+      navigation.goBack();
+      // Small delay to ensure navigation completes
+      setTimeout(() => {
+        DeviceEventEmitter.emit('show-onboarding');
+      }, 100);
+    } catch (error) {
+      Alert.alert(
+        'Error',
+        'Failed to show onboarding. Please try again.',
+        [{ text: 'OK' }],
+      );
+    }
+  };
+
   // Debug: Log features to help diagnose empty screen issues
   /* eslint-disable-next-line no-console */
   if (__DEV__) {
@@ -147,7 +186,14 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   return (
     <ScreenLayout testID="settings-screen" hideScrollIndicator>
       {/* Header with Close Button */}
-      <View style={[styles.header, { borderBottomColor: theme.colors.borderLight }]}>
+      <View style={[
+        styles.header, 
+        { 
+          borderBottomColor: theme.colors.borderLight,
+          backgroundColor: theme.colors.surface,
+          paddingTop: insets.top,
+        }
+      ]}>
         <AtomicText type="headlineLarge" style={{ color: theme.colors.textPrimary, flex: 1 }}>
           {t('navigation.settings') || 'Settings'}
         </AtomicText>
@@ -191,6 +237,21 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
         </List.Section>
       )}
 
+      {/* Development/Test: Show Onboarding */}
+      {__DEV__ && useOnboardingStore && (
+        <List.Section style={{ marginBottom: 8 }}>
+          <List.Subheader style={{ color: theme.colors.textSecondary }}>Development</List.Subheader>
+          <SettingItem
+            icon="Play"
+            iconGradient={theme.colors.settingGradients.info as unknown as string[]}
+            title="Show Onboarding (Dev)"
+            description="Navigate to onboarding screen"
+            onPress={handleShowOnboarding}
+            testID="show-onboarding-button"
+          />
+        </List.Section>
+      )}
+
       {/* About & Legal Section */}
       {(features.about || features.legal) && (
         <List.Section style={{ marginBottom: 8 }}>
@@ -237,11 +298,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingBottom: 12,
+    paddingTop: 12,
     borderBottomWidth: 1,
+    zIndex: 1000,
   },
   closeButton: {
-    padding: 4,
+    padding: 8,
+    marginLeft: 8,
   },
 });