feat: refactor bottom container animation and style handling in BrowserScreen

Author: afnx

src/features/browser/screens/BrowserScreen/index.tsx

@@ -55,30 +55,33 @@ export default function BrowserScreen() {
     outputRange: [KEYBOARD_CLOSED_HEIGHT, KEYBOARD_OPENED_HEIGHT],
   });
 
-  const addressBarStyle = useMemo(
+  const bottomContainerY = useMemo(() => new Animated.Value(0), []);
+
+  useEffect(() => {
+    Animated.timing(bottomContainerY, {
+      toValue: showBottomContainer ? 0 : 200,
+      duration: 400,
+      useNativeDriver: true,
+    }).start();
+  }, [showBottomContainer, bottomContainerY]);
+
+  const bottomContainerStyle = useMemo(
     () => [
       {
         transform: [
           {
             translateY: Animated.add(height, offset),
           },
+          {
+            translateY: bottomContainerY,
+          },
         ],
       },
       { backgroundColor: "white" },
     ],
-    [height, offset]
+    [height, offset, bottomContainerY]
   );
 
-  const bottomContainerY = useMemo(() => new Animated.Value(0), []);
-
-  useEffect(() => {
-    Animated.timing(bottomContainerY, {
-      toValue: showBottomContainer ? 0 : 200,
-      duration: 400,
-      useNativeDriver: true,
-    }).start();
-  }, [showBottomContainer, bottomContainerY]);
-
   return (
     <View style={{ flex: 1 }}>
       <SafeAreaView
@@ -96,25 +99,11 @@ export default function BrowserScreen() {
         </View>
       </SafeAreaView>
 
-      <Animated.View
-        style={[
-          styles.bottomContainer,
-          {
-            backgroundColor: "white",
-            transform: [{ translateY: bottomContainerY }],
-            position: "absolute",
-            left: 0,
-            right: 0,
-            bottom: 0,
-          },
-        ]}
-      >
-        <Animated.View style={addressBarStyle}>
-          {showAddressBar && (
-            <AddressBar onFocusChange={onAddressBarFocusChange} />
-          )}
-          {!showAddressBar && <AddressBarDisplay />}
-        </Animated.View>
+      <Animated.View style={[styles.bottomContainer, bottomContainerStyle]}>
+        {showAddressBar && (
+          <AddressBar onFocusChange={onAddressBarFocusChange} />
+        )}
+        {!showAddressBar && <AddressBarDisplay />}
         {/* Toolbar contains the SafeAreaView */}
         <Toolbar />
       </Animated.View>
@@ -132,5 +121,10 @@ const styles = StyleSheet.create({
   },
   bottomContainer: {
     width: "100%",
+    backgroundColor: "white",
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
   },
 });