@onairos/react-native 3.1.16 → 3.1.18

package/src/components/GoogleButton.tsx

@@ -1,55 +1,55 @@
-import React from 'react';
-import { TouchableOpacity, Text, Image, StyleSheet, ViewStyle } from 'react-native';
-
-interface GoogleButtonProps {
-  onPress: () => void;
-  style?: ViewStyle;
-  disabled?: boolean;
-}
-
-const GoogleButton: React.FC<GoogleButtonProps> = ({ onPress, style, disabled = false }) => {
-  return (
-    <TouchableOpacity
-      style={[styles.button, style, disabled && styles.disabled]}
-      onPress={onPress}
-      disabled={disabled}
-    >
-      <Image
-        source={require('../assets/images/Googlelogo.png')}
-        style={styles.icon}
-        resizeMode="contain"
-      />
-      <Text style={styles.text}>Continue with Google</Text>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#FFFFFF',
-    borderWidth: 1,
-    borderColor: '#E0E0E0',
-    borderRadius: 8,
-    paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  disabled: {
-    opacity: 0.5,
-  },
-  icon: {
-    width: 20,
-    height: 20,
-    marginRight: 8,
-  },
-  text: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: '#333333',
-  },
-});
-
-export { GoogleButton };
-export default GoogleButton;
+import React from 'react';
+import { TouchableOpacity, Text, Image, StyleSheet, ViewStyle } from 'react-native';
+
+interface GoogleButtonProps {
+  onPress: () => void;
+  style?: ViewStyle;
+  disabled?: boolean;
+}
+
+const GoogleButton: React.FC<GoogleButtonProps> = ({ onPress, style, disabled = false }) => {
+  return (
+    <TouchableOpacity
+      style={[styles.button, style, disabled && styles.disabled]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Image
+        source={require('../assets/images/Googlelogo.png')}
+        style={styles.icon}
+        resizeMode="contain"
+      />
+      <Text style={styles.text}>Continue with Google</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#E0E0E0',
+    borderRadius: 8,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 8,
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333333',
+  },
+});
+
+export { GoogleButton };
+export default GoogleButton;

package/src/components/HeadingGroup.tsx

@@ -1,49 +1,49 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
-import { TEXT_STYLES } from '../theme';
-
-interface HeadingGroupProps {
-  kicker?: string;
-  title?: string;
-  style?: ViewStyle;
-}
-
-const HeadingGroup: React.FC<HeadingGroupProps> = ({
-  kicker = "Welcome to",
-  title = "Onairos",
-  style,
-}) => {
-  return (
-    <View style={[styles.container, style]}>
-      <Text style={styles.kicker}>{kicker}</Text>
-      <Text style={styles.title}>{title}</Text>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-  },
-  
-  kicker: {
-    ...TEXT_STYLES.kicker,
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '700', // Force bold weight
-    marginBottom: 4, // Small gap between kicker and title
-  },
-  
-  title: {
-    ...TEXT_STYLES.welcomeTitle,
-    fontFamily: 'IBM Plex Sans',
-    fontWeight: '700', // Force bold weight
-  },
-});
-
-export { HeadingGroup };
-export default HeadingGroup;
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+import { TEXT_STYLES } from '../theme';
+
+interface HeadingGroupProps {
+  kicker?: string;
+  title?: string;
+  style?: ViewStyle;
+}
+
+const HeadingGroup: React.FC<HeadingGroupProps> = ({
+  kicker = "Welcome to",
+  title = "Onairos",
+  style,
+}) => {
+  return (
+    <View style={[styles.container, style]}>
+      <Text style={styles.kicker}>{kicker}</Text>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  
+  kicker: {
+    ...TEXT_STYLES.kicker,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700', // Force bold weight
+    marginBottom: 4, // Small gap between kicker and title
+  },
+  
+  title: {
+    ...TEXT_STYLES.welcomeTitle,
+    fontFamily: 'IBM Plex Sans',
+    fontWeight: '700', // Force bold weight
+  },
+});
+
+export { HeadingGroup };
+export default HeadingGroup;

package/src/components/ModalHeader.tsx

@@ -1,125 +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;
+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

@@ -1,57 +1,59 @@
-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;
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+// Temporarily remove safe area hook to fix RCTEventEmitter error
+// 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,
+}) => {
+  // Use fallback values instead of safe area hook to avoid RCTEventEmitter error
+  const insets = { bottom: 20 }; // Fallback safe area
+
+  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;