React-native image with headers

Question

How to pass headers into Image element?

This approach does not fit due to impossibility to cache images and base64 conversion will be hard with small RN Js-thread
https://stackoverflow.com/a/36678631/6119618

This is not working at all on neither android nor ios
https://stackoverflow.com/a/44713741/6119618

I don't want yet eject my project, so modules like FastImage and others using react-native link will not work

UPD
tried to launch the same app on ios and images aren't showing up. Android works

Answer 1

The better approach would be something like this.

import { Image } from 'react-native';

<Image 
  source={{ 
    uri: 'source uri',
    headers: {
      ...headers
    }
  }}
/>

Above method would work for almost every case, However you can also separately fetch the image using fetch api or axios (pass the headers in the request). Then store the base64 in state and then use that as uri.