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 (
-		<Box
-			backgroundColor={"white"}
-			borderTopLeftRadius={30}
-			borderTopRightRadius={30}
-			style={containers.containerFull}
+		<Animated.View
+			style={[
+				containers.containerFull,
+				{
+					transform: [
+						{
+							translateY: animated.interpolate({
+								inputRange: [0, 1],
+								outputRange: [Dimensions.get("window").height, 0],
+							}),
+						},
+					],
+				},
+			]}
 		>
-			{children}
-		</Box>
+			<Box
+				backgroundColor={"white"}
+				borderTopLeftRadius={30}
+				borderTopRightRadius={30}
+				style={containers.containerFull}
+			>
+				{children}
+			</Box>
+		</Animated.View>
 	);
 };