I'm having a very bizarre problem when trying to get images from my API (Express with Passport using JWT strategy). The component I'm trying to load the image in is this:
function ImagePreview(props) {
const imageId = props.imageId;
const [token, setToken] = useState(null);
useEffect(() => {
SecureStore.getItemAsync('accessToken').then(jwt => {
setToken(JSON.parse(jwt));
});
},[]);
return(
<View>
{ !token ? <Text>Loading...</Text> : (
<Image
style={styles.imagePreview}
source={{
uri: config.apiURI + "/media/" + imageId,
headers: { authorization: token }}
}
/>
)}
</View>
)
}
But, when I run the app I get a 401 error on my API indicating I'm not authorized to use the resource. You'd think this might be because my token isn't being set correctly but I have the same problem even if I hard code a valid token into the auth header. Another weird thing is that I've actually got it to work on occasion but it (seemingly) randomly stops working. When I make a get request using Postman I never have that problem.