Nilay Paul
2 min readJun 4, 2021

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}><StatusBarbackgroundColor="gray"/>{image?(<View style={styles.container}><Image style={styles.image} source={{uri:image,width:"100%",height:"80%"}}/><Textstyle={styles.profileText}>Welcome</Text><TouchableOpacitystyle={styles.buttontap}onPress={()=>setImage(null)}><Textstyle={styles.pbuttonText}>Add New Photo</Text></TouchableOpacity></View>):(<RNCameratype={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}><TouchableOpacitystyle={styles.button}onPress={()=>handleButtonClick(camera)}><Textstyle={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