"react": "16.11.0",
"react-native": "0.62.2",
"react-native-image-picker": "^2.3.1",
import React, { useState, useEffect } from 'react';
import {
View, Text, Button, StyleSheet, Image,
PermissionsAndroid, Linking, Alert
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
const SupportScreen = () => {
const [source, setSource] = useState(null);
const defaultImage = require('../assets/logo.png');
const options = {
title: 'Select Image',
quality: 0.5,
maxWidth: 600,
maxHeight: 500,
cancelButtonTitle: 'Cancel',
takePhotoButtonTitle: 'Camera',
chooseFromLibraryButtonTitle: 'Select from library',
chooseWhichLibraryTitle: 'Select',
cameraType: 'back',
mediaType: 'photo',
// customButtons: [{ name: 'fb', title: 'Choose Photo from Facebook' }],
storageOptions: {
skipBackup: true,
path: 'images',
},
// allowsEditing: false,
noData: true,
permissionDenied: {
title: 'Need permissons',
text: 'Please authorize the Camera and Photo permissions',
reTryTitle: 'Go to settings',
okTitle: 'OK'
},
};
// android permissions
const _showPicker = (type, option) => {
PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.CAMERA,
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE
]).then(granted => {
console.log('global.CheckAndroidPermissions', granted)
if (granted[PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE] === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN
|| granted[PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE] === PermissionsAndroid.RESULTS.DENIED) {//GRANTED
Alert.alert(''Need permissons', 'Please authorize the Camera and Photo permissions', [
{
text: 'Cancel', style: "cancel", onPress: () => {
// Linking.openSettings()
},
},
{
text: 'Go to settings', onPress: () => {
Linking.openSettings()
},
}
], { cancelable: false });
return;
}
//#region //select a image
try {
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
// return;
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
const source = { uri: `file://${response.path}` };
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
// setSource(source)
}
});
} catch (err) {
console.log(err)
}
//#endregion
})
}
return (
<View style={styles.container}>
<Text>Support Screen</Text>
<Button
title="Click Here"
onPress={() => _showPicker()}
/>
<View>
<Image source={source ? { uri: source } : defaultImage} resizeMode='cover'
style={{ width: 100, height: 100 }} />
</View>
</View>
);
};
export default SupportScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent