import { Image, StyleSheet, View, TouchableOpacity } from 'react-native'
import React, { useContext } from 'react'
import { AntDesign } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';
export default function ImageInput({ image, setImage, link }) {
const pickImage = async () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
if (!result.canceled) {
setImage(result.assets[0]);
}
};
return (
<View style={{ alignItems: "center" }}>
<View style={styles.imageContainer}>
{image ?
<Image source={{ uri: image.uri }} style={styles.image} />
:
<Image source={{ uri: link ? link : "
https://i.pravatar.cc/300" }} style={styles.image} />
}
<TouchableOpacity onPress={pickImage} style={styles.camera}>
<AntDesign name="camerao" size={24} color="black" />
</TouchableOpacity>
</View>
</View>
)
}
const styles = StyleSheet.create({
imageContainer: {
width: 150,
height: 150,
borderRadius: 75,
position: 'relative',
},
image: {
width: 150,
height: 150,
borderRadius: 75,
},
camera: {
position: 'absolute',
bottom: 10,
right: 0,
backgroundColor: '#fff',
borderRadius: 50,
padding: 5
}
})
