How to use expo-image-picker - 10 common examples
To help you get started, we’ve selected a few expo-image-picker examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
SCasarotto / casarotto-chat / src / pages / Main / Main.js View on Github 
.then((response) => {
const { status, expires, permissions } = response
if (status === 'granted') {
ImagePicker.launchImageLibraryAsync({
// mediaTypes: 'All',
base64: true,
quality: 1,
})
.then((response) => {
if (!response.cancelled) {
const { user, sendImage } = this.props
//TODO: Check if it is a video and store video
const data = { uri: response.uri, user }
sendImage(data)
}
})
.catch((error) => console.log(error))
}
})
.catch((error) => console.log(error)).then((response) => {
const { status, expires, permissions } = response
if (status === 'granted') {
ImagePicker.launchCameraAsync({
// mediaTypes: 'All',
base64: true,
quality: 1,
})
.then((response) => {
if (!response.cancelled) {
const { user, sendImage } = this.props
//TODO: Check if it is a video and store video
const data = { uri: response.uri, user }
sendImage(data)
}
})
.catch((error) => console.log(error))
}
})
.catch((error) => console.log(error))chooseFile = async () => {
setTimeout(() => {
this.onToggleLoading()
}, 1000);
const { mediaType = 'Images' } = this.props
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions[mediaType],
// mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: mediaType === 'Images' ? true : false,
base64: true,
quality: 1,
});
if (!result.cancelled) {
const { onChangeCallback, input: { onChange } } = this.props
this.setState({ image: result.uri });
FileSystem.readAsStringAsync(result.uri, {
encoding: FileSystem.EncodingType.Base64
}).then((base64) => {
const res = { ...result, base64 }
onChangeCallback(res)
this.onToggleLoading()selectImage = async () => {
try {
let response = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3]
})
if (!response.cancelled) {
const source = { uri: response.uri }
this.setState({ image: source })
this.classifyImage()
}
} catch (error) {
console.log(error)
}
}.then((response) => {
const { status } = response
if (status === 'granted') {
ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [1, 1],
base64: true,
quality: 0.5,
})
.then((response) => {
if (!response.cancelled) {
this.props.uploadImage(response.uri)
}
})
.catch((error) => console.log(error))
}
})
.catch((error) => console.log(error)).then((response) => {
const { status, expires, permissions } = response
if (status === 'granted') {
ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [1, 1],
quality: 0.5,
})
.then((response) => {
console.log(response)
if (!response.cancelled) {
this.props.uploadImage(response.uri)
}
})
.catch((error) => console.log(error))
}
})
.catch((error) => console.log(error))pickImage = async ({ onSend }) => {
const { t } = this.props;
if (await this.checkPermission(Permissions.CAMERA_ROLL, 'android')) {
const { cancelled, uri } = await ImagePicker.launchImageLibraryAsync(settings.chat.image.imagePicker);
if (!cancelled) {
const { size } = await FileSystem.getInfoAsync(uri);
const reg = /[^\\/]*\.\w+$/;
if (size <= settings.chat.image.maxSize && reg.test(uri)) {
const type = mime.lookup(uri);
const name = uri.match(reg)[0];
const imageData = new ReactNativeFile({ uri, type, name });
onSend({ attachment: imageData });
} else {
this.setState({ notify: t('attachment.errorMsg') });
}
}
} else {
this.setState({ notify: t('permission.errorMsg') });
}
};.then((response) => {
const { status, expires, permissions } = response
if (status === 'granted') {
ImagePicker.launchCameraAsync({
allowsEditing: true,
aspect: [1, 1],
base64: true,
quality: 0.5,
})
.then((response) => {
if (!response.cancelled) {
this.props.uploadImage(response.uri)
}
})
.catch((error) => console.log(error))
}
})
.catch((error) => console.log(error)).then((response) => {
const { status } = response
if (status === 'granted') {
ImagePicker.launchCameraAsync({
allowsEditing: true,
aspect: [1, 1],
base64: true,
quality: 0.5,
})
.then((response) => {
if (!response.cancelled) {
this.props.uploadImage(response.uri)
}
})
.catch((error) => console.log(error))
}
})
.catch((error) => console.log(error))import * as ImagePicker from 'expo-image-picker';
import * as FileSystem from 'expo-file-system';
import * as MediaLibrary from 'expo-media-library';
import * as Permissions from 'expo-permissions';
const mediaOptions = {
allowsEditing: true,
quality: 1.0,
allowsMultipleSelection: false,
mediaTypes: ImagePicker.MediaTypeOptions.Images,
exif: false,
base64: false,
};
const directory = `${FileSystem.documentDirectory}/photos`;
async function ensurePermissionsAsync(): Promise {
const { status } = await Permissions.askAsync(Permissions.CAMERA, Permissions.CAMERA_ROLL);
if (status !== Permissions.PermissionStatus.GRANTED) {
alert(
'Cannot select a banner photo without media access! Please enable the "Camera" & "Camera Roll" permission in your system settings.'
);
return false;
}
return true;
}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.
