react-nativeauthorization-header

react-natiive Avatar element add authorization header for uri attribute


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

Solution

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

    enter image description here

    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