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 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