Made AnimatedContainer scrollable

src/components/AnimatedContainer/AnimatedContainer.tsx

@@ -9,13 +9,22 @@ export interface props {
 
 export default function AnimatedContainer(props: props) {
   return (
-    <MotiView
-      style={styles.container}
-      from={{ opacity: 0, backgroundColor: colors.orange_1 }}
-      animate={{ opacity: 1, backgroundColor: colors.blue_2 }}
-      transition={{ type: "timing", duration: 300 }}
-    >
-      {props.children}
-    </MotiView>
+    <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>
   );
 }

src/styles.tsx

@@ -32,7 +32,8 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   container: {
-    marginTop: "5%",
+    flex: 1,
+    marginVertical: "5%",
     width: "92%",
     borderRadius: 15,
     backgroundColor: colors.blue_2,
@@ -108,8 +109,9 @@ const styles = StyleSheet.create({
     marginVertical: 6,
   },
   map: {
-    height: "50%",
+    height: 512,
     width: "90%",
+    alignSelf: "center",
   },
 });