Expo documentationを読む - JavaScriptからReactまで

docs.expo.dev

①expo-image-picker

　名前からは想像しにくいが、カメラで撮影しアプリで利用する場合にも利用する

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import { useState } from 'react';
import * as ImagePicker from 'expo-image-picker';

function Contents() {
  const [imageUriState, setImageUriState] = useState({
    imageUri: null
  });

  const takePicture = async() => {
    //カメラの使用許可
    const res = await ImagePicker.requestCameraPermissionsAsync();
    if(res.status !== 'granted'){
      return;
    }

    //カメラを呼び出し撮影
    const result = await ImagePicker.launchCameraAsync();
    //写真を撮影された場合はstateを更新する
    if(!result.canceled){
      setImageUriState({imageUri: result.uri})
    }
  }

  return(
    <View style={{alignItems: 'center'}}>
      <View style={{marginBottom:10}}>
         <Button
            title='Take Picture'
            onPress={takePicture}/>
      </View>
      {
        //撮影された写真がある場合のみ表示
        imageUriState.imageUri&&
        <Image
           source={{uri: imageUriState.imageUri}}
           style={{width:320, height:320}}
           resizeMode='cover'/>
      }
    </View>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Contents/>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

他に、react-native-vision-cameraというライブラリもあります。

②expo-camera

　サンプルコード参照。

③expo-notifications

Expoでのプッシュ通知の仕方についてまとめ（ローカル通知編） #reactnative - Qiita

④react-native-maps

import { StatusBar } from 'expo-status-bar';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import MapView from 'react-native-maps';

export default function App() {
  return (
    <MapView
       initialRegion={{
        latitude: 35.68095,longitude: 139.7673,
        latitudeDelta:0.046,longitudeDelta:0.021
       }}
       style={styles.map}/>
    
  );
}
const windowDim = Dimensions.get("window");
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: windowDim.width,
    height: windowDim.height,
  }
});