erweiterte settings animation

screens/Login.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 import { View, Text, ScrollView, Button, StyleSheet, TouchableOpacity, ActivityIndicator, Alert, Animated } from 'react-native';
 import { SettingsContext } from '../SettingsProvider';
 import { useColors } from '../common/colors';
@@ -21,7 +21,10 @@ const Login = () => {
     const [requireAuth, setRequireAuth] = useState(settings.requireAuth);
     const [isSaving, setIsSaving] = useState(false);
     const [showAdvanced, setShowAdvanced] = useState(false);
-    const [rotateAnim] = useState(new Animated.Value(0));
+    const [rotateAnim] = useState(new Animated.Value(0)); // Animation state for the arrow
+    const [advancedHeightAnim] = useState(new Animated.Value(0)); // Animation state for the advanced settings height
+
+    const advancedSectionRef = useRef(null);
 
     useEffect(() => {
         if (settings) {
@@ -64,11 +67,20 @@ const Login = () => {
     const toggleAdvancedSettings = () => {
         setShowAdvanced(!showAdvanced);
 
+        // Rotate the arrow
         Animated.timing(rotateAnim, {
             toValue: showAdvanced ? 0 : 1,
             duration: 200,
             useNativeDriver: true,
         }).start();
+
+        // Animate the height of the advanced settings
+        const targetHeight = showAdvanced ? 0 : 150; // You can adjust this height
+        Animated.timing(advancedHeightAnim, {
+            toValue: targetHeight,
+            duration: 300,
+            useNativeDriver: false,
+        }).start();
     };
 
     const arrowRotation = rotateAnim.interpolate({
@@ -86,11 +98,6 @@ const Login = () => {
             marginTop: 8,
             marginBottom: 6,
         },
-        title: {
-            fontWeight: 'bold',
-            marginBottom: 3,
-            fontSize: 32,
-        },
         section: {
             marginBottom: 40,
         },
@@ -109,12 +116,16 @@ const Login = () => {
             marginTop: 20,
             flexDirection: 'row',
             alignItems: 'center',
+            justifyContent: 'flex-start',
         },
         advancedButtonText: {
             marginLeft: 8,
             fontSize: 16,
             color: colors.text,
         },
+        advancedSection: {
+            overflow: 'hidden',
+        },
     });
 
     return (
@@ -142,18 +153,18 @@ const Login = () => {
                     {isSaving && <ActivityIndicator size="small" color={colors.primary} style={styles.activityindicator} />}
                 </View>
 
-                {/* Touchable button with arrow */}
                 <TouchableOpacity style={styles.arrowContainer} onPress={toggleAdvancedSettings}>
                     <Animated.View style={{ transform: [{ rotate: arrowRotation }] }}>
-                    <FontAwesome5 name="angle-right" size={24} color={colors.textAccent} />
+                        <FontAwesome5 name="angle-right" size={24} color={colors.textAccent} />
                     </Animated.View>
                     <Text style={styles.advancedButtonText}>
                         {showAdvanced ? 'Erweiterte Einstellungen verbergen' : 'Erweiterte Einstellungen anzeigen'}
                     </Text>
                 </TouchableOpacity>
 
-                {showAdvanced && (
-                    <View style={styles.section}>
+                {/* Animated section for advanced settings */}
+                <Animated.View style={[styles.advancedSection, { height: advancedHeightAnim }]}>
+                    <View ref={advancedSectionRef}>
                         <ThemeText style={styles.label}>URL</ThemeText>
                         <ThemeTextInput
                             value={url}
@@ -168,7 +179,7 @@ const Login = () => {
                             />
                         </View>
                     </View>
-                )}
+                </Animated.View>
 
                 <Credits />
             </ScrollView>