spring animation from bottom to top once when rendering.

src/components/ContainerBorderTopCurved.tsx

 import { containers } from "@styles/Commons";
+import { useEffect } from "react";
+import { Animated, Dimensions } from "react-native";
 import Box from "./bases/Box";
 
 type Props = { children: React.ReactNode };
 const ContainerBorderTopCurved = ({ children }: Props) => {
+	const animated = new Animated.Value(0);
+
+	useEffect(() => {
+		Animated.spring(animated, {
+			toValue: 1,
+			useNativeDriver: true,
+		}).start();
+	}, [animated]);
+
 	return (
+		<Animated.View
+			style={[
+				containers.containerFull,
+				{
+					transform: [
+						{
+							translateY: animated.interpolate({
+								inputRange: [0, 1],
+								outputRange: [Dimensions.get("window").height, 0],
+							}),
+						},
+					],
+				},
+			]}
+		>
 			<Box
 				backgroundColor={"white"}
 				borderTopLeftRadius={30}
@@ -12,6 +38,7 @@ const ContainerBorderTopCurved = ({ children }: Props) => {
 			>
 				{children}
 			</Box>
+		</Animated.View>
 	);
 };