Getting Started with React Native: Handling Images

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

Getting Started with React Native: Handling Images

Comments

React-Native

Getting Started with React Native: Using the state hook

More from this blog

Say Hello to anonmsg.fun - an Anonymous Feedback platform

JavaScript Bazzi : Promise.all()

Building A QR code scanner and generator in Next.js

JavaScript Baazi: How to flatten an array in javaScript?

Introducing MeowForms 🐈 -Build Custom forms with no backend code for free 🐱 (my first SaaS product)

Command Palette

Comments

React-Native

Getting Started with React Native: Using the state hook

More from this blog