React Native, Spring REST: image served is not loading on the app

Question

i'm working with React Native to build an Android app. I have a Spring REST backend that serve pictures that were uploaded by app's users.

Here is the code I use to serve the picture:

    @RequestMapping(value = "/user/{id}/picture", method = RequestMethod.GET, produces = "image/jpg")
    @ResponseBody
    public byte[] getProfilePictureJpg(@PathVariable int id) {
        User user = userRepository.findOneById(id);
        byte[] imageData;
        String path = user.getPicturePath();
        try {
            BufferedImage image = ImageIO.read(new File(path));
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            ImageIO.write(image, "jpg", baos);
            imageData = baos.toByteArray();
            return imageData;
        } catch (IOException e) {
            log.error("File not found");
            return null;
        }
    }

When I load an image on a browser, it's working: Browser loading picture

The problem is that when i try with the same url on React, picture is not loading:

<Image source={{ uri: 'http://192.168.0.15:8082/user/1/picture'}} style={{width: 300, height: 300}}/>

Of course, I tried with another picture, and it works:

<Image source={{ uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 300, height: 300}}/>

I read that iOS needed the image source to be secured with HTTPS, but nothing like that for Android.

Hope someone will be able to help me... Thanks

Answer 1

The Android simulator is on a different network than your laptop.

Try running adb reverse tcp:8082 tcp:8082 in your terminal before building on an Android device. This will redirect your phones port 8082 to your computers port 8082. You can change 8082 to any number that works best for you.