Lesson 4: Integrating Camera and Media with Expo

Integrating Camera and Media with Expo

1. Using the Camera Module:

   import React, { useState, useEffect } from 'react';
   import { View, Text, Button } from 'react-native';
   import { Camera } from 'expo-camera';

   const CameraExample = () => {
   const [hasPermission, setHasPermission] = useState(null);
   const [type, setType] = useState(Camera.Constants.Type.back);

   useEffect(() => {
   (async () => {
   const { status } = await Camera.requestPermissionsAsync();
   setHasPermission(status === 'granted');
   })();
   }, []);

   if (hasPermission === null) {
return <View />;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View style={{ flex: 1 }}>
<Camera style={{ flex: 1 }} type={type}>
<View
style={{
flex: 1,
backgroundColor: 'transparent',
flexDirection: 'row',
}}>
<Button
title="Flip Camera"
onPress={() => {
setType(
type === Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}>
</Button>
</View>
</Camera>
</View>
);
};


2. Managing Media with ImagePicker:

   import React, { useState } from 'react';
   import { View, Button, Image } from 'react-native';
   import * as ImagePicker from 'expo-image-picker';

   const MediaExample = () => {
   const [image, setImage] = useState(null);

   const pickImage = async () => {
   let result = await ImagePicker.launchImageLibraryAsync({
   mediaTypes: ImagePicker.MediaTypeOptions.All,
   allowsEditing: true,
   aspect: [4, 3],
   quality: 1,
   });

   if (!result.cancelled) {
   setImage(result.uri);
   }
   };

   return (
<View>
<Button title="Pick an image from camera roll" onPress={pickImage} />
{image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
</View>
);
};


Conclusion: Integrating camera and media functionalities enhances the interactivity of your app. By using Expo’s Camera and ImagePicker modules, you can easily implement these features and provide a richer user experience.