@onairos/react-native 3.1.11 → 3.1.13

package/src/components/ModalHeader.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Text,
+} from 'react-native';
+import { COLORS, SPACING } from '../theme';
+
+interface ModalHeaderProps {
+  onClose?: () => void;
+  onBack?: () => void;
+  showGrabber?: boolean;
+  showBackButton?: boolean;
+}
+
+const ModalHeader: React.FC<ModalHeaderProps> = ({
+  onClose,
+  onBack,
+  showGrabber = true,
+  showBackButton = false,
+}) => {
+  return (
+    <>
+      {/* Grabber at the very top */}
+      {showGrabber && (
+        <View style={styles.grabberContainer}>
+          <View style={styles.grabber} />
+        </View>
+      )}
+      
+                  {/* Header with close/back button */}
+            <View style={styles.container}>
+              {/* Close or Back Button - Left */}
+              {showBackButton ? (
+                <TouchableOpacity
+                  style={styles.closeButton}
+                  onPress={onBack}
+                  activeOpacity={0.7}
+                  accessibilityLabel="Go back"
+                  accessibilityRole="button"
+                >
+                  <Text style={styles.backText}>←</Text>
+                </TouchableOpacity>
+              ) : (
+                <TouchableOpacity
+                  style={styles.closeButton}
+                  onPress={onClose}
+                  activeOpacity={0.7}
+                  accessibilityLabel="Close"
+                  accessibilityRole="button"
+                >
+                  {/* Using text X as fallback since SVG might not load properly */}
+                  <Text style={styles.closeText}>✕</Text>
+                </TouchableOpacity>
+              )}
+
+              {/* Spacer - Center */}
+              <View style={styles.centerSpacer} />
+
+              {/* Spacer - Right */}
+              <View style={styles.spacer} />
+            </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  grabberContainer: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 12,
+    paddingBottom: 4,
+  },
+  
+  grabber: {
+    width: 100, // Made even longer (was 80)
+    height: 6,
+    backgroundColor: '#D0D0D0',
+    borderRadius: 3,
+  },
+  
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    height: 44,
+    paddingTop: 0, // Keep X button high
+    paddingLeft: 4, // Move X button even further left
+    marginBottom: SPACING.md,
+  },
+  
+  closeButton: {
+    width: 36, // Slightly larger for better touch
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 0, // Remove top margin to move X higher
+    // Remove background and border radius
+  },
+  
+  closeText: {
+    fontSize: 20,
+    color: COLORS.grey800,
+    fontWeight: '500',
+  },
+
+  backText: {
+    fontSize: 24,
+    color: COLORS.grey800,
+    fontWeight: '500',
+  },
+  
+  centerSpacer: {
+    flex: 1,
+  },
+  
+  spacer: {
+    width: 44,
+    height: 44,
+  },
+});
+
+export { ModalHeader };
+export default ModalHeader;

package/src/components/ModalSheet.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { COLORS, BORDER_RADIUS, SPACING } from '../theme';
+
+interface ModalSheetProps {
+  children: React.ReactNode;
+  topPadding?: number;
+  onClose?: () => void;
+  showGrabber?: boolean;
+  style?: ViewStyle;
+}
+
+const ModalSheet: React.FC<ModalSheetProps> = ({
+  children,
+  topPadding = SPACING.modalTopPadding,
+  onClose,
+  showGrabber = true,
+  style,
+}) => {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View 
+      style={[
+        styles.container,
+        { 
+          paddingTop: topPadding,
+          paddingBottom: insets.bottom || SPACING.lg,
+        },
+        style
+      ]}
+    >
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: COLORS.surface,
+    borderTopLeftRadius: BORDER_RADIUS.modalTop,
+    borderTopRightRadius: BORDER_RADIUS.modalTop,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    paddingHorizontal: SPACING.modalHorizontal,
+    flex: 1,
+    minHeight: '80%', // Ensure modal takes substantial screen space
+  },
+});
+
+export { ModalSheet };
+export default ModalSheet;