react-natiive Avatar element add authorization header for uri attribute

Question

I am using the react-native version: "0.63.4". In the Avatar react-native url, I am setting the url value, however, I need to attach an authorization header, with the url. Could someone suggest how do I do it?

import {ListItem,Avatar} from 'react-native-elements'
    const CustomListItem = ({id, profilePicture}) => {
        return (
            <ListItem key={id} bottomDivider>
    <ListItem bottomDivider>
                <Avatar rounded 
                 source={{uri:'https://test.url/'+profilePicture}}/>
    
       </ListItem>
        )
    }
export default CustomListItem

score 1 · Accepted Answer · answered Mar 01 '21 at 02:56

Avatar's source props is based on ImageSource of React Native component

So, in the official docs of react native, you can customize the network request for image like this: (copied from docs)

<Image
  source={{
    uri: 'https://reactjs.org/logo-og.png',
    method: 'POST',
    headers: {
      Pragma: 'no-cache'
    },
    body: 'Your Body goes here'
  }}
  style={{ width: 400, height: 400 }}
/>

More details here: Network Requests for Images

react-natiive Avatar element add authorization header for uri attribute

1 Answers1