Image Picker || React Native Image Picker || React Native tutorial from scratch


as our some friends to catch me create a image upload functionality in react native so I am choosing in this video react native image picker library so for that first of all go to the Google and just such react native image picker this is the github library we will install it and it is worth installing and p.m. just run it after that react native link to link the packet so I already installed it in my this project and is a fresh project just installed nothing else okay first of all we need to port that library call it image picker on the react native human speaker okay and we need some options for this options like a title and when you click on the upload button it will show a pop-up to display take image from camera and the second option will be choose image from your library like that so first of all title title something my app or my pick app and other option we can copy from here this library we have a lots of options we will use two options here is take photo and choose from library button so go to you’re coding back here you can write anything it will show on your focus okay let me tell you take photo with your camera okay and second option I think is right here take photo button tighter yeah okay and second is choose from library so for this we will say jewelz photo from library you can write anything here library okay save it now we need to create a button here stretch a table of LP inside this we need text okay inside the text we will say select image and give us some style for your button like a background color margin padding let me background color is green and margin or 10 for padding N and text color will be white because background is green that’s why so I am giving code of white okay and this but me day on press I shall we will create this function this dot my fun just you can give it any any name it’s up to you okay same memo function we will create here my function it will be just full alert for now we will take click to check everything is perfectly working just below and you will see your button here click is click OK now and the next we need if function coding function coding is here emails because shows something just copy this lines and copy paste inside your function code just meant the alert and paste here here you can see first if is ifs user click on cancel then this is our error machine second if we getting an error from device and coding elected then it will be show here third one we don’t need now just remove it and else is part is our actual source of image which we are choosing from library or camera ok that we will it update this variable ok this variable we can choose to show the image so let me create this variable in state also here constructor props inside this suit for function with pro after this this dot ate here by default it will be null because we are not displaying anything by default okay so let me try about holding for now we will try to display this message first of all user cancel email speaker okay just reload the app click on select image and you can see your popup message take for top with your camera is coming from here choose photo from library with you right here okay now you can see ya and so now you can see zoos are canceled email speaker that is your here is a message you can change anything now let me reload I just give a see capital and remove the extra space you can see Ares so let me choose photo from library if everything is fine we can see our response this ones will be your image information like a width height everything choose emails from my gallery and let me choose this and you can see array object here is tied with part type URL everything so we can use this URL and display the image let me try for that we have to use a image and image content to compulsory links one is so second is style – no here you will say this dog straight dot your variable with this by default is now it is updating the actual source ok actual sources response dot URL which I will show you that you are ok email source and you need a style to display height width 200 height 200 margin 10 pixel just close this image ok image tag is close save it now let me reload the app again select image choose from library let me choose again that image and here is your image okay if I give a hundred percent right I think so height will be three and I reload like females choose from your gallery okay here is the hundred percent okay now let me select take photo with your camera just click on the camera my camera is blank because my actual phone on the table that’s why camera can’t see anything that’s why it’s black just okay and here is your updated photo so that’s something we can do which anything we can display with help of this function response dot hydrated files we are currently display URL I this is that our email sauce okay and now selecting a quiche from my for process Google Photos app let me go to image and my DISA my birthday cake okay select this and here is your photo okay now you can give any height width to your photo so this was our image uploading on your device in the next video I will try to upload email to PHP my sequel server with helpful this functionality okay so stay tuned see in the next video thank you

15 Replies to “Image Picker || React Native Image Picker || React Native tutorial from scratch

  1. Belated Birth Day wishes Sirji….
    Nice Tutorial, Thanks..
    Please upload next tutorial ASAP.
    1. Uploading Images to PHP MYSQL server,
    2. How to Select & Upload Multiple Images in one go……

  2. im running the same code its going correctly but when i select any option in some mobiles its not showing either library or camera …and in some mobiles its going to exit suddenly…whats is the issue im not getting…please help

  3. i tried to copy your code until 4:50 and the result is this hope can you help me

    refference error: cant find variable touchable opacity
    this error is located at:
    in app (renderApplication.js:34)
    in rctView (atview.js:45)
    in AppContainer(at renderApplication.js:33)

  4. Why Man! This one works well so good. But it will be better if u also show the steps for the androidmanifest.xml and the rest of the further setup. It will also help most of your viewers. Thank you again!

  5. sir please solute an error->undefind is not an function(evaluating Imagepicker manager.showimagepicker)

  6. Sir can you help me
    I am using react-native 0.59.1
    and i want to display image in my REACT NATIVE app from network . i have used the <Image source = {‌{uri : "https://something something that is url of my image. if these url i m coping in google it just open my unique image", style ={‌{width:50,height:50}} /> and i have also done through method post and all different way but still images is not displaying . please help me out. I am stuck

Leave a Reply

Your email address will not be published. Required fields are marked *