Polished animated container and homepage

src/components/AnimatedContainer/AnimatedContainer.tsx

@@ -9,22 +9,34 @@ export interface props {
 
 export default function AnimatedContainer(props: props) {
   return (
-    <View style={styles.container}>
-      <MotiScrollView
-        from={{
-          opacity: 0,
-          backgroundColor: colors.orange_1,
-          flex: 1,
-        }}
-        animate={{
-          opacity: 1,
-          backgroundColor: colors.blue_2,
-          flex: 1,
-        }}
-        transition={{ type: "timing", duration: 300 }}
-      >
-        {props.children}
-      </MotiScrollView>
-    </View>
+    <MotiScrollView
+      contentContainerStyle={{
+        alignItems: "center",
+        alignSelf: "center",
+        justifyContent: "flex-start",
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+      }}
+      from={{
+        borderRadius: 0,
+        backgroundColor: colors.orange_2,
+        paddingTop: 4,
+        paddingBottom: 4,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
+      }}
+      animate={{
+        borderRadius: 15,
+        backgroundColor: colors.blue_2,
+        paddingTop: 16,
+        paddingBottom: 16,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
+      }}
+      transition={{ type: "timing", duration: 300 }}
+    >
+      {props.children}
+    </MotiScrollView>
   );
 }

src/routes/Home/Home.tsx

@@ -47,7 +47,7 @@ export default function Home() {
   };
   function CustomMap() {
     if (dist !== null && location !== null) {
-      if (dist <= 1) {
+      if (dist >= 1) {
         // Just switch this condition for map debugging
         return <MapView style={styles.map} initialRegion={ustpCoords} />;
       } else {

src/styles.tsx

@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
     marginVertical: "5%",
     width: "92%",
     borderRadius: 15,
-    backgroundColor: colors.blue_2,
+    // backgroundColor: colors.blue_2,
     alignItems: "center",
     alignSelf: "center",
     paddingTop: 32,