Expo

Documentation

Picking an image

So far we have been using code from React and React Native in our app. React gives us a nice way to build components and React Native gives us pre-built components that work on iOS, Android, and web โ€” like View, Text, TouchableOpacity. React Native does not provide us with an image picker. For this, we can use an Expo library called expo-image-picker:
expo-image-picker provides access to the system's UI for selecting images and videos from the phone's library or taking a photo with the camera.

To use expo-image-picker in our project, we first need to install it.
In your project directory, run expo install expo-image-picker. This will tell npm (or yarn) to install the a version of the expo-image-picker library that is compatible with your project. That's it!
๐Ÿ”ข The version numbers you see here may be different depending on when you do this tutorial.
๐Ÿงถ expo-cli used yarn in this video instead of npm. The installation text will be slightly different if you do not have yarn installed. It's fine.

With the library installed our project, we can now actually use it.
import React from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function App() {
  let openImagePickerAsync = async () => {
    let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

    if (permissionResult.granted === false) {
      alert("Permission to access camera roll is required!");
      return;
    }

    let pickerResult = await ImagePicker.launchImageLibraryAsync();
    console.log(pickerResult);
  }
  
  return (
    <View style={styles.container}>
      <Image source={{ uri: 'https://i.imgur.com/TkIrScD.png' }} style={styles.logo} />
      <Text style={styles.instructions}>
        To share a photo from your phone with a friend, just press the button below!
      </Text>

      <TouchableOpacity onPress={openImagePickerAsync} style={styles.button}>
        <Text style={styles.buttonText}>Pick a photo</Text>
      </TouchableOpacity>
    </View>
  );
}

You should see something like this when you run your app and use the picker:
๐Ÿ’ก You can see the logs in your expo-cli terminal session or in the browser-based developer tools if you prefer it. To see the logs in Snack, press "Logs" in the footer.

Now we will take the data that we get from the image picker and use it to show the selected image in the app.
export default function App() {
  let [selectedImage, setSelectedImage] = React.useState(null);

  let openImagePickerAsync = async () => {
    let permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

    if (permissionResult.granted === false) {
      alert('Permission to access camera roll is required!');
      return;
    }

    let pickerResult = await ImagePicker.launchImageLibraryAsync();

    if (pickerResult.cancelled === true) {
      return;
    }

    setSelectedImage({ localUri: pickerResult.uri });
  };

  if (selectedImage !== null) {
    return (
      <View style={styles.container}>
        <Image
          source={{ uri: selectedImage.localUri }}
          style={styles.thumbnail}
        />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {/* Our logo, instructions, and picker button are hidden here to keep the example brief */}
    </View>
  );
}

const styles = StyleSheet.create({
  /* Other styles hidden to keep the example brief... */
  thumbnail: {
    width: 300,
    height: 300,
    resizeMode: "contain"
  }
});

Your app should now look and behave like this:
๐Ÿ‘€ You might expect that because we gave our image an equal width and height it would be a square, but in the above video it's rectangular. This is because of resizeMode, an image style property that lets us control how the image is resized to fit the given dimensions. Try switching it from contain to stretch or cover to see other behaviors.
๐Ÿฅณ We have made great progress! Up next, let's make it possible to share the image.