I am developing a project through which a user can upload media files to Amazon AWS S3 storage and can manipulate it later. But it giving me a warning 'Possible Unhandled Promise Rejection (id: 3):' and my code is not working properly. Image picker widget is not functioning.
It is also giving me some additional warnings like TypeError: Cannot read property 'launchImageLibrary' of null
i refereed it from a documentation https://instamobile.io/react-native-tutorials/react-native-aws-s3/ Here is my code:
App.js
import React, {useState} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
Alert,
Image,
} from 'react-native';
import {launchImageLibrary} from 'react-native-image-picker';
import Video from 'react-native-video';
function S3StorageUpload() {
const [asset, setAsset] = useState(null);
const selectFile = async () => {
await launchImageLibrary({mediaType: 'mixed'}, result => {
if (!result.assets) {
Alert.alert(result.errorMessage);
return;
}
setAsset(result.assets[0]);
});
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={selectFile}>
<Text style={styles.button}>SELECT {asset ? 'ANOTHER' : ''} FILE</Text>
</TouchableOpacity>
{asset ? (
asset.type.split('/')[0] === 'image' ? (
<Image
style={styles.selectedImage}
source={{uri: asset?.uri ?? ''}}
/>
) : (
<Video
style={styles.selectedImage}
source={{uri: asset?.uri ?? ''}}
/>
)
) : null}
{asset && (
<>
<TouchableOpacity onPress={() => setAsset(null)}>
<Text style={styles.cancelButton}>Remove Selected Image</Text>
</TouchableOpacity>
</>
)}
</View>
);
}
const styles = StyleSheet.create({
button: {
fontSize: 20,
color: '#fff',
backgroundColor: 'blue',
paddingVertical: 20,
paddingHorizontal: 30,
marginHorizontal: 20,
marginVertical: 10,
textAlign: 'center',
fontWeight: 'bold',
},
cancelButton: {
backgroundColor: '#fff',
color: 'blue',
},
selectedImage: {
width: 175,
height: 200,
marginTop: 20,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default S3StorageUpload;