@umituz/react-native-settings 5.3.63 → 5.3.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/domains/localization/infrastructure/hooks/useTranslation.ts +11 -2
  3. package/src/domains/localization/presentation/components/LanguageItem.tsx +22 -12
  4. package/src/domains/localization/presentation/screens/LanguageSelectionScreen.tsx +41 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "5.3.63",
3
+ "version": "5.3.65",
4
4
  "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification - expo-store-review and expo-device now lazy loaded",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./dist/index.d.ts",
package/src/domains/localization/infrastructure/hooks/useTranslation.ts CHANGED
@@ -44,12 +44,21 @@ export const useTranslationFunction = () => {
44
44
  ? `${key.substring(0, firstDotIndex)}:${key.substring(firstDotIndex + 1)}`
45
45
  : key;
46
46
 
47
+ // Check if key exists in either format
48
+ const keyToUse = i18n.exists(i18nextKey) ? i18nextKey : key;
49
+
47
50
  // Missing translation is a critical issue — warn in development
48
- if (!i18n.exists(i18nextKey)) {
51
+ if (!i18n.exists(keyToUse)) {
49
52
  devWarn(`[i18n] Missing translation: "${key}"`);
50
53
  }
51
54
 
52
- const result = i18nextT(i18nextKey, options);
55
+ const result = i18nextT(keyToUse, options);
56
+
57
+ // Support returnObjects (for appearance texts etc)
58
+ if (options.returnObjects) {
59
+ return result as any;
60
+ }
61
+
53
62
  return typeof result === 'string' ? result : (options.defaultValue ?? key);
54
63
  }, [i18nextT, ready]);
55
64
 
package/src/domains/localization/presentation/components/LanguageItem.tsx CHANGED
@@ -9,6 +9,7 @@ import React, { useMemo } from 'react';
9
9
  import {
10
10
  View,
11
11
  TouchableOpacity,
12
+ Platform,
12
13
  type StyleProp,
13
14
  type ViewStyle,
14
15
  type TextStyle,
@@ -42,19 +43,20 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
42
43
  const themedStyles = useMemo(() => ({
43
44
  languageItem: {
44
45
  padding: tokens.spacing.md,
45
- borderRadius: tokens.borders.radius.md,
46
- backgroundColor: tokens.colors.backgroundSecondary,
46
+ borderRadius: tokens.borders.radius.lg,
47
+ backgroundColor: tokens.colors.surface,
47
48
  borderColor: tokens.colors.border,
48
- marginBottom: tokens.spacing.sm,
49
+ borderWidth: 1,
50
+ marginBottom: tokens.spacing.md,
49
51
  } as ViewStyle,
50
52
  selectedLanguageItem: {
51
53
  borderColor: tokens.colors.primary,
52
- backgroundColor: tokens.colors.primaryContainer,
53
- borderWidth: 2,
54
+ backgroundColor: tokens.colors.surfaceVariant,
55
+ borderWidth: 1.5,
54
56
  } as ViewStyle,
55
57
  nativeName: {
56
- color: tokens.colors.textPrimary,
57
- marginBottom: tokens.spacing.xs / 2,
58
+ color: "#FFFFFF",
59
+ marginBottom: 2,
58
60
  } as TextStyle,
59
61
  languageName: {
60
62
  color: tokens.colors.textSecondary,
@@ -76,19 +78,27 @@ export const LanguageItem: React.FC<LanguageItemProps> = ({
76
78
  activeOpacity={0.7}
77
79
  >
78
80
  <View style={[styles.languageContent, customStyles?.languageContent]}>
79
- <AtomicText style={[styles.flag, customStyles?.flag]}>
81
+ <AtomicText style={[styles.flag, { fontSize: 28 }, customStyles?.flag]}>
80
82
  {item.flag || '🌐'}
81
83
  </AtomicText>
82
- <View style={[styles.languageText, { gap: tokens.spacing.xs / 2 }, customStyles?.languageText]}>
84
+ <View style={[styles.languageText, { gap: 4 }, customStyles?.languageText]}>
83
85
  <AtomicText
84
- type="bodyMedium"
85
- style={[themedStyles.nativeName, { fontWeight: '700' }, customStyles?.nativeName]}
86
+ style={[
87
+ themedStyles.nativeName,
88
+ {
89
+ fontWeight: '700',
90
+ fontSize: 17,
91
+ color: '#FFFFFF',
92
+ fontFamily: Platform.OS === 'ios' ? 'System' : 'sans-serif'
93
+ },
94
+ customStyles?.nativeName
95
+ ]}
86
96
  >
87
97
  {item.nativeName}
88
98
  </AtomicText>
89
99
  <AtomicText
90
100
  type="labelMedium"
91
- style={[themedStyles.languageName, customStyles?.nativeName]}
101
+ style={[themedStyles.languageName, { fontSize: 13, color: '#E8B4B8', opacity: 0.8 }, customStyles?.nativeName]}
92
102
  >
93
103
  {item.name}
94
104
  </AtomicText>
package/src/domains/localization/presentation/screens/LanguageSelectionScreen.tsx CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
 
6
6
  import React from 'react';
7
- import { FlatList } from 'react-native';
7
+ import { FlatList, View } from 'react-native';
8
8
  import { ScreenLayout } from '@umituz/react-native-design-system/layouts';
9
9
  import { SearchBar, NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system/molecules';
10
10
  import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
@@ -14,6 +14,10 @@ import type { Language } from '../../infrastructure/storage/types/Language';
14
14
  import type { LanguageSelectionScreenProps } from './LanguageSelectionScreen.types';
15
15
  import { styles } from './LanguageSelectionScreen.styles';
16
16
 
17
+ export interface LanguageSelectionProps extends LanguageSelectionScreenProps {
18
+ showHeader?: boolean;
19
+ }
20
+
17
21
  interface LanguageListItemProps {
18
22
  item: Language;
19
23
  selectedCode: string;
@@ -67,26 +71,45 @@ const LanguageSearchComponent: React.FC<LanguageSearchComponentProps> = ({
67
71
  }
68
72
 
69
73
  return (
70
- <SearchBar
71
- value={searchQuery}
72
- onChangeText={setSearchQuery}
73
- placeholder={searchPlaceholder}
74
- containerStyle={[
75
- { marginBottom: tokens.spacing.md },
76
- customStyles?.searchContainer
77
- ]}
78
- inputStyle={customStyles?.searchInput}
79
- />
74
+ <View style={{ paddingHorizontal: 20 }}>
75
+ <SearchBar
76
+ value={searchQuery}
77
+ onChangeText={setSearchQuery}
78
+ placeholder={searchPlaceholder}
79
+ containerStyle={[
80
+ {
81
+ marginBottom: 20,
82
+ backgroundColor: 'transparent',
83
+ borderBottomWidth: 0,
84
+ paddingHorizontal: 0,
85
+ },
86
+ customStyles?.searchContainer
87
+ ]}
88
+ inputStyle={[
89
+ {
90
+ backgroundColor: '#2D1518',
91
+ borderRadius: 24,
92
+ color: '#FFFFFF',
93
+ paddingHorizontal: 16,
94
+ height: 52,
95
+ borderWidth: 1,
96
+ borderColor: '#3D2022',
97
+ },
98
+ customStyles?.searchInput
99
+ ]}
100
+ />
101
+ </View>
80
102
  );
81
103
  };
82
104
 
83
- export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = ({
105
+ export const LanguageSelectionScreen: React.FC<LanguageSelectionProps> = ({
84
106
  renderLanguageItem,
85
107
  renderSearchInput,
86
108
  headerTitle,
87
109
  onBackPress,
88
110
  styles: customStyles,
89
111
  searchPlaceholder,
112
+ showHeader = true,
90
113
  testID = 'language-selection-screen',
91
114
  }) => {
92
115
  const tokens = useAppDesignTokens();
@@ -130,10 +153,12 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
130
153
  edges={['top', 'bottom', 'left', 'right']}
131
154
  backgroundColor={tokens.colors.backgroundPrimary}
132
155
  header={
133
- <NavigationHeader
134
- title={headerTitle || ""}
135
- onBackPress={handleBack}
136
- />
156
+ showHeader ? (
157
+ <NavigationHeader
158
+ title={headerTitle || ""}
159
+ onBackPress={handleBack}
160
+ />
161
+ ) : null
137
162
  }
138
163
  containerStyle={customStyles?.container}
139
164
  >