Passing an image to webview in react-native - react-native

Question

I'm making a simple app that requires the user to select an image, and that image needs to be passed on to a Webview window.
Now I have multiple problems:
1.The image needs to be passed on to a css "background-image" element
I can't seem to rename the file of the image that the user inputs
I can't relocate the image to the app's resources folder.
So here is the code for the image input:
state = {
ImageSource: null,
};
selectPhotoTapped() {
const options = {
quality: 1.0,
maxWidth: 500,
maxHeight: 500,
title: 'Image Picker',
storageOptions: {
skipBackup: true,
path:'data/data/fiftyoff/pictures',
}
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
var ImagePicked= {path:response.path}
let source = { uri: response.uri };
// You can also display the image using data:
// let source = { uri: 'data:image/jpeg;base64,' + response.data };
module.exports=ImagePicked
this.setState({
ImageSource: source
});
}
});
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
<View style={styles.ImageContainer}>
{ this.state.ImageSource === null ? <Text>Select a Photo</Text> :
<Image style={styles.ImageContainer} source={this.state.ImageSource} />
}
</View>
</TouchableOpacity>
</View>
And here's the CSS where the image needs to be passed to (where image1 is):
.app-picture {
border: 2px solid #893579;
background-position: center;
background-size: cover;
border-radius: 80px;
width: 80px;
height: 80px;
margin: 0 0 1em 0;
top: 68.4714px;
display: block;
position: absolute;
right: 5%;
display: none;
background-image: url("image1.jpg")