feat: add photo picker with gallery grid
Photo grid from device gallery via expo-media-library Query API, permission handling with settings redirect, loading states, and corrupt asset resilience.
This commit is contained in:
Mathis Pruvot
266
app/picker.tsx
Normal file
266
app/picker.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Dimensions,
|
||||
FlatList,
|
||||
Image,
|
||||
Linking,
|
||||
Pressable,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { useRouter } from "expo-router";
|
||||
import * as MediaLibrary from "expo-media-library";
|
||||
import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
|
||||
import { X } from "phosphor-react-native";
|
||||
import { GlassCard, GlassButton, GlassPill } from "@/components/glass";
|
||||
import { useWallpaperStore } from "@/stores/wallpaper.store";
|
||||
import { requestGalleryPermission } from "@/services/media/gallery.service";
|
||||
import { colors, typography, spacing, layout } from "@/theme";
|
||||
|
||||
const { width: SCREEN_WIDTH } = Dimensions.get("window");
|
||||
const NUM_COLUMNS = 3;
|
||||
const IMAGE_GAP = 2;
|
||||
const IMAGE_SIZE = (SCREEN_WIDTH - IMAGE_GAP * (NUM_COLUMNS - 1)) / NUM_COLUMNS;
|
||||
|
||||
type Tab = "recent" | "favorites" | "albums";
|
||||
|
||||
interface PhotoItem {
|
||||
id: string;
|
||||
uri: string;
|
||||
}
|
||||
|
||||
export default function PickerScreen() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const router = useRouter();
|
||||
const setSourceImage = useWallpaperStore((s) => s.setSourceImage);
|
||||
const resetEditor = useWallpaperStore((s) => s.resetEditor);
|
||||
|
||||
const [tab, setTab] = useState<Tab>("recent");
|
||||
const [photos, setPhotos] = useState<PhotoItem[]>([]);
|
||||
const [hasPermission, setHasPermission] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const granted = await requestGalleryPermission();
|
||||
setHasPermission(granted);
|
||||
if (granted) {
|
||||
await loadPhotos(0);
|
||||
}
|
||||
setLoading(false);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const loadPhotos = useCallback(async (startOffset: number) => {
|
||||
try {
|
||||
const query = new MediaLibrary.Query()
|
||||
.eq(MediaLibrary.AssetField.MEDIA_TYPE, MediaLibrary.MediaType.IMAGE)
|
||||
.orderBy({
|
||||
key: MediaLibrary.AssetField.CREATION_TIME,
|
||||
ascending: false,
|
||||
})
|
||||
.limit(60)
|
||||
.offset(startOffset);
|
||||
|
||||
const assets = await query.exe();
|
||||
|
||||
// Resolve URIs from assets
|
||||
const items: PhotoItem[] = [];
|
||||
for (const asset of assets) {
|
||||
try {
|
||||
const uri = await asset.getUri();
|
||||
items.push({ id: asset.id, uri });
|
||||
} catch {
|
||||
// Skip assets that can't be resolved (corrupted, cloud-only, etc.)
|
||||
}
|
||||
}
|
||||
|
||||
setPhotos((prev) => (startOffset === 0 ? items : [...prev, ...items]));
|
||||
setOffset(startOffset + assets.length);
|
||||
setHasMore(assets.length === 60);
|
||||
} catch {
|
||||
// Gallery read error — device-specific edge case
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadMore = useCallback(() => {
|
||||
if (hasMore) {
|
||||
loadPhotos(offset);
|
||||
}
|
||||
}, [hasMore, offset, loadPhotos]);
|
||||
|
||||
const handleSelectPhoto = useCallback(
|
||||
(item: PhotoItem) => {
|
||||
resetEditor();
|
||||
setSourceImage(item.uri);
|
||||
router.replace("/editor/new");
|
||||
},
|
||||
[router, setSourceImage, resetEditor]
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={[styles.container, styles.centered, { paddingTop: insets.top }]}>
|
||||
<ActivityIndicator color={colors.text.secondary} size="large" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (!hasPermission) {
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
<PermissionDenied />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { paddingTop: insets.top }]}>
|
||||
{/* Header */}
|
||||
<Animated.View entering={FadeIn.duration(300)} style={styles.header}>
|
||||
<GlassCard variant="subtle" radius="lg" padding={12}>
|
||||
<View style={styles.headerRow}>
|
||||
<Pressable onPress={() => router.back()}>
|
||||
<X size={20} color={colors.text.primary} weight="light" />
|
||||
</Pressable>
|
||||
<Text style={typography.heading}>Choisir une photo</Text>
|
||||
<View style={{ width: 24 }} />
|
||||
</View>
|
||||
</GlassCard>
|
||||
</Animated.View>
|
||||
|
||||
{/* Tab pills */}
|
||||
<Animated.View entering={FadeInDown.delay(100).duration(300)} style={styles.tabs}>
|
||||
<GlassPill
|
||||
label="Récentes"
|
||||
selected={tab === "recent"}
|
||||
onPress={() => setTab("recent")}
|
||||
/>
|
||||
<GlassPill
|
||||
label="Favoris"
|
||||
selected={tab === "favorites"}
|
||||
onPress={() => setTab("favorites")}
|
||||
/>
|
||||
<GlassPill
|
||||
label="Albums"
|
||||
selected={tab === "albums"}
|
||||
onPress={() => setTab("albums")}
|
||||
/>
|
||||
</Animated.View>
|
||||
|
||||
{/* Photo grid */}
|
||||
<FlatList
|
||||
data={photos}
|
||||
numColumns={NUM_COLUMNS}
|
||||
keyExtractor={(item) => item.id}
|
||||
onEndReached={loadMore}
|
||||
onEndReachedThreshold={0.5}
|
||||
showsVerticalScrollIndicator={false}
|
||||
contentContainerStyle={[styles.grid, photos.length === 0 && styles.centered]}
|
||||
ListEmptyComponent={
|
||||
<View style={styles.emptyGallery}>
|
||||
<Text style={[typography.bodySecondary, { textAlign: "center" }]}>
|
||||
Aucune photo trouvée dans votre galerie
|
||||
</Text>
|
||||
</View>
|
||||
}
|
||||
renderItem={({ item }) => (
|
||||
<Pressable
|
||||
onPress={() => handleSelectPhoto(item)}
|
||||
style={({ pressed }) => [
|
||||
styles.imageContainer,
|
||||
pressed && styles.imagePressed,
|
||||
]}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: item.uri }}
|
||||
style={styles.image}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function PermissionDenied() {
|
||||
return (
|
||||
<View style={styles.permissionContainer}>
|
||||
<GlassCard variant="medium" radius="xl" padding={32}>
|
||||
<Text style={[typography.heading, { textAlign: "center" }]}>
|
||||
Accès aux photos requis
|
||||
</Text>
|
||||
<Text
|
||||
style={[
|
||||
typography.bodySecondary,
|
||||
{ textAlign: "center", marginTop: 8, marginBottom: 20 },
|
||||
]}
|
||||
>
|
||||
Lively a besoin d'accéder à votre galerie{"\n"}pour créer des fonds
|
||||
d'écran animés
|
||||
</Text>
|
||||
<GlassButton
|
||||
label="Ouvrir les réglages"
|
||||
onPress={() => Linking.openSettings()}
|
||||
variant="primary"
|
||||
size="md"
|
||||
/>
|
||||
</GlassCard>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: layout.screenPadding,
|
||||
marginBottom: spacing.sm,
|
||||
},
|
||||
headerRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
},
|
||||
tabs: {
|
||||
flexDirection: "row",
|
||||
paddingHorizontal: layout.screenPadding,
|
||||
marginBottom: spacing.md,
|
||||
},
|
||||
grid: {
|
||||
paddingBottom: 40,
|
||||
},
|
||||
imageContainer: {
|
||||
width: IMAGE_SIZE,
|
||||
height: IMAGE_SIZE,
|
||||
padding: IMAGE_GAP / 2,
|
||||
},
|
||||
image: {
|
||||
flex: 1,
|
||||
},
|
||||
imagePressed: {
|
||||
opacity: 0.7,
|
||||
},
|
||||
permissionContainer: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
paddingHorizontal: layout.screenPadding + spacing.md,
|
||||
},
|
||||
centered: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
emptyGallery: {
|
||||
paddingTop: 80,
|
||||
paddingHorizontal: layout.screenPadding,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user