Random experiment : Accessing Camera in React Native

Create a new react native project by running the command

npx react-native init myCameraApp

Open the App.js folder and delete everything.

Primary idea->

Our app will have two components one PendingView(this is displayed when the camera is not ready) and The App Component .

First thing first create PendingView.js file and add

import React from 'react'
import { View,StyleSheet,Text } from 'react-native'
const PendingView=()=>{
return(
<>
<View style={styles.container}>
<Text style={{fontSize:30,color:"red"}}>
Loading ...
</Text>
</View>
</>
)
}
export default PendingView;
const styles = StyleSheet.create({
container : {
flex:1,
justifyContent:'center',
alignItems:'center'
},
})

Now go to android->app ->build.gradle (Do not confuse with the other files)

add the last lines in defaultConfig

In the cmd run->

npm install react-native-camera

In App.js add->

import React, { useState } from 'react'
import {Text, View,StyleSheet, TouchableOpacity,Image, Button, StatusBar} from 'react-native'
import {RNCamera} from 'react-native-camera'
import PendingView from './PendingView'
const App=()=>{
const[image,setImage] = useState(null)
const handleButtonClick=async(camera)=>{
const options = {quality:1,base64:true}
const data = await camera.takePictureAsync(options)
setImage(data.uri)
}
return(
<>
<View style={styles.container}>
<StatusBar
backgroundColor="gray"
/>
{
image?(
<View style={styles.container}>
<Image style={styles.image} source={{uri:image,width:"100%",height:"80%"}}/>
<Text
style={styles.profileText}
>Welcome</Text>
<TouchableOpacity
style={styles.buttontap}
onPress={()=>setImage(null)}
>
<Text
style={styles.pbuttonText}
>
Add New Photo
</Text>
</TouchableOpacity>
</View>
):(
<RNCamera
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.auto}
captureAudio={false}
androidCameraPermissionOptions={{
title:"Permission to use Camera ",
message:"We need to use your camera",
buttonPositive:'OK',
buttonNegative:"Cancel"
}}
androidRecordAudioPermissionOptions={{
title:"Permission to use audio ",
message:"We need to use your audio",
buttonPositive:'OK',
buttonNegative:"Cancel"
}}
style={styles.preview}
>
{
({camera,status})=>{
if(status!="READY")return<PendingView/>
return(
<View style={styles.goBottom}>
<TouchableOpacity
style={styles.button}
onPress={()=>handleButtonClick(camera)}
>
<Text
style={styles.clickedText}
>Click Photo</Text>
</TouchableOpacity>
</View>
)
}
}
</RNCamera>
)
}
</View>
</>
)
}
export default App;
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor:"gray"
},
preview:{
flex:1,
alignItems:'center'
},
clickedText:{
color:"white",
fontSize:25
},
goBottom:{
flex:1,
justifyContent:'flex-end',
marginBottom:36
},
button:{
position:'absolute',
bottom:0,
alignSelf:'center',
borderRadius:5,
borderWidth:2,
borderColor:"green",
textAlign:'center',
fontSize:10,
padding:5
},
image:{
width:300,
height:300,
alignSelf:'center',
borderRadius:300,
marginTop:50
},
profileText:{
fontSize:25,
fontWeight:'bold',
color:"white",
textShadowColor:"red",
alignSelf:'center',
marginTop:15
},
buttontap:{
alignSelf:'center',
margin:10,
fontSize:15,
borderRadius:5,
borderColor:"black",
borderWidth:2,
padding:3
},
pbuttonText:{
color:"white"
}
})

Now start the metro builder

npx react-native start

Run ->

npx react-native run-android (To run the app in android device)

Output