feat: update types

example/App.tsx

@@ -9,36 +9,35 @@ import {
   SafeAreaView,
   Dimensions,
 } from 'react-native';
-import {ImageSelector} from '../src';
+import {ImageSelector, useImageSelect} from '../src';
 
 export default function App() {
-  const [isVisible, setIsVisible] = React.useState(false);
-  const [selectedImages, setSelectedImages] = React.useState<string[]>();
+  const {
+    isImageSelectVisible,
+    openImageSelect,
+    onCancel,
+    selectedImages,
+    onDone,
+  } = useImageSelect();
 
   return (
     <SafeAreaView>
       <ScrollView>
         <View style={styles.container}>
           <Text style={styles.title}>react-native-image-select</Text>
           <View style={styles.button}>
-            <Button
-              title="Open ImagePicker"
-              onPress={() => setIsVisible(true)}
-            />
+            <Button title="Open ImagePicker" onPress={openImageSelect} />
           </View>
 
           <View>
             {selectedImages?.map(i => (
-              <Image key={i} source={{uri: i}} style={styles.image} />
+              <Image key={i.uri} source={{uri: i.uri}} style={styles.image} />
             ))}
           </View>
           <ImageSelector
-            isVisible={isVisible}
-            onCancel={() => setIsVisible(false)}
-            onDone={() => setIsVisible(false)}
-            callback={_selectedImages =>
-              setSelectedImages(_selectedImages.map(s => s!.uri))
-            }
+            isVisible={isImageSelectVisible}
+            onCancel={onCancel}
+            onDone={onDone}
           />
         </View>
       </ScrollView>

src/ImageSelector.tsx

@@ -1,15 +1,15 @@
 import React, { forwardRef, memo } from 'react';
 import { ImageSelectContainer } from './components/ImageSelectContainer';
 import { ImageSelectContent } from './components/ImageSelectContent';
-import { SelectedImage } from './types';
+import { SelectedImages } from './types';
 import { ImageSelectContextHandler } from './context/ImageSelectContext.type';
 import ImageSelectContext from './context/ImageSelectContext';
 
 interface ImageSelectorProps {
   onCancel: () => void;
   isVisible: boolean;
   startIndex?: number;
-  onDone: (selectedImages: (SelectedImage | undefined)[]) => void;
+  onDone: (selectedImages: SelectedImages) => void;
 }
 
 function ImageSelectorComponent() {

src/context/ImageSelectContext.type.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { CameraRollReturned } from '../hooks/useImageSelectHandlers';
-import { SelectedImage } from '../types';
+import { SelectedImages } from '../types';
 
 export interface ImageSelectContextProps {
   onCancel: () => void;
   isVisible: boolean;
   startIndex?: number;
   children: React.ReactNode;
-  onDone: (selectedImages: (SelectedImage | undefined)[]) => void;
+  onDone: (selectedImages: SelectedImages) => void;
 }
 
 export interface ImageSelectContextHandler {

src/hooks/useCameraRollState/useCameraRollState.ts

@@ -11,12 +11,12 @@ import {
   CameraRoll,
   PhotoIdentifier,
 } from '@react-native-camera-roll/camera-roll';
-import { SelectedImage } from '../../types';
+import { SelectedImages } from '../../types';
 import { normalizeImagePicker } from './CameraRollState.schema';
 
 const convertCameraRollPicturesToSelectedImageType = (
   edges: PhotoIdentifier[]
-): SelectedImage[] => {
+): SelectedImages => {
   return edges.map((edge) => {
     return {
       filename: edge.node.image.filename!,
@@ -162,13 +162,13 @@ export function useCameraRollState(isVisible: boolean) {
 
   const getImagesById = useCallback(
     (ids: string[]) => {
-      return ids.map((a) => cameraRollState.entities[a]);
+      return ids.map((a) => cameraRollState.entities[a]!);
     },
     [cameraRollState.entities]
   );
 
   const photos = useMemo(
-    () => cameraRollState.ids.map((uri) => cameraRollState.entities[uri]),
+    () => cameraRollState.ids.map((uri) => cameraRollState.entities[uri]!),
     [cameraRollState.ids, cameraRollState.entities]
   );
 

src/hooks/useImageSelectHandlers.ts

@@ -6,13 +6,13 @@ import { hasAndroidGalleryPermission } from '../helpers/hasAndroidGalleryPermiss
 import { isAboveIOS14 } from '../helpers/isAboveIOS14';
 import { useCameraRollState } from './useCameraRollState/useCameraRollState';
 import { useSelectedImage } from './useSelectedImage/useSelectedImage';
-import { SelectedImage } from 'src/types';
+import { SelectedImages } from 'src/types';
 import { NativeEventSubscription } from 'react-native';
 import { AppState } from 'react-native';
 import { EmitterSubscription } from 'react-native';
 
 export interface CameraRollReturned {
-  photos: (SelectedImage | undefined)[];
+  photos: SelectedImages;
   onEndReached: () => void;
   isReloading: boolean;
   isInitializing: boolean;
@@ -24,7 +24,7 @@ export interface CameraRollReturned {
   handleRestoreSelectedImages: () => void;
   handleClearSelectedImages: () => void;
   selectedImages: string[];
-  getImagesById: (ids: string[]) => (SelectedImage | undefined)[];
+  getImagesById: (ids: string[]) => SelectedImages;
 }
 
 export const useImageSelectHandlers = (

src/types/index.d.ts

@@ -17,3 +17,5 @@ export interface SelectedImage {
   orientation: number | null; // Adnroid only
   selectedPosition: number | undefined;
 }
+
+export type SelectedImages = SelectedImage[];

src/useImageSelect.tsx

@@ -1,23 +1,21 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { ImageSelectContextHandler } from './context/ImageSelectContext.type';
-import { SelectedImage } from './types';
+import { SelectedImages } from './types';
 
 export interface useImageSelectReturned {
   isImageSelectVisible: boolean;
   openImageSelect: () => void;
   onCancel: () => void;
-  onDone: (images: (SelectedImage | undefined)[]) => void;
-  selectedImages: (SelectedImage | undefined)[];
+  onDone: (images: SelectedImages) => void;
+  selectedImages: SelectedImages;
   onRemoveSelectedImage: (imageUri: string) => void;
   clearSelectedImages: () => void;
 }
 
 export function useImageSelect(): useImageSelectReturned {
   const imageSelectRef = useRef<ImageSelectContextHandler>(null);
   const [isImageSelectVisible, setIsImageSelectVisible] = useState(false);
-  const [selectedImages, setSelectedImages] = useState<
-    (SelectedImage | undefined)[]
-  >([]);
+  const [selectedImages, setSelectedImages] = useState<SelectedImages>([]);
 
   const openImageSelect = useCallback(() => {
     setIsImageSelectVisible(true);
@@ -42,7 +40,7 @@ export function useImageSelect(): useImageSelectReturned {
   }, []);
 
   const onDone = useCallback(
-    (newSelectedImages: (SelectedImage | undefined)[]) => {
+    (newSelectedImages: SelectedImages) => {
       setSelectedImages(newSelectedImages);
       closeImageSelect();
     },