How to set value of prop in a useEffect? - reactjs

Question

so I'm trying to pass a dynamically generated URL to Image's source prop and, due to React Native limitations, I cannot simply pass a variable as the value of that prop because it won't update to load the image after the variable is set.
So I'm trying to follow the advice here to trigger a change to the source prop.
How can I set the value of a prop in useEffect?
Edit: this is what I'm trying, but still not successfully seeing the image
const [photoUrl, setPhotoUrl] = useState();
useEffect(() => {
async function getSetImg() {
let img = await getImage(job.afterPhoto.uri);
setPhotoUrl(img);
}
if (job) {
getSetImg;
}
}, [job]);
<Image
source={{ uri: photoUrl }}
style={styles.headerImage}
/>

Answer 1

The problem may not be from setting the values with useState/setState.
I have 2 suggestions you can try.
1. Check if Image style is set explicitly
Q) Does the image show when you hardcode the URL directly (without using setState)?
You can try using the Google logo image for uri: https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png
NO (Image don't show): Try the below (style)
YES (Hardcoded image is shown ok): Try #2 (ATS)
From RN Docs on Image:
Note that for network and data images, you will need to manually specify the dimensions of your image!
If your styles.headerImage does not have height and width explicitly defined, the <Image/> component may not show. You can easily check if your <Image/> component is visible by setting the backgroundColor='red' while developing.
2. Check App Transport Security (ATS) settings
Q) Are you using iOS? Is the uri source in https or http?
If you are fetching image in http, check the ATS settings.
Also from RN Docs on ATS:
App Transport Security is a security feature introduced in iOS 9 that rejects all HTTP requests that are not sent over HTTPS.
Suggested fix from another SO question is to add NSAllowsArbitraryLoads in the info.plist.