@umituz/react-native-design-system 2.6.69 → 2.6.70

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-design-system",
3
- "version": "2.6.69",
3
+ "version": "2.6.70",
4
4
  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive and safe area utilities",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -8,7 +8,7 @@ import { View, ScrollView } from 'react-native';
8
8
  import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
9
9
  import { useAppDesignTokens } from '../../theme';
10
10
  import { getScreenLayoutConfig } from '../../responsive/responsiveLayout';
11
- import { ContentWrapper } from './components/ContentWrapper';
11
+ import { AtomicKeyboardAvoidingView } from '../../atoms';
12
12
  import { getScreenLayoutStyles } from './styles/screenLayoutStyles';
13
13
  import type { ScreenLayoutProps } from './types';
14
14
 
@@ -24,7 +24,6 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
24
24
  testID,
25
25
  hideScrollIndicator = false,
26
26
  keyboardAvoiding = false,
27
- responsiveEnabled = true,
28
27
  maxWidth,
29
28
  refreshControl,
30
29
  }) => {
@@ -37,10 +36,10 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
37
36
  [insets]
38
37
  );
39
38
 
40
- // Use provided maxWidth or responsive default
41
- const finalMaxWidth = maxWidth || (responsiveEnabled ? layoutConfig.maxContentWidth : undefined);
42
- const horizontalPadding = responsiveEnabled ? layoutConfig.horizontalPadding : tokens.spacing.md;
43
- const verticalPadding = responsiveEnabled ? layoutConfig.verticalPadding : tokens.spacing.lg;
39
+ // Use centralized layout config for consistency
40
+ const finalMaxWidth = maxWidth || layoutConfig.maxContentWidth;
41
+ const horizontalPadding = layoutConfig.horizontalPadding;
42
+ const verticalPadding = layoutConfig.verticalPadding;
44
43
 
45
44
  // Pre-compute styles
46
45
  const styles = useMemo(
@@ -49,50 +48,44 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
49
48
  );
50
49
 
51
50
  const bgColor = backgroundColor || tokens.colors.backgroundPrimary;
51
+
52
+ const content = (
53
+ <View style={styles.responsiveWrapper}>
54
+ {header}
55
+ {scrollable ? (
56
+ <ScrollView
57
+ style={styles.scrollView}
58
+ contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
59
+ showsVerticalScrollIndicator={!hideScrollIndicator}
60
+ keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
61
+ refreshControl={refreshControl}
62
+ >
63
+ {children}
64
+ </ScrollView>
65
+ ) : (
66
+ <View style={[styles.content, contentContainerStyle]}>
67
+ {children}
68
+ </View>
69
+ )}
70
+ {footer}
71
+ </View>
72
+ );
52
73
 
53
- // Non-scrollable layout
54
- if (!scrollable) {
55
- return (
56
- <SafeAreaView
57
- style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
58
- edges={edges}
59
- testID={testID}
60
- >
61
- <ContentWrapper keyboardAvoiding={keyboardAvoiding}>
62
- <View style={styles.responsiveWrapper}>
63
- {header}
64
- <View style={[styles.content, contentContainerStyle]}>
65
- {children}
66
- </View>
67
- {footer}
68
- </View>
69
- </ContentWrapper>
70
- </SafeAreaView>
71
- );
72
- }
73
-
74
- // Scrollable layout (default)
75
74
  return (
76
75
  <SafeAreaView
77
76
  style={[styles.container, { backgroundColor: bgColor }, containerStyle]}
78
77
  edges={edges}
79
78
  testID={testID}
80
79
  >
81
- <ContentWrapper keyboardAvoiding={keyboardAvoiding}>
82
- <View style={styles.responsiveWrapper}>
83
- {header}
84
- <ScrollView
85
- style={styles.scrollView}
86
- contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
87
- showsVerticalScrollIndicator={!hideScrollIndicator}
88
- keyboardShouldPersistTaps={keyboardAvoiding ? 'handled' : 'never'}
89
- refreshControl={refreshControl}
90
- >
91
- {children}
92
- </ScrollView>
93
- {footer}
94
- </View>
95
- </ContentWrapper>
80
+ {keyboardAvoiding ? (
81
+ <AtomicKeyboardAvoidingView style={styles.keyboardAvoidingView}>
82
+ {content}
83
+ </AtomicKeyboardAvoidingView>
84
+ ) : (
85
+ <View style={styles.keyboardAvoidingView}>
86
+ {content}
87
+ </View>
88
+ )}
96
89
  </SafeAreaView>
97
90
  );
98
91
  };
@@ -21,7 +21,7 @@ export interface ScreenLayoutProps {
21
21
  readonly accessibilityLabel?: string;
22
22
  readonly accessibilityHint?: string;
23
23
  readonly accessible?: boolean;
24
- readonly responsiveEnabled?: boolean;
24
+
25
25
  readonly maxWidth?: number;
26
26
  readonly refreshControl?: React.ReactElement<RefreshControlProps>;
27
27
  }
@@ -1,31 +0,0 @@
1
- /**
2
- * ContentWrapper Component
3
- * Conditionally wraps content with KeyboardAvoidingView
4
- */
5
-
6
- import React from 'react';
7
- import { View } from 'react-native';
8
- import type { ViewStyle } from 'react-native';
9
- import { AtomicKeyboardAvoidingView } from '../../../atoms';
10
-
11
- export interface ContentWrapperProps {
12
- readonly children: React.ReactNode;
13
- readonly keyboardAvoiding?: boolean;
14
- readonly style?: ViewStyle;
15
- }
16
-
17
- export const ContentWrapper: React.FC<ContentWrapperProps> = ({
18
- children,
19
- keyboardAvoiding = false,
20
- style,
21
- }) => {
22
- if (keyboardAvoiding) {
23
- return (
24
- <AtomicKeyboardAvoidingView style={style}>
25
- {children}
26
- </AtomicKeyboardAvoidingView>
27
- );
28
- }
29
-
30
- return <View style={style}>{children}</View>;
31
- };
@@ -1,6 +0,0 @@
1
- /**
2
- * ScreenLayout Components Export
3
- */
4
-
5
- export { ContentWrapper } from './ContentWrapper';
6
- export type { ContentWrapperProps } from './ContentWrapper';