React native Question posted in
The official React Native documentation can be found here.

Image is not loading in expo react native

<Image
      source={{
         uri: 'correct-url-of-my-image',
         headers: {
            Accept: 'image/*'
         }
      }}
      style={{ width: 400, height: 140 }}
      contentFit="contain"
      className="z-10"
      onLoadStart={() => {
          console.log('Image loading started');
      }}
      onError={e => {
          console.log('Image loading failed', e);
      }}
      onLoadEnd={() => {
          console.log('Image loading ended');
      }}
/>

everything is correct but the image is not visible. I have also checked the URL, it is working fine, also I tried to keep the image in assets directory and tried to access it but still it is not working.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The image format was .svg, but it did not work. Then I tried to export the .png format from Figma and it worked fine, the image was visible after that.


  2. 0

    You can use SVG in react native using react-native-svg. See expo documentation

    Unfortunately, it’s not possible to use them directly from URL with the component. It must be created as a custom component for each SVG.

    In your case, if you want to use SVG from figma, you will have to export the SVG, add it to a react component and update all SVG tags to react-native-svg tags (adding upper case)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search