feat(example): replace expo-image-picker with custom ImagePickerSheet

Use TrueSheet + MediaLibrary to build a custom picker that
reads from original files, preserving GPS EXIF metadata.

Author: lodev09

example/src/App.tsx

@@ -1,25 +1,23 @@
 import { useEffect, useRef, useState } from 'react';
-import {
-  StyleSheet,
-  View,
-  Pressable,
-  Platform,
-  Linking,
-  Text,
-} from 'react-native';
+import { StyleSheet, View, Pressable, Linking, Text } from 'react-native';
 import { CameraView, useCameraPermissions } from 'expo-camera';
-import * as ImagePicker from 'expo-image-picker';
+
 import * as MediaLibrary from 'expo-media-library';
 import { Image } from 'expo-image';
 import * as Exify from '@lodev09/react-native-exify';
 import type { ExifTags } from '@lodev09/react-native-exify';
 
 import { mockPosition, json } from './utils';
 import { PromptSheet, type PromptSheetRef } from './components/PromptSheet';
+import {
+  ImagePickerSheet,
+  type ImagePickerSheetRef,
+} from './components/ImagePickerSheet';
 
 export default function App() {
   const cameraRef = useRef<CameraView>(null);
   const promptRef = useRef<PromptSheetRef>(null);
+  const pickerRef = useRef<ImagePickerSheetRef>(null);
   const [preview, setPreview] = useState<string>();
 
   const [cameraPermission, requestCameraPermission] = useCameraPermissions();
@@ -91,27 +89,16 @@ export default function App() {
     console.log('saved asset:', asset.uri);
 
     setPreview(asset.uri);
+    pickerRef.current?.refresh();
     await readExif(asset.uri);
   };
 
   const pickImage = async () => {
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ['images'],
-      quality: 1,
-    });
-
-    if (result.canceled) return null;
+    const result = await pickerRef.current?.pick();
+    if (!result) return null;
 
-    const asset = result.assets[0];
-    if (!asset) return null;
-
-    const uri =
-      Platform.OS === 'ios' && asset.assetId
-        ? `ph://${asset.assetId}`
-        : asset.uri;
-
-    setPreview(asset.uri);
-    return uri;
+    setPreview(result.preview);
+    return result.uri;
   };
 
   const openLibrary = async () => {
@@ -168,6 +155,7 @@ export default function App() {
     <View style={styles.container}>
       <CameraView ref={cameraRef} style={styles.camera} facing="back" />
       <PromptSheet ref={promptRef} />
+      <ImagePickerSheet ref={pickerRef} />
       <View style={styles.controls}>
         <Pressable
           onPress={openLibrary}

example/src/components/ImagePickerSheet.tsx

@@ -0,0 +1,192 @@
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import {
+  FlatList,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+  type ListRenderItemInfo,
+} from 'react-native';
+import * as MediaLibrary from 'expo-media-library';
+import { Image } from 'expo-image';
+import { TrueSheet } from '@lodev09/react-native-true-sheet';
+
+const NUM_COLUMNS = 3;
+const GAP = 2;
+const PAGE_SIZE = 60;
+
+export interface ImagePickerResult {
+  uri: string;
+  preview: string;
+}
+
+export interface ImagePickerSheetRef {
+  pick: () => Promise<ImagePickerResult | null>;
+  refresh: () => void;
+}
+
+export const ImagePickerSheet = forwardRef<ImagePickerSheetRef>(
+  (_props, ref) => {
+    const sheetRef = useRef<TrueSheet>(null);
+    const resolveRef = useRef<
+      ((result: ImagePickerResult | null) => void) | null
+    >(null);
+
+    const [assets, setAssets] = useState<MediaLibrary.Asset[]>([]);
+    const [endCursor, setEndCursor] = useState<string>();
+    const [hasMore, setHasMore] = useState(true);
+
+    const { width } = useWindowDimensions();
+    const itemSize = (width - GAP * (NUM_COLUMNS - 1)) / NUM_COLUMNS;
+
+    const loadAssets = useCallback(async (after?: string) => {
+      const result = await MediaLibrary.getAssetsAsync({
+        first: PAGE_SIZE,
+        after,
+        mediaType: MediaLibrary.MediaType.photo,
+        sortBy: [[MediaLibrary.SortBy.creationTime, false]],
+      });
+
+      setAssets((prev) =>
+        after ? [...prev, ...result.assets] : result.assets
+      );
+      setEndCursor(result.endCursor);
+      setHasMore(result.hasNextPage);
+    }, []);
+
+    const loadMore = useCallback(() => {
+      if (hasMore && endCursor) {
+        loadAssets(endCursor);
+      }
+    }, [hasMore, endCursor, loadAssets]);
+
+    useImperativeHandle(ref, () => ({
+      pick: () => {
+        loadAssets();
+        return new Promise<ImagePickerResult | null>((resolve) => {
+          resolveRef.current = resolve;
+          sheetRef.current?.present();
+        });
+      },
+      refresh: () => loadAssets(),
+    }));
+
+    const getAssetUri = useCallback((asset: MediaLibrary.Asset) => {
+      if (Platform.OS === 'ios') {
+        return `ph://${asset.id}`;
+      }
+      return asset.uri;
+    }, []);
+
+    const handleSelect = useCallback(
+      (asset: MediaLibrary.Asset) => {
+        const uri = getAssetUri(asset);
+        resolveRef.current?.({ uri, preview: asset.uri });
+        resolveRef.current = null;
+        sheetRef.current?.dismiss();
+      },
+      [getAssetUri]
+    );
+
+    const handleDismiss = useCallback(() => {
+      resolveRef.current?.(null);
+      resolveRef.current = null;
+    }, []);
+
+    const renderItem = useCallback(
+      ({ item }: ListRenderItemInfo<MediaLibrary.Asset>) => (
+        <Pressable
+          onPress={() => handleSelect(item)}
+          style={[styles.item, { width: itemSize, height: itemSize }]}
+        >
+          <Image
+            source={{ uri: item.uri }}
+            style={styles.image}
+            recyclingKey={item.id}
+          />
+        </Pressable>
+      ),
+      [handleSelect, itemSize]
+    );
+
+    const header = useCallback(
+      () => (
+        <View style={styles.header}>
+          <Text style={styles.title}>Recents</Text>
+          <Pressable
+            style={styles.cancelButton}
+            onPress={() => sheetRef.current?.dismiss()}
+          >
+            <Text style={styles.cancelText}>Cancel</Text>
+          </Pressable>
+        </View>
+      ),
+      []
+    );
+
+    return (
+      <TrueSheet
+        ref={sheetRef}
+        detents={[0.6, 1]}
+        scrollable
+        cornerRadius={14}
+        backgroundColor="#1c1c1e"
+        onDidDismiss={handleDismiss}
+        header={header}
+      >
+        <FlatList
+          data={assets}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          numColumns={NUM_COLUMNS}
+          columnWrapperStyle={styles.row}
+          onEndReached={loadMore}
+          onEndReachedThreshold={0.5}
+        />
+      </TrueSheet>
+    );
+  }
+);
+
+const keyExtractor = (item: MediaLibrary.Asset) => item.id;
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 10,
+  },
+  title: {
+    color: '#fff',
+    fontSize: 17,
+    fontWeight: '600',
+  },
+  cancelButton: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+  cancelText: {
+    color: '#0a84ff',
+    fontSize: 17,
+  },
+  row: {
+    gap: GAP,
+  },
+  item: {
+    overflow: 'hidden',
+  },
+  image: {
+    flex: 1,
+  },
+});