Animation changes

calblueprint · Nov 24, 2024 · e51f99d · e51f99d
1 parent f749aa3
commit e51f99d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/src/components/ToggleSwitch/ToggleSwitch.tsx b/src/components/ToggleSwitch/ToggleSwitch.tsx
@@ -43,15 +43,15 @@ export default function ToggleSwitch({
     if (!trueLabelLayout || !falseLabelLayout) return;
 
     Animated.timing(translateAnimation, {
-      duration: 200,
+      duration: 150,
       toValue: value
         ? trueLabelLayout.x + trueLabelLayout.width / 2 - 2
         : falseLabelLayout.x + falseLabelLayout.width / 2 + 2,
       useNativeDriver: true,
     }).start();
 
     Animated.timing(scaleAnimation, {
-      duration: 280,
+      duration: 150,
       toValue: (value ? trueLabelLayout.width : falseLabelLayout.width) ?? 0,
       useNativeDriver: true,
     }).start();

diff --git a/src/screens/TreeInfo/TreeInfo.tsx b/src/screens/TreeInfo/TreeInfo.tsx
@@ -60,14 +60,15 @@ export default function TreeInfoPage({ route }: TreeInfoPageProps) {
             style={styles.imageBg}
           ></ImageBackground>
           <View style={styles.body}>
-            <View>
+            <View style={styles.switch}>
               <ToggleSwitch
                 value={isEditing}
                 onValueChange={setIsEditing}
                 trueLabel="This tree"
                 falseLabel="Species"
               />
             </View>
+
             <View>
               <Text style={styles.header}>{treeData.species?.name ?? ''}</Text>
               <View style={styles.idPillFlex}>

diff --git a/src/screens/TreeInfo/styles.ts b/src/screens/TreeInfo/styles.ts
@@ -2,18 +2,16 @@ import { StyleSheet } from 'react-native';
 import colors from '@/styles/colors';
 
 export default StyleSheet.create({
-  // Container
   container: {
-    // flex: 1,
     paddingBottom: 40,
     backgroundColor: colors.white1,
   },
   imageBg: {
     flex: 1,
     height: 292,
   },
+  switch: { paddingBottom: 32 },
 
-  // Header
   headerFlex: {
     flex: 1,
     flexDirection: 'column',
@@ -66,7 +64,7 @@ export default StyleSheet.create({
   // Main body
   body: {
     paddingHorizontal: 42,
-    paddingTop: 48,
+    paddingTop: 20,
     marginBottom: 10,
     marginTop: -16,
     borderRadius: 20,