react native I want to designate one image as the default - react-native

Question

I wrote the code to upload an image, but when I click remove image, a blue screen appears as a default. I want to designate this screen as one image.
import 'react-native-gesture-handler'
import * as React from 'react';
import{
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
ToastAndroid,
Alert,
} from 'react-native';
import { Avatar } from 'react-native-paper';
import { launchImageLibrary } from 'react-native-image-picker';
import styled from 'styled-components';
const Container = styled.SafeAreaView`
flex : 1;
`;
export default function Profile(){
const [pic, Setpic] = React.useState('');
const setToastMsg = msg => {
ToastAndroid.showWithGravity(msg, ToastAndroid.SHORT, ToastAndroid.CENTER)
};
const uploadImage = () => {
let options = {
mediaType : 'photo',
quality : 1,
includeBase64 : true,
};
launchImageLibrary(options, response => {
if(response.didCancel){
setToastMsg('Cancelled image selection');
}
else if((response.errorCode == 'permission')){
setToastMsg('permision not satisfied');
}
else if((response.errorCode == 'others')){
setToastMsg(response.errorMessage);
}
else if(response.assets[0].fileSize > 2097152){
Alert.alert(
'Maximum image size exceeded',
'Please choose image under 2MB'
[{text: 'OK'}],
);
}
else{
Setpic(response.assets[0].base64);
}
});
}
const removeImage = () => {
Setpic('');
setToastMsg('Image removed');
}
return(
<Container>
<View>
<Avatar.Image
size= {150}
source={{ uri : 'data:image/png;base64,' + pic}}
/>
</View>
<View>
<TouchableOpacity activeOpacity={0.5} onPress={ ()=> uploadImage() }>
<Text>
Upload Image
</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} onPress={ ()=> removeImage() }>
<Text>
Remove Image
</Text>
</TouchableOpacity>
</View>
</Container>
);
}
Can I change the code here?
const removeImage = () => {
Setpic('');
setToastMsg('Image removed');
}
or here?
<View>
<Avatar.Image
size= {150}
source={{ uri : 'data:image/png;base64,' + pic}}
/>
</View>
I'm curious where you set the default image.
If you can't change the default image, please help me to change the color.
This code is based on Android

Answer 1

you could try a condition if pic is empty or not.
If it is empty will be rendered. If not You Avatar will be shown.
{ pic === "" ? (
<View>
<Text>Screen if pic is empty</Text>
<View>
):
( <View>
<Avatar.Image
size= {150}
source={{ uri : 'data:image/png;base64,' + pic}}
/>
</View>
)