So, I am going to continue my series of Getting Started with React native in this section we would learn how to use images in the bare workflow of react-native. well, I would not be using Expo here since it has its own expo camera.

just fire up your terminal and ```npx react-native init cameraApp

also, remember to install react native camera

```npx i react-native-camera

now since everything is ready .. just set up your Rn app. the basic idea here is that I would be using State to store the image and React-native-camera to click that image.

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

now I will define a function takeimage which will take camera as a input and set state of our image to the image URL also this function will decide the quality of our image .

const takePicture = async (camera) => {
    try{
      const options = {quality: 0.7 , base64:false};
     const data = await camera.takePictureAsync(options);
     setImage(data.uri);
    }
    catch(error)
    {
      console.warn(error);
    }
  }

now in my app function, I would be using Conditional Rendering in the image if the image is present I would be displaying the image and if the image is not present then the camera would open and it would prompt the user to take an image. also, I would be using various props of RNcamera component like

• flashMode which allows us to set the flash option of the camera.
• captureAudio which allow us to capture audio (remember to set it to false otherwise it would give warning or errors)
• androidCameraPermissionOptions helps us to customize the condition message so you can tell user why you need that permission.

the code for this looks like this....

{image ? (
    <>
    <View style={styles.preview}>
  <Text style={styles.camText}>Here is your new profile image.</Text>
  <Image style={styles.clicked} source={{uri:image,width: '90%',height:'50%'}}/>
  </View>
  </>
  ) : 
  (<RNCamera style={styles.preview} 
    type={RNCamera.Constants.Type.front}
     captureAudio={false} 
     flashMode={RNCamera.Constants.FlashMode.on} 
     androidCameraPermissionOptions={{
      title:"Permission to use camera",
      message:"longer text to display msg",
      buttonPositive: "Hola",
      buttonNegative: "Nopa",     }}
  >
    {({camera,status})=>{
      if(status !=="READY") return <PendingView/>
      return(
        <View style={{flex:0,flexDirection:"row",justifyContent:"center"}}>
          <TouchableOpacity style={styles.capture} onPress={()=>(takePicture(camera))}><Text>Capture</Text></TouchableOpacity>
        </View>
      )

    }}
  </RNCamera>)}

also now i want to add a change profile image option so i would can use a button here use call back to call setImage function which would set image to null thus conditional rendering will come into play and it would reopen the camera option.

 <Button title="Click new pic" onPress={()=>{setImage(null)}} ></Button>

In case you want the whole code here

Github Repo link