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={{
+      contentContainerStyle={{
-          opacity: 0,
+        alignItems: "center",
-          backgroundColor: colors.orange_1,
+        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={{
-          opacity: 1,
+        borderRadius: 15,
         backgroundColor: colors.blue_2,
-          flex: 1,
+        paddingTop: 16,
+        paddingBottom: 16,
+        marginHorizontal: "4%",
+        marginVertical: "5%",
       }}
       transition={{ type: "timing", duration: 300 }}
     >
       {props.children}
     </MotiScrollView>
-    </View>
   );
 }

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,