Mike Haslam
3 min readFeb 11, 2021


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

Learn to code

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 StackOverflow question that helped me find my solution. https://stackoverflow.com/questions/53779164/react-native-how-to-load-local-image-using-the-uri-in-image-component/53779259

Next was putting all the pieces together in an Expo Snack.

Expo Image Picker

I like to use styled-components for styling https://styled-components.com/docs/basics#react-native

Static Image Selector

Image Selector Style



Mike Haslam

I love my wife coding & travel

Recommended from Medium


See more recommendations