Revision history [back]

1. Install the react-native-image-picker library:

npm install react-native-image-picker

1. Import the library in your component:

import ImagePicker from 'react-native-image-picker';

1. Create a function that will handle the image selection:

const pickImage = () => {
  ImagePicker.showImagePicker(options, response => {
    if (response.didCancel) {
      console.log('User cancelled image picker');
    } else if (response.error) {
      console.log('ImagePicker Error: ', response.error);
    } else {
      const source = { uri: response.uri };
      // do something with the selected image
    }
  });
};

1. Add a button or any other UI element to trigger the image picker:

<View>
  <TouchableHighlight onPress={pickImage}>
    <Text>Select Image</Text>
  </TouchableHighlight>
</View>

1. Customize the options object to fit your needs (e.g. specify the image quality or size, enable camera, etc.):

const options = {
  title: 'Select Avatar',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};

Note: React Native Image Picker is a native module and cannot be directly used in React Native Web. However, you can use libraries such as react-native-web-image-picker or react-webcam to achieve similar functionality on the web.