CODEWITHSUNDEEP
reactjsreact-nativeimageurireact-props
curt64
curt64

Reputation: 9

setting uri image as props in react native

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.

Upvotes: 1

Views: 661

Answers (1)

First dev
First dev

Reputation: 554

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

Upvotes: 1

Related Questions