Expo camera 1

before app opens, no permission is granted

when app opens, it request for camera

request for storage

after grant permission, check setting

camera shutter opens after permissions are granted

snap a picture

check my album

//app.js

import React, { useState, useEffect } from 'react';
import { Camera } from 'expo-camera';
import * as MediaLibrary from 'expo-media-library';
import {
  Container, Header, Title, Content, Footer,
  FooterTab, Button, Left, Right, Body, Icon, Text,
  Accordion, Card, CardItem, Thumbnail, ListItem,
  CheckBox, DatePicker, DeckSwiper, Fab, View,
  Badge, Form, Item, Input, Label, Picker, Textarea,
  Switch, Radio, Spinner, Tab, Tabs, TabHeading,
  ScrollableTab, H1, H2, H3, Drawer,
} from 'native-base';

export default function App() {
  const [cameraPermission, setcameraPermission] = useState('denied');
  const [storagePermission, setstoragePermission] = useState('denied')
  const [cameraDirection, setcameraDirection] = useState(Camera.Constants.Type.back);
  const [autoFocus, setautoFocus] = useState('on')

  useEffect(() => {
    (async () => {
      const grantCamera = await Camera.requestPermissionsAsync();
      setcameraPermission(grantCamera.status)

      const grantStorage = await MediaLibrary.requestPermissionsAsync()
      setstoragePermission(grantStorage.status)
    })();
  }, []);

  takePicture = async () => {

    if (this.camera) {
      //some camera does not support auto focus, 
      //disable autofocus before taking a picture and reenable after
      await setautoFocus('off')
      const { uri } = await this.camera.takePictureAsync();
      await setautoFocus('on')
      console.log('uri', uri);

      await MediaLibrary.saveToLibraryAsync(uri)
        .then(() => {
          alert('image saved!')
        })
        .catch(error => {
          alert('An Error Occurred!')
        });
    }
  }


  if (cameraPermission !== 'granted' || storagePermission !== 'granted') {
    return <Text style={{ marginTop: 25 }}>App uses camera and storage</Text>;
  }


  return (
    <View style={{ flex: 1 }}>
      <Camera style={{ flex: 1 }}
        type={cameraDirection}
        autoFocus={autoFocus}
        ref={ref => { this.camera = ref }}>

        <View style={{
          flex: 1,
          backgroundColor: 'transparent',
          alignItems: 'center',
          justifyContent: 'flex-end',
          flexDirection: 'column',
        }}>
          <Button rounded transparent style={{ marginBottom: 100 }}
            onPress={() => takePicture()}>
            <Icon name='camera' style={{ fontSize: 80, color: 'white' }} ></Icon>
          </Button>
        </View>

      </Camera>
    </View>
  );
}

------------------------
//logs
//image is saved to app cache first, then copied to my album

uri file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540chuanshuoge%252Fexpo-medialibrary/Camera/522c7b92-22a2-48ae-8d03-b1d85b5b7cb7.jpg

reference:
https://chuanshuoge2.blogspot.com/2020/02/expo-medialibrary-taking-picture-with.html