UseState variable not updating after setting it within a function - React Native - react-native

Question

Howcome when i setURL(value) or setURL(val) it doesnt actually set the state?
Only when I press the upload button a second time it sets the state correctly..
First time run:
My initialized state:
const [URL, setURL] = useState();
The function to get the downloadURL:
await getDownloadURL(fileRef).then((val)=>{
console.log("From function: "+val)
var value = val;
setURL(value)
}).catch((error)=>{
Alert.alert(error.message);
});
Upload button function:
My code:
const AddPost = () => {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
const [Color, setColor] = useState('')
const [Desc, setDesc]= useState('');
const [location, setlocation] = useState('');
const navigation = useNavigation()
const [image, setImage] = useState(null);
const [URI, setURI] = useState(Result);
const [Result, setResult] = useState();
const [URL, setURL] = useState();
const [uploading, setUploading] = useState(false);
const usersCollectionRef = collection(db, "Posts");
const createPost = async () =>
{
setUploading(true);
let url = await uploadImageAsync(URI);
console.log("from upload btn: "+URL)
await addDoc(usersCollectionRef, { username: auth.currentUser?.email, Colour: Color, Injured: value2, Type: value3, Collar: isEnabled ? 'Yes' : 'No', Welfare: value4, status: value, Description: Desc, picture: URL, location: location })
Alert.alert("Successfully uploaded!");
navigation.navigate('MainScreen');
setUploading(false);
};
const TakeImage = async () => {
let result = await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
quality: 0.6,
});
if (!result.cancelled) {
setImage(result.uri);
setURI(result.uri);
}
};
const BrowseImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
quality: 0.6,
});
console.log(result);
if (!result.cancelled) {
setImage(result.uri);
setURI(result.uri);
}
};
const uploadImageAsync =async(uri)=> {
const blob = await new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
resolve(xhr.response);
};
xhr.onerror = function (e) {
console.log(e);
reject(new TypeError("Network request failed"));
};
xhr.responseType = "blob";
xhr.open("GET", uri, true);
xhr.send(null);
});
const fileRef = ref(getStorage(), uuid.v4());
const result = await uploadBytes(fileRef, blob);
let url = await getDownloadURL(fileRef).then((val)=>{
console.log("From function: "+val)
setURL(val);
return val;
}).catch((error)=>{
Alert.alert(error.message);
});
return url;
}

Answer 1

Since updating state is an asynchronous method so the state will not get updated immediately. You'll have to work around like this -
const uploadImageAsync =async(uri)=> {
// rest of your code
let url = await getDownloadURL(fileRef).then((val)=>{
console.log("From function: "+val)
setURL(val);
return val;
}).catch((error)=>{
Alert.alert(error.message);
});
return url;
}
And then in your onPress function:-
const createPost = async () => {
let url = await uploadImageAsync(URI);
// Rest of your code
}