fix: bin viewer bottom padding overlap

keystone-app/app/(tabs)/library.tsx

@@ -12,7 +12,7 @@ import {
   Animated,
   TouchableWithoutFeedback,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as MediaLibrary from 'expo-media-library';
 import { Image } from 'expo-image';
 import { StatusBar } from 'expo-status-bar';
@@ -47,6 +47,7 @@ function SkeletonAlbum() {
 }
 
 export default function LibraryScreen() {
+  const insets = useSafeAreaInsets();
   const [albums, setAlbums] = useState<AlbumWithCover[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [hasPermission, setHasPermission] = useState(false);
@@ -325,7 +326,7 @@ export default function LibraryScreen() {
             cachePolicy="memory-disk"
           />
           {viewerAsset && isViewerFromBin && (
-            <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, flexDirection: 'row', justifyContent: 'space-around', backgroundColor: 'rgba(0,0,0,0.8)', paddingVertical: 16, paddingBottom: 32 }}>
+            <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, flexDirection: 'row', justifyContent: 'space-around', backgroundColor: 'rgba(0,0,0,0.8)', paddingVertical: 16, paddingBottom: insets.bottom + 16 }}>
               <TouchableOpacity onPress={() => setShowRestoreMenu(true)} style={{ alignItems: 'center' }}>
                 <MaterialIcons name="restore" size={26} color="#1a73e8" />
                 <Text style={{ color: '#1a73e8', fontSize: 13, marginTop: 4 }}>Restore</Text>