Expo Image Picker

Take photo in react-native

I've used expo-image-picker and @expo/react-native-action-sheet to take photo or pick image for avatar on Registration screen, Profile screen and CreatePost screen.

To implement image-picker on CreatePost screen you need to do next steps:

1. Import dependencies:

import { NoPermissionView } from '../../../../components/NoPermissionView';
import {
  useActionSheetMenu,
  usePermissions,
  useImagePickerActions,
} from '../../../../hooks';

2. To get permissions for Camera, Location and MediaLibrary I'v used <NoPermissionView/> component. Return it if no permission allowed.

if (
  (requiredPermission === 'Camera' && !cameraPermission.granted) ||
  (requiredPermission === 'Location' && !locationPermission.granted) ||
  (requiredPermission === 'Media Library' && !mediaLibraryPermission.granted)
) {
  return (
    <NoPermissionView
      requiredPermission={requiredPermission}
      permission={permissionsList[requiredPermission].permission}
      requestPermission={permissionsList[requiredPermission].request}
    />
  );
}

3. Implement action sheet functionality and tailor it with photo and location state of screen component

const [photo, setPhoto] = useState(null);
const [location, setLocation] = useState(null);

const {
  cameraPermission,
  mediaLibraryPermission,
  locationPermission,
  permissionsList,
} = usePermissions();

const { takePhoto, pickImage, requiredPermission, isLocationLoading } =
  useImagePickerActions({
    setPhoto,
    setLocation,
    cameraPermission,
    mediaLibraryPermission,
    locationPermission,
  });

const showActionSheetMenu = useActionSheetMenu(takePhoto, pickImage);

4. Hook up showActionSheetMenu to the button in form

<Styled.UploadImageButton
  activeOpacity={0.6}
  isImageSelected={!!photo}
  onPress={showActionSheetMenu}
>
  <PhotoSvg isImageSelected={!!photo} />
</Styled.UploadImageButton>