React native: images with space in name won't load in IOS (device, not https issue)

Question

Images with spaces in their name won't load in IOS, for android it worked by replacing the spaces with %20, but this solution didn't work on ios. React native.

I m loading the images remotely using uri, in a normal Image container. images without space load fine.

Answer 1

<Image source={{uri: fileName.replace(/ /g, '%20')}} style={styles.image} />

works on [email protected]

Answer 2

encodeURI("http://www.yourdomain.tld/sample image.jpg")

Output

http://www.yourdomain.tld/sample image.jpg

to

http://www.yourdomain.tld/sample%20image.jpg

Usage

<Image source={{uri: encodeURI(fileUri)}} />

the best way is to use the js builtin javascript function encodeURI

because we also have to convert some special characters in URLs