@onairos/react-native 3.0.8 → 3.0.10

package/src/components/Overlay.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import {
   View,
   Text,
@@ -47,9 +47,9 @@ export const Overlay: React.FC<OverlayProps> = ({
   const [selections, setSelections] = useState<{ [key: string]: boolean }>({});
   const [details, setDetails] = useState<string>('');
   const [visible, setVisible] = useState(true);
-  const [slideAnim] = useState(new Animated.Value(SCREEN_HEIGHT));
+  const bottomSheetAnim = useRef(new Animated.Value(0)).current;
 
-  // Initialize selection state and slide animation on mount
+  // Initialize selection state on mount
   useEffect(() => {
     // Initialize selection state
     const initialSelections: { [key: string]: boolean } = {};
@@ -59,11 +59,11 @@ export const Overlay: React.FC<OverlayProps> = ({
     setSelections(initialSelections);
     getDetails();
 
-    // Animate the overlay sliding up from the bottom
-    Animated.timing(slideAnim, {
-      toValue: 0,
-      duration: 300,
+    // Animate the bottom sheet sliding up
+    Animated.spring(bottomSheetAnim, {
+      toValue: 1,
       useNativeDriver: true,
+      bounciness: 0,
     }).start();
   }, []);
 
@@ -97,14 +97,14 @@ export const Overlay: React.FC<OverlayProps> = ({
 
   const closeOverlay = useCallback(() => {
     // Animate the overlay sliding down
-    Animated.timing(slideAnim, {
-      toValue: SCREEN_HEIGHT,
-      duration: 300,
+    Animated.timing(bottomSheetAnim, {
+      toValue: 0,
+      duration: 250,
       useNativeDriver: true,
     }).start(() => {
       setVisible(false);
     });
-  }, [slideAnim]);
+  }, [bottomSheetAnim]);
 
   const confirmSelection = useCallback(async () => {
     try {
@@ -193,125 +193,132 @@ export const Overlay: React.FC<OverlayProps> = ({
   };
 
   const selectedCount = Object.values(selections).filter(Boolean).length;
+  
+  // Calculate the maximum height of the bottom sheet (80% of screen height)
+  const maxSheetHeight = SCREEN_HEIGHT * 0.8;
 
-  // Calculate the height of the bottom sheet (80% of screen height)
-  const sheetHeight = SCREEN_HEIGHT * 0.8;
-
-  // Main component rendering - Use Modal with absolute positioning
+  // Main component rendering
   return (
     <Modal
       visible={visible}
       transparent={true}
-      animationType="none" // We'll handle animation ourselves
+      animationType="none"
       onRequestClose={closeOverlay}
       statusBarTranslucent={true}
     >
-      <TouchableWithoutFeedback onPress={closeOverlay}>
-        <View style={styles.modalBackground}>
-          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
-            <Animated.View 
-              style={[
-                styles.bottomSheet,
-                darkMode && styles.darkContainer,
-                { 
-                  height: sheetHeight,
-                  transform: [{ translateY: slideAnim }] 
-                }
-              ]}
-            >
-              <View style={styles.handleContainer}>
-                <View style={[styles.handle, darkMode && styles.darkHandle]} />
-              </View>
-            
-              <View style={[styles.header, darkMode && styles.darkHeader]}>
-                <View style={styles.headerContent}>
-                  <View style={[styles.appIcon, darkMode && styles.darkAppIcon]}>
-                    <Text style={[styles.appIconText, darkMode && styles.darkText]}>A</Text>
-                  </View>
-                  <Text style={[styles.arrow, darkMode && styles.darkArrow]}>→</Text>
-                  <View style={[styles.onairosIcon, darkMode && styles.darkAppIcon]}>
-                    <Text style={[styles.onairosIconText, darkMode && styles.darkText]}>O</Text>
-                  </View>
+      <TouchableOpacity 
+        style={styles.modalOverlay} 
+        activeOpacity={1}
+        onPress={closeOverlay}
+      >
+        <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+          <Animated.View 
+            style={[
+              styles.bottomSheet,
+              darkMode && styles.darkContainer,
+              {
+                maxHeight: maxSheetHeight,
+                transform: [{
+                  translateY: bottomSheetAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [SCREEN_HEIGHT, 0],
+                  })
+                }]
+              }
+            ]}
+          >
+            <View style={styles.handleContainer}>
+              <View style={[styles.handle, darkMode && styles.darkHandle]} />
+            </View>
+          
+            <View style={[styles.header, darkMode && styles.darkHeader]}>
+              <View style={styles.headerContent}>
+                <View style={[styles.appIcon, darkMode && styles.darkAppIcon]}>
+                  <Text style={[styles.appIconText, darkMode && styles.darkText]}>A</Text>
+                </View>
+                <Text style={[styles.arrow, darkMode && styles.darkArrow]}>→</Text>
+                <View style={[styles.onairosIcon, darkMode && styles.darkAppIcon]}>
+                  <Text style={[styles.onairosIconText, darkMode && styles.darkText]}>O</Text>
                 </View>
-                <Text style={[styles.appName, darkMode && styles.darkSubText]}>{appName}</Text>
               </View>
+              <Text style={[styles.appName, darkMode && styles.darkSubText]}>{appName}</Text>
+            </View>
 
-              <Text style={[styles.privacyMessage, darkMode && styles.darkSubText]}>
-                No one will ever see your raw app data
-              </Text>
+            <Text style={[styles.privacyMessage, darkMode && styles.darkSubText]}>
+              No one will ever see your raw app data
+            </Text>
 
-              <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
-                {Object.entries(data).map(([key, value]) => (
-                  <View key={key} style={[styles.card, darkMode && styles.darkCard]}>
-                    <TouchableOpacity
-                      style={styles.checkboxContainer}
-                      onPress={() =>
-                        setSelections((prev) => ({
-                          ...prev,
-                          [key]: !prev[key],
-                        }))
-                      }
-                    >
-                      <View
-                        style={[
-                          styles.checkbox,
-                          selections[key] && styles.checkboxSelected,
-                          darkMode && styles.darkCheckbox,
-                        ]}
-                      />
-                      <View style={styles.cardContent}>
-                        <Text style={[styles.cardTitle, darkMode && styles.darkText]}>
-                          {value.type} Insight
-                        </Text>
-                        <Text style={[styles.cardDescription, darkMode && styles.darkSubText]}>
-                          {value.descriptions}
+            <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+              {Object.entries(data).map(([key, value]) => (
+                <View key={key} style={[styles.card, darkMode && styles.darkCard]}>
+                  <TouchableOpacity
+                    style={styles.checkboxContainer}
+                    onPress={() =>
+                      setSelections((prev) => ({
+                        ...prev,
+                        [key]: !prev[key],
+                      }))
+                    }
+                  >
+                    <View
+                      style={[
+                        styles.checkbox,
+                        selections[key] && styles.checkboxSelected,
+                        darkMode && styles.darkCheckbox,
+                      ]}
+                    />
+                    <View style={styles.cardContent}>
+                      <Text style={[styles.cardTitle, darkMode && styles.darkText]}>
+                        {value.type} Insight
+                      </Text>
+                      <Text style={[styles.cardDescription, darkMode && styles.darkSubText]}>
+                        {value.descriptions}
+                      </Text>
+                      {value.reward && (
+                        <Text style={[styles.cardReward, darkMode && styles.darkReward]}>
+                          Reward: {value.reward}
                         </Text>
-                        {value.reward && (
-                          <Text style={[styles.cardReward, darkMode && styles.darkReward]}>
-                            Reward: {value.reward}
-                          </Text>
-                        )}
-                      </View>
-                    </TouchableOpacity>
-                  </View>
-                ))}
-              </ScrollView>
+                      )}
+                    </View>
+                  </TouchableOpacity>
+                </View>
+              ))}
+            </ScrollView>
 
-              <KeyboardAvoidingView
-                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-              >
-                <SafeAreaView>
-                  <View style={[styles.footer, darkMode && styles.darkFooter]}>
-                    <TouchableOpacity
-                      style={[styles.footerButtonCancel, darkMode && styles.darkFooterButton]}
-                      onPress={closeOverlay}
-                    >
-                      <Text style={[styles.footerButtonText, darkMode && styles.darkSubText]}>Cancel</Text>
-                    </TouchableOpacity>
-                    <Text style={[styles.selectedCount, darkMode && styles.darkSubText]}>
-                      Selected: {selectedCount}
+            <KeyboardAvoidingView
+              behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            >
+              <SafeAreaView>
+                <View style={[styles.footer, darkMode && styles.darkFooter]}>
+                  <TouchableOpacity
+                    style={[styles.footerButtonCancel, darkMode && styles.darkFooterButton]}
+                    onPress={closeOverlay}
+                  >
+                    <Text style={[styles.footerButtonText, darkMode && styles.darkSubText]}>Cancel</Text>
+                  </TouchableOpacity>
+                  <Text style={[styles.selectedCount, darkMode && styles.darkSubText]}>
+                    Selected: {selectedCount}
+                  </Text>
+                  <TouchableOpacity
+                    style={[styles.footerButtonConfirm, darkMode && styles.darkFooterButtonConfirm]}
+                    onPress={confirmSelection}
+                  >
+                    <Text style={[styles.footerButtonTextConfirm, darkMode && styles.darkText]}>
+                      Confirm
                     </Text>
-                    <TouchableOpacity
-                      style={[styles.footerButtonConfirm, darkMode && styles.darkFooterButtonConfirm]}
-                      onPress={confirmSelection}
-                    >
-                      <Text style={[styles.footerButtonTextConfirm, darkMode && styles.darkText]}>
-                        Confirm
-                      </Text>
-                    </TouchableOpacity>
-                  </View>
-                </SafeAreaView>
-              </KeyboardAvoidingView>
-            </Animated.View>
-          </TouchableWithoutFeedback>
-        </View>
-      </TouchableWithoutFeedback>
+                  </TouchableOpacity>
+                </View>
+              </SafeAreaView>
+            </KeyboardAvoidingView>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+      </TouchableOpacity>
     </Modal>
   );
 };
 
 const styles = StyleSheet.create({
-  modalBackground: {
+  modalOverlay: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',
     justifyContent: 'flex-end',
@@ -320,6 +327,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
+    width: SCREEN_WIDTH,
     overflow: 'hidden',
   },
   handleContainer: {

package/src/components/UniversalOnboarding.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   View,
   Text,
@@ -7,8 +7,11 @@ import {
   ActivityIndicator,
   Dimensions,
   Platform,
+  Modal,
+  Animated,
+  SafeAreaView,
+  TouchableWithoutFeedback,
 } from 'react-native';
-import BottomSheet from '@gorhom/bottom-sheet';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { PlatformList } from './PlatformList';
 import { PinInput } from './PinInput';
@@ -17,7 +20,7 @@ import { useConnections } from '../hooks/useConnections';
 import { COLORS } from '../constants';
 import type { UniversalOnboardingProps, ConnectionStatus } from '../types';
 
-const { height } = Dimensions.get('window');
+const { height, width } = Dimensions.get('window');
 
 export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   visible,
@@ -29,8 +32,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   embedd = false,
   debug = false,
   test = false,
+  preferredPlatform,
 }) => {
-  const bottomSheetRef = useRef<BottomSheet>(null);
   const [step, setStep] = useState<'connect' | 'pin' | 'training'>('connect');
   const [connections, setConnections] = useState<ConnectionStatus>({});
   const [pin, setPin] = useState<string>('');
@@ -39,6 +42,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     progress: number;
     eta: string;
   }>({ progress: 0, eta: '' });
+  const [slideAnim] = useState(new Animated.Value(height));
 
   const {
     connectPlatform,
@@ -47,12 +51,15 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     isConnecting,
   } = useConnections();
 
-  const snapPoints = useMemo(() => ['90%'], []);
-
   useEffect(() => {
     if (visible) {
-      bottomSheetRef.current?.expand();
       loadInitialStatus();
+      // Animate in
+      Animated.spring(slideAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        bounciness: 0,
+      }).start();
       
       // Debug mode for Expo Go
       if (debug || Platform.OS === 'web') {
@@ -65,10 +72,36 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
           });
         }
       }
+      
+      // If there's a preferred platform, pre-connect
+      if (preferredPlatform && debug) {
+        setConnections(prev => ({
+          ...prev,
+          [preferredPlatform]: { userName: `${preferredPlatform}_user`, connected: true }
+        }));
+      }
     } else {
-      bottomSheetRef.current?.close();
+      // Animate out
+      Animated.timing(slideAnim, {
+        toValue: height,
+        duration: 250,
+        useNativeDriver: true,
+      }).start(() => {
+        // Reset state if needed
+      });
     }
-  }, [visible]);
+  }, [visible, preferredPlatform]);
+
+  const handleClose = () => {
+    // Animate out and then call onClose
+    Animated.timing(slideAnim, {
+      toValue: height,
+      duration: 250,
+      useNativeDriver: true,
+    }).start(() => {
+      onClose();
+    });
+  };
 
   const loadInitialStatus = useCallback(async () => {
     const status = await getConnectionStatus();
@@ -111,7 +144,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
     }, 1000);
   }, [connections, onComplete, selectedTier, requestData]);
 
-  const canProceedToPin = useMemo(() => {
+  const canProceedToPin = useCallback(() => {
     const connectedPlatforms = Object.values(connections).filter(Boolean).length;
     return connectedPlatforms >= 2;
   }, [connections]);
@@ -119,8 +152,8 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
   const renderHeader = () => (
     <View style={styles.header}>
       <Icon name="auto_awesome" size={24} color={COLORS.primary} />
-      <Text style={styles.headerTitle}>Connect with Onairos</Text>
-      <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+      <Text style={styles.headerTitle}>Connect with {AppName}</Text>
+      <TouchableOpacity onPress={handleClose} style={styles.closeButton}>
         <Icon name="close" size={24} color="#000" />
       </TouchableOpacity>
     </View>
@@ -134,7 +167,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
             connections={connections}
             onToggle={handlePlatformToggle}
             isLoading={isConnecting}
-            canProceed={canProceedToPin}
+            canProceed={canProceedToPin()}
             onProceed={() => setStep('pin')}
           />
         );
@@ -151,7 +184,7 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
         return (
           <TrainingModal
             visible={step === 'training'}
-            onClose={onClose}
+            onClose={handleClose}
             onComplete={() => {
               onComplete('https://api2.onairos.uk', 'dummy-token', {
                 pin,
@@ -164,40 +197,84 @@ export const UniversalOnboarding: React.FC<UniversalOnboardingProps> = ({
             username="demo_user"
             progress={training.progress}
             eta={training.eta}
-            onCancel={onClose}
+            onCancel={handleClose}
           />
         );
     }
   };
 
+  if (!visible) return null;
+
   return (
-    <BottomSheet
-      ref={bottomSheetRef}
-      snapPoints={snapPoints}
-      enablePanDownToClose
-      onClose={onClose}
-      index={visible ? 0 : -1}
+    <Modal
+      visible={visible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={handleClose}
     >
-      <View style={styles.container}>
-        {renderHeader()}
-        {renderContent()}
-      </View>
-    </BottomSheet>
+      <TouchableWithoutFeedback onPress={handleClose}>
+        <View style={styles.modalOverlay}>
+          <TouchableWithoutFeedback onPress={e => e.stopPropagation()}>
+            <Animated.View 
+              style={[
+                styles.bottomSheet,
+                {
+                  transform: [{ translateY: slideAnim }],
+                }
+              ]}
+            >
+              <SafeAreaView style={styles.container}>
+                <View style={styles.handleContainer}>
+                  <View style={styles.handle} />
+                </View>
+                {renderHeader()}
+                {renderContent()}
+              </SafeAreaView>
+            </Animated.View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
   );
 };
 
 const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  bottomSheet: {
+    backgroundColor: '#fff',
+    width: width,
+    height: height * 0.9,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    overflow: 'hidden',
+  },
   container: {
     flex: 1,
     backgroundColor: '#fff',
   },
+  handleContainer: {
+    width: '100%',
+    alignItems: 'center',
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  handle: {
+    width: 40,
+    height: 5,
+    borderRadius: 3,
+    backgroundColor: '#E0E0E0',
+  },
   header: {
     flexDirection: 'row',
     alignItems: 'center',
     padding: 16,
     backgroundColor: COLORS.headerBg,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
   },
   headerTitle: {
     flex: 1,

package/src/types.ts

@@ -44,13 +44,14 @@ export interface OnairosButtonProps {
   buttonHeight?: number;
   hasStroke?: boolean;
   enabled?: boolean;
-  buttonForm?: 'default' | 'login' | 'signup';
+  buttonForm?: 'default' | 'login' | 'signup' | 'connect';
   onRejection?: (error?: string) => void;
   onResolved?: (apiUrl: string, token: string, userData: any) => void;
   preCheck?: () => Promise<boolean>;
   color?: string;
   swerv?: boolean;
   debug?: boolean;
+  darkMode?: boolean;
   preferredPlatform?: string;
   testMode?: boolean;
 }