React native Image ' Warning: Failed prop type: Invalid prop `source` supplied to `Image`. '

Question

So this is my code I already answered the question.

export const BigCard = ({Title, Image, Description}) => {
        console.log(Image)
            return(
                <StyledBigCard>
                    <StyledImage source={{
                        uri: Image,
                    }}/>
                    <StyledStroke>
                        <StyledStrokeText>
                            <StyledPBigCard>{Description}</StyledPBigCard>
                        </StyledStrokeText>
                        <FontAwesomeIcon style={style.icon} size={ 22 } icon={faChevronRight} />
                    </StyledStroke>
                </StyledBigCard>
        )
};

this is were i import the images etc. it is set in PBS1Detail, its an object so when i go to PBS1Detail.Image i get the image

  const db = firebase.firestore();
  
  const [PBS1Detail, setPBS1Detail] = useState([]);
  const [partnerLevel, setPartnerLevel] = useState('');

  useEffect(()=> {
      {/* DATABASE */}
  db.collection('Track').get().then((snapshot) => {
      let results = []
    snapshot.docs.forEach(doc => {
      results.push(renderTracks(doc))
      }
    )
    setPBS1Detail(results)
    });

then i push it all the way to the screen were i import Image

all my imports are correct, and the console.log() gives me the good url to the image. now when i now reload the app it gives the error "Warning: Failed prop type: Invalid prop source supplied to Image." then when i update the image component to

<StyledImage source={{uri: 'https://s3.eu-central-1.wasabisys.com/image-parttime-bijbelschool-jaar-1/Track1Module1Thumbnail.jpg'}}

and than save the changes it works then when i update it to

<StyledImage source={{uri: Image}} />

and than save the changes it also works

so when i run it the first time it gives me this error than when i change it to an url and than change it back to the Image prop it works. but when i reload the app it gives me this error again.

how can i fix this?

can you share a code snippet from the parent component where the Image prop is passed? — imKrishh, Jun 12 '21 at 17:52
@imKrishh I have updated the question, console.log(Image) gives me a possitive result — Sander van Maastricht, Jun 12 '21 at 18:25

score 0 · Answer 1 · answered Jun 13 '21 at 02:43

The PBS1Detail is an empty array until you actually get the image data from Firestore.

So when the first render, I guess you are trying to pass undefined or some invalid values for the source prop.

How about you give a condition for the render part?

export const BigCard = ({Title, Image, Description}) => {
        console.log(Image)
            return(
                <StyledBigCard>
                
                    {!!Image && (
                      <StyledImage source={{
                          uri: Image,
                      }}/>
                    )}
                    
                    <StyledStroke>
                        <StyledStrokeText>
                            <StyledPBigCard>{Description}</StyledPBigCard>
                        </StyledStrokeText>
                        <FontAwesomeIcon style={style.icon} size={ 22 } icon={faChevronRight} />
                    </StyledStroke>
                </StyledBigCard>
        )
};

Wauw, the error was not from this code but it was a reausable component and on a different screen i send a wrong prop to it, thanx for the help, i will close the question — Sander van Maastricht, Jun 13 '21 at 05:36

score 0 · Answer 2 · answered Jun 13 '21 at 05:39

The problem is not my code above, what i did was that on my homescreen i sended wrong props to Image is send

Image={Require('../../assets/Image.png')}

thats why te error occurded. i have set it to

Image={'https://s3.eu-central-1.wasabisys.com/image-parttime-bijbelschool-jaar-1/Track1Module1Thumbnail.jpg'}

and it works perfectly!

React native Image ' Warning: Failed prop type: Invalid prop `source` supplied to `Image`. '

2 Answers2