@umituz/react-native-design-system 2.6.60 → 2.6.62

package/src/layouts/ScreenLayout/styles/screenLayoutStyles.ts

@@ -0,0 +1,47 @@
+/**
+ * ScreenLayout Styles
+ */
+
+import { StyleSheet } from 'react-native';
+import type { DesignTokens } from '../../../theme';
+
+export interface ScreenLayoutStylesConfig {
+  readonly maxWidth?: number;
+  readonly horizontalPadding: number;
+  readonly verticalPadding: number;
+}
+
+export const getScreenLayoutStyles = (
+  tokens: DesignTokens,
+  config: ScreenLayoutStylesConfig,
+) => {
+  const { maxWidth, horizontalPadding, verticalPadding } = config;
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    keyboardAvoidingView: {
+      flex: 1,
+    },
+    responsiveWrapper: {
+      flex: 1,
+      width: '100%',
+      ...(maxWidth ? { maxWidth, alignSelf: 'center' as const } : {}),
+    },
+    content: {
+      flex: 1,
+      paddingTop: verticalPadding,
+      paddingHorizontal: horizontalPadding,
+    },
+    scrollView: {
+      flex: 1,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      paddingTop: verticalPadding,
+      paddingHorizontal: horizontalPadding,
+      paddingBottom: verticalPadding,
+    },
+  });
+};

package/src/layouts/ScreenLayout/types/index.ts

@@ -0,0 +1,27 @@
+/**
+ * ScreenLayout Type Definitions
+ */
+
+import type { ViewStyle } from 'react-native';
+import type { Edge } from 'react-native-safe-area-context';
+import type { RefreshControlProps } from 'react-native';
+
+export interface ScreenLayoutProps {
+  readonly children: React.ReactNode;
+  readonly scrollable?: boolean;
+  readonly edges?: Edge[];
+  readonly header?: React.ReactNode;
+  readonly footer?: React.ReactNode;
+  readonly backgroundColor?: string;
+  readonly containerStyle?: ViewStyle;
+  readonly contentContainerStyle?: ViewStyle;
+  readonly testID?: string;
+  readonly hideScrollIndicator?: boolean;
+  readonly keyboardAvoiding?: boolean;
+  readonly accessibilityLabel?: string;
+  readonly accessibilityHint?: string;
+  readonly accessible?: boolean;
+  readonly responsiveEnabled?: boolean;
+  readonly maxWidth?: number;
+  readonly refreshControl?: React.ReactElement<RefreshControlProps>;
+}

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -89,17 +89,19 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
         onRequestClose={dismiss}
         statusBarTranslucent
       >
-        <Pressable style={styles.overlay} onPress={dismiss}>
+        <View style={styles.overlay}>
           <Pressable 
-            style={styles.container} 
-            onPress={() => {}} // Consumer to prevent bubbling to overlay
-          >
+            style={StyleSheet.absoluteFill} 
+            onPress={dismiss}
+            accessibilityLabel="Close modal"
+          />
+          <View style={[styles.container, { width: '100%' }]}>
             <View style={{ flex: 1 }}>
               <View style={styles.handle} />
               {children}
             </View>
-          </Pressable>
-        </Pressable>
+          </View>
+        </View>
       </Modal>
     );
   }