Pass full image source object rather than URI

[krewllobster]

Feature Request

In the React-Native Image component, we can provide a source object that includes headers, i.e.

<Image source={{uri: '...imageUri', headers: {'Authorization': 'Bearer ...JWT'}} />

Why it is needed

In order to render images that are hosted such that authorization is needed. Currently the Image Editor only accepts the imageUri and cannot pass headers through.

Possible implementation

Update underlying native code to check for whether imageUri is a string (backwards compatability) or object that expects parameters of { uri, headers }. If an object is found, then extract the uri and use as it currently is, and then when making the connection, for each header, call URL.setRequestProperties(key, value)

Code sample

I unfortunately don't know proper syntax for the native code side, but I'm sure psuedo code of:

(while interpreting incoming props from RN):
   is imageUri a string? If so, set local ref to imageuri
   is imageUri an object? If so, set local ref to imageUri.uri and local ref to headers as imageUri.headers

(when making remote connection for remote images)
  if (imageUri is local) do local image stuff
  if (imageUri is not local)
    URLConnection connection = new URL(mUri)
    if (headers) Object.entries(headers).forEach(([key, val]) => connection.setRequestProperty(key, val)
    connection.openConnection()
    stream = connection.getInputStream();

[krewllobster]

Could also add an additional optional prop for headers and then just use that prop if it exists when opening a remote connection to an image asset.

[krewllobster]

Wow, thank you! Four years :)