diff --git a/src/components/OnlineList/MultipleModeBar.tsx b/src/components/OnlineList/MultipleModeBar.tsx
index 60664d6..158709f 100644
--- a/src/components/OnlineList/MultipleModeBar.tsx
+++ b/src/components/OnlineList/MultipleModeBar.tsx
@@ -53,21 +53,23 @@ export default forwardRef<MultipleModeBarType, MultipleModeBarProps>(({ onSelect
     // console.log('show List')
     setVisible(true)
     setAnimatPlayed(false)
-    animTranslateY.setValue(20)
+    requestAnimationFrame(() => {
+      animTranslateY.setValue(20)
 
-    Animated.parallel([
-      Animated.timing(animFade, {
-        toValue: 0.92,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-      Animated.timing(animTranslateY, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      setAnimatPlayed(true)
+      Animated.parallel([
+        Animated.timing(animFade, {
+          toValue: 0.92,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animTranslateY, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setAnimatPlayed(true)
+      })
     })
   }, [animFade, animTranslateY])
 
diff --git a/src/components/SearchTipList/index.tsx b/src/components/SearchTipList/index.tsx
index 91c7a0a..5e2f26a 100644
--- a/src/components/SearchTipList/index.tsx
+++ b/src/components/SearchTipList/index.tsx
@@ -47,28 +47,29 @@ const Component = <T extends ItemT<T>>({ onPressBg = noop, ...props }: SearchTip
     if (!heightRef.current) return
     setVisible(true)
     setAnimatPlayed(false)
+    requestAnimationFrame(() => {
+      translateY.setValue(-heightRef.current / 2)
+      scaleY.setValue(0)
 
-    translateY.setValue(-heightRef.current / 2)
-    scaleY.setValue(0)
-
-    Animated.parallel([
+      Animated.parallel([
       // Animated.timing(fade, {
       //   toValue: 1,
       //   duration: 300,
       //   useNativeDriver: true,
       // }),
-      Animated.timing(translateY, {
-        toValue: 0,
-        duration: 300,
-        useNativeDriver: true,
-      }),
-      Animated.timing(scaleY, {
-        toValue: 1,
-        duration: 300,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      setAnimatPlayed(true)
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scaleY, {
+          toValue: 1,
+          duration: 300,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setAnimatPlayed(true)
+      })
     })
   }, [translateY, scaleY])
 
diff --git a/src/components/common/Modal.tsx b/src/components/common/Modal.tsx
index 59b2742..a2df19f 100644
--- a/src/components/common/Modal.tsx
+++ b/src/components/common/Modal.tsx
@@ -1,6 +1,6 @@
 // import { createStyle } from '@/utils/tools'
-import React, { useImperativeHandle, forwardRef, useState, useMemo } from 'react'
-import { Modal, TouchableWithoutFeedback, View, type ModalProps as _ModalProps } from 'react-native'
+import React, { useImperativeHandle, forwardRef, useState, useMemo, useCallback } from 'react'
+import { type LayoutChangeEvent, Modal, TouchableWithoutFeedback, View, type ModalProps as _ModalProps, StyleSheet } from 'react-native'
 import StatusBar from './StatusBar'
 // import { useDimensions } from '@/utils/hooks'
 
@@ -54,6 +54,7 @@ export default forwardRef<ModalType, ModalProps>(({
   ...props
 }: ModalProps, ref) => {
   const [visible, setVisible] = useState(false)
+  const [height, setHeight] = useState<number>(0)
   // const { window: windowSize } = useDimensions()
   const handleRequestClose = () => {
     if (keyHide) {
@@ -68,6 +69,11 @@ export default forwardRef<ModalType, ModalProps>(({
     }
   }
 
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    // console.log('e.nativeEvent.layout.height', e.nativeEvent.layout.height)
+    setHeight(e.nativeEvent.layout.height + StatusBar.currentHeight)
+  }, [])
+
   useImperativeHandle(ref, () => ({
     setVisible(_visible) {
       if (visible == _visible) return
@@ -89,12 +95,18 @@ export default forwardRef<ModalType, ModalProps>(({
       {...props}
     >
       {/* <StatusBar /> */}
+      <View style={StyleSheet.absoluteFill} onLayout={handleLayout} />
       {/* <View style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }}> */}
-      <TouchableWithoutFeedback style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }} onPress={handleBgClose}>
-        <View style={{ flex: 1, backgroundColor: bgColor }}>
-          {memoChildren}
-        </View>
-      </TouchableWithoutFeedback>
+      {
+        height == 0 ? null
+          : (
+              <TouchableWithoutFeedback style={{ flex: 1, paddingTop: statusBarPadding ? StatusBar.currentHeight : 0 }} onPress={handleBgClose}>
+                <View style={{ position: 'absolute', top: 0, left: 0, width: '100%', height, backgroundColor: bgColor }}>
+                  {memoChildren}
+                </View>
+              </TouchableWithoutFeedback>
+            )
+      }
       {/* </View> */}
     </Modal>
   )
diff --git a/src/screens/Home/Views/Mylist/MusicList/ListSearchBar.tsx b/src/screens/Home/Views/Mylist/MusicList/ListSearchBar.tsx
index 6fa70ae..a549b05 100644
--- a/src/screens/Home/Views/Mylist/MusicList/ListSearchBar.tsx
+++ b/src/screens/Home/Views/Mylist/MusicList/ListSearchBar.tsx
@@ -73,21 +73,23 @@ export default forwardRef<ListSearchBarType, ListSearchBarProps>(({ onSearch, on
     // console.log('show List')
     setVisible(true)
     setAnimatPlayed(false)
-    animTranslateY.setValue(-20)
+    requestAnimationFrame(() => {
+      animTranslateY.setValue(-20)
 
-    Animated.parallel([
-      Animated.timing(animFade, {
-        toValue: 0.92,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-      Animated.timing(animTranslateY, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      setAnimatPlayed(true)
+      Animated.parallel([
+        Animated.timing(animFade, {
+          toValue: 0.92,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animTranslateY, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setAnimatPlayed(true)
+      })
     })
   }, [animFade, animTranslateY])
 
diff --git a/src/screens/Home/Views/Mylist/MusicList/MultipleModeBar.tsx b/src/screens/Home/Views/Mylist/MusicList/MultipleModeBar.tsx
index 56fd433..32ec8c1 100644
--- a/src/screens/Home/Views/Mylist/MusicList/MultipleModeBar.tsx
+++ b/src/screens/Home/Views/Mylist/MusicList/MultipleModeBar.tsx
@@ -55,21 +55,23 @@ export default forwardRef<MultipleModeBarType, MultipleModeBarProps>(({ onSelect
     // console.log('show List')
     setVisible(true)
     setAnimatPlayed(false)
-    animTranslateY.setValue(-20)
+    requestAnimationFrame(() => {
+      animTranslateY.setValue(-20)
 
-    Animated.parallel([
-      Animated.timing(animFade, {
-        toValue: 0.92,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-      Animated.timing(animTranslateY, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }),
-    ]).start(() => {
-      setAnimatPlayed(true)
+      Animated.parallel([
+        Animated.timing(animFade, {
+          toValue: 0.92,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animTranslateY, {
+          toValue: 0,
+          duration: 200,
+          useNativeDriver: true,
+        }),
+      ]).start(() => {
+        setAnimatPlayed(true)
+      })
     })
   }, [animFade, animTranslateY])