setting uri image as props in react native

user_12762372 0
Viewed 32

I'd like to pass an uri of an Image as a props in React native.

My code looks like this in the child component :

const ButtonIcon= ({ uri }) => { return ( <Image style={{ width: 24, height: 24, resizeMode: 'contain', }} source={{ uri:{uri} }}/> ) }

Here is the code in the parent component :

<ButtonIcon uri="../assets/googleicon.png" /> <ButtonIcon />

I have a message saying JSON value "..." cannot be converted to a valid URL. Anybody can help please? I'm using expo with react native. Thank you.

react-props react-native reactjs uri image
1 Answers

You can't use a local path as a URI for Image component Instead, do something like this

const ButtonIcon= ({ source }) => { 
  return (
    <Image
      style={{ width: 24, height: 24, resizeMode: 'contain' }}
      source={source} />
  ) 
}

<ButtonIcon source={require('../assets/googleicon.png')} />

Refer to https://reactnative.dev/docs/image#source for more information

user_81727750
Related