Simple wrapper for react-native-image-picker

useImagePicker.tsx

import {useState, useCallback, useMemo} from 'react';
import ImagePicker, {ImagePickerOptions} from 'react-native-image-picker';

type ImageResponse = {
  uri: any;
};

type ImagePickerActions = {
  showCamera: () => void;
  showImageLibrary: () => void;
};

const handleResponse = (pickerResponse: any): ImageResponse | null => {
  if (pickerResponse.didCancel) {
    console.log('User cancelled image picker');
  } else if (pickerResponse.error) {
    console.log('ImagePicker Error: ', pickerResponse.error);
  } else if (pickerResponse.customButton) {
    console.log('User tapped custom button: ', pickerResponse.customButton);
  } else {
    const source = {uri: pickerResponse.uri};
    return source;
  }

  return null;
};

const launchCamera = (options: ImagePickerOptions): Promise<any> => {
  return new Promise(resolve => {
    ImagePicker.launchCamera(options, response => {
      resolve(handleResponse(response));
    });
  });
};

const launchImageLibrary = (options: ImagePickerOptions): Promise<any> => {
  return new Promise(resolve => {
    ImagePicker.launchImageLibrary(options, response => {
      resolve(handleResponse(response));
    });
  });
};

const defaultOptions = {};

/**
 * Sample Usage:
 * const [image, pickerActions] = useImagePicker({...options})
 *
 * pickerActions.launchCamera()
 * @param options
 */
const useImagePicker = (
  options: ImagePickerOptions = defaultOptions,
): [ImageResponse | null, ImagePickerActions] => {
  const [state, internalSetState] = useState<any>([]);

  const showCamera = useCallback(() => {
    launchCamera(options).then(response => {
      internalSetState(response);
    });
  }, [options]);
  const showImageLibrary = useCallback(() => {
    launchImageLibrary(options).then(response => {
      internalSetState(response);
    });
  }, [options]);

  const actions = useMemo(
    () => ({
      showCamera,
      showImageLibrary,
    }),
    [showCamera, showImageLibrary],
  );

  return [state, actions];
};

export default useImagePicker;