{ "name": "react-native-photo-app", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web" }, "dependencies": { "expo": "~51.0.21", "expo-status-bar": "~1.12.1", "react": "18.2.0", "react-native": "0.74.3", "expo-image-picker": "~15.0.7" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true } { "expo": { "name": "React Native Photo App", "slug": "react-native-photo-app", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", "userInterfaceStyle": "light", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#ffffff" }, "ios": { "supportsTablet": true, "bundleIdentifier": "com.example.photopicker", "infoPlist": { "NSCameraUsageDescription": "This app needs access to your camera to take photos.", "NSPhotoLibraryUsageDescription": "This app needs access to your photo library to select images." } }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/adaptive-icon.png", "backgroundColor": "#ffffff" }, "permissions": [ "android.permission.CAMERA", "android.permission.READ_EXTERNAL_STORAGE", "android.permission.WRITE_EXTERNAL_STORAGE" ] }, "web": { "favicon": "./assets/favicon.png" }, "plugins": [ [ "expo-image-picker", { "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.", "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera." } ] ], "assetBundlePatterns": [ "**/*" ] } } module.exports = function(api) { api.cache(true); return { presets: ['babel-preset-expo'], }; }; import React, { useState, useEffect } from 'react'; import { StyleSheet, Text, View, Button, Image, Alert, Platform } from 'react-native'; import * as ImagePicker from 'expo-image-picker'; import { StatusBar } from 'expo-status-bar'; export default function App() { const [imageUri, setImageUri] = useState(null); useEffect(() => { // Request permissions on component mount for iOS (async () => { if (Platform.OS === 'ios') { const cameraStatus = await ImagePicker.requestCameraPermissionsAsync(); const libraryStatus = await ImagePicker.requestMediaLibraryPermissionsAsync(); if (cameraStatus.status !== 'granted' || libraryStatus.status !== 'granted') { Alert.alert('Permissions required', 'Camera and photo library permissions are needed to use this feature.'); } } })(); }, []); const pickImage = async () => { // No permissions request is necessary for launching the image library let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, aspect: [4, 3], quality: 1, }); if (!result.canceled) { setImageUri(result.assets[0].uri); } }; const takePhoto = async () => { // Request permissions if not already granted (mainly for Android, but good practice) const permissionResult = await ImagePicker.requestCameraPermissionsAsync(); if (permissionResult.granted === false) { Alert.alert("Permission required", "You've refused to allow this app to access your camera!"); return; } let result = await ImagePicker.launchCameraAsync({ allowsEditing: true, aspect: [4, 3], quality: 1, }); if (!result.canceled) { setImageUri(result.assets[0].uri); } }; return ( Photo App