@oxyhq/services 5.8.9 → 5.8.11

package/src/ui/screens/SignInScreen.tsx

@@ -66,6 +66,13 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
     const logoAnim = useRef(new Animated.Value(0)).current;
     const progressAnim = useRef(new Animated.Value(initialStep ? 1.0 : 0.5)).current;
 
+    // Ensure animations are properly initialized
+    useEffect(() => {
+        fadeAnim.setValue(1);
+        slideAnim.setValue(0);
+        scaleAnim.setValue(1);
+    }, [fadeAnim, slideAnim, scaleAnim]);
+
     const { login, isLoading, user, isAuthenticated, sessions, oxyServices } = useOxy();
 
     const colors = useThemeColors(theme);
@@ -229,17 +236,10 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
 
     // Animation functions
     const animateTransition = useCallback((nextStep: number) => {
-        // Scale down current content
-        Animated.timing(scaleAnim, {
-            toValue: 0.95,
-            duration: 150,
-            useNativeDriver: Platform.OS !== 'web',
-        }).start();
-
-        // Fade out
+        // Use a shorter fade out duration to minimize white flash
         Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: 200,
+            toValue: 0.3, // Don't fade completely to 0, keep some opacity
+            duration: 100, // Faster fade out
             useNativeDriver: Platform.OS !== 'web',
         }).start(() => {
             setCurrentStep(nextStep);
@@ -248,23 +248,23 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
             slideAnim.setValue(-50);
             scaleAnim.setValue(0.95);
 
-            // Animate in new content
+            // Animate in new content with faster timing
             Animated.parallel([
                 Animated.timing(fadeAnim, {
                     toValue: 1,
-                    duration: 300,
+                    duration: 200, // Faster fade in
                     useNativeDriver: Platform.OS !== 'web',
                 }),
                 Animated.spring(slideAnim, {
                     toValue: 0,
-                    tension: 80,
-                    friction: 8,
+                    tension: 100, // Higher tension for faster animation
+                    friction: 6, // Lower friction for faster animation
                     useNativeDriver: Platform.OS !== 'web',
                 }),
                 Animated.spring(scaleAnim, {
                     toValue: 1,
-                    tension: 80,
-                    friction: 8,
+                    tension: 100, // Higher tension for faster animation
+                    friction: 6, // Lower friction for faster animation
                     useNativeDriver: Platform.OS !== 'web',
                 })
             ]).start();
@@ -407,6 +407,8 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
         <KeyboardAvoidingView
             style={[styles.container, { backgroundColor: colors.background }]}
             behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
+            enabled={Platform.OS !== 'web'}
         >
             <StatusBar
                 barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
@@ -417,6 +419,8 @@ const SignInScreen: React.FC<BaseScreenProps> = ({
                 contentContainerStyle={styles.scrollContent}
                 showsVerticalScrollIndicator={false}
                 keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="interactive"
+                automaticallyAdjustKeyboardInsets={Platform.OS === 'ios'}
             >
                 {renderCurrentStep()}
             </ScrollView>

package/src/ui/screens/SignUpScreen.tsx

@@ -634,6 +634,12 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
     const fadeAnim = useRef(new Animated.Value(1)).current;
     const slideAnim = useRef(new Animated.Value(0)).current;
 
+    // Ensure animations are properly initialized
+    useEffect(() => {
+        fadeAnim.setValue(1);
+        slideAnim.setValue(0);
+    }, [fadeAnim, slideAnim]);
+
     // Memoized styles
     const styles = useMemo(() => createAuthStyles(colors, theme), [colors, theme]);
 
@@ -653,8 +659,8 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
     // Animation functions
     const animateTransition = useCallback((nextStep: number) => {
         Animated.timing(fadeAnim, {
-            toValue: 0,
-            duration: 250,
+            toValue: 0.3, // Don't fade completely to 0, keep some opacity
+            duration: 100, // Faster fade out
             useNativeDriver: Platform.OS !== 'web',
         }).start(() => {
             setCurrentStep(nextStep);
@@ -663,12 +669,12 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
             Animated.parallel([
                 Animated.timing(fadeAnim, {
                     toValue: 1,
-                    duration: 250,
+                    duration: 200, // Faster fade in
                     useNativeDriver: Platform.OS !== 'web',
                 }),
                 Animated.timing(slideAnim, {
                     toValue: 0,
-                    duration: 300,
+                    duration: 250, // Slightly faster slide
                     useNativeDriver: Platform.OS !== 'web',
                 })
             ]).start();
@@ -825,6 +831,8 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
         <KeyboardAvoidingView
             style={[styles.container, { backgroundColor: colors.background }]}
             behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+            keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}
+            enabled={Platform.OS !== 'web'}
         >
             <StatusBar
                 barStyle={theme === 'dark' ? 'light-content' : 'dark-content'}
@@ -834,6 +842,8 @@ const SignUpScreen: React.FC<BaseScreenProps> = ({
                 contentContainerStyle={styles.scrollContent}
                 showsVerticalScrollIndicator={false}
                 keyboardShouldPersistTaps="handled"
+                keyboardDismissMode="interactive"
+                automaticallyAdjustKeyboardInsets={Platform.OS === 'ios'}
             >
                 {renderCurrentStep()}
             </ScrollView>

package/src/ui/styles/authStyles.ts

@@ -29,6 +29,7 @@ export const createAuthStyles = (colors: AuthThemeColors, theme: string) => Styl
     flex: 1,
     justifyContent: 'flex-start',
     alignItems: 'flex-start',
+    backgroundColor: colors.background, // Ensure background is maintained during transitions
   },
 
   // Header styles