How To Build A Custom Image Picker In React Native & Expo

In a React Native Expo project, I am working on the user needs to be able to select local static images and also use their own image from the device. I must admit I struggled a bit with this at first, but after researching and asking questions I found a solution.

For those of you that just want to jump in and play with the code here is an

Expo Snack https://snack.expo.io/@lorling/pick-images It’s a super cool way to run code on devices right in the browser.

So the first step was to find out how to get images from the users device.

So I went to the Expo doc and found. Expo ImagePicker https://docs.expo.io/versions/latest/sdk/imagepicker/ To my surprise it’s pretty straight forward and not much code.

The next challenge I had in my app was, the fact that users need to also select static images that live in the app. The way I first made the static image selector it returned a path to the image that was an index that was of type of number. While this worked for the static image picker, this is what I struggled with when I found that the Expo image picker returns a uri string path.

In hindsight once again it came down to asking the right question. The question that finally solved it for me was how to return a uri from a local static image. Here is the…