React-native: image is not rendered

Question

I am learning React native and simply want to add an image inside of a container.View and a title.Text. Nothing is being shown. I tried both accessing it from the assets folder and via uri.

My assets folder is outside of the components folder.

import React, { useState, useEffect } from 'react'
import styled from 'styled-components/native'
import { Text, Image, View } from 'react-native'

import { MAGIC_API } from './reusable/urls';


export const MagicAnswerList = () => {
  const [magicAnswer, setMagicAnswer] = useState([])

    useEffect(() => {
    fetch(MAGIC_API)
      .then(res => res.json())
      .then(magicdata => setMagicAnswer(magicdata))
      .catch(err => console.error(err))
  }, [])

 return (
    <Container>
        <Title>
          {magicAnswer.Answer}
          <MagicBall 
            source={require('../assets/billiard.png')}
          /> 
        </Title>
    </Container>
  )
}

score 0 · Answer 1 · answered Apr 06 '21 at 12:46

0

I don't see your <Image /> being used. I see <MagicBall /> instead. I suggest you try rendering something simpler and see what happens.

answered Apr 06 '21 at 12:46

Shunya Watanabe

340
3
9

I changed it to and it is the same, I don't get any error message, but also nothing is being rendered. – Caroline Apr 06 '21 at 12:48
The image is shown in the Inspector tool but does not render in the browser window – Caroline Apr 06 '21 at 12:55
it renders on android – Caroline Apr 06 '21 at 13:03

score 0 · Answer 2 · answered Apr 06 '21 at 13:18

0

You need to add a style param to your <Image /> tag. For example:

<Image
    source={require('../assets/billiard.png')}
    style={{
        height: 100,
        width: 100,
        resizeMode: 'contain'
    }}
/>

Note that the width and height params are necessary to make it visible.

answered Apr 06 '21 at 13:18

instanceof

1,404
23
30

I have this above: `const MagicBall = styled.Image` width: 40px, height: 40px, border-radius: 35%, `; ` – Caroline Apr 06 '21 at 13:20

React-native: image is not rendered

2 Answers2