0

I'm using an Image component, the source of which is a uri from an api. The issue I'm running into in development is that the Image won't load unless I manually set the source after initializing it as undefined. I found this comment on a post which is what got me setting it manually in the first place: https://stackoverflow.com/a/71263771/11301668

My question is.. why? None of the examples and docs say anything about having to do this so it makes me think there's an issue in the packages I'm using, maybe?

Example code which works:

import React, { useEffect, useState } from 'react';
import { Image } from 'react-native';
import Config from 'react-native-config';

const Component = () => {
  const [imgSrc, setImgSrc] = useState(undefined);

  useEffect(() => {
    setImgSrc({ uri: `${Config.URL}` })
  }, [])

  return (
    <View>
      <Image
        style={{ height: 50, width: 50 }}
        source={imgSrc}
      />
    </View>
  )
}

However, if I declare the source in the image directly it won't load.

<Image
  style={{ height: 50, width: 50 }}
  source={{ uri: `${Config.URL}` }}
/>

Packages:

"dependencies": {
    "@eva-design/eva": "^2.1.0",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/drawer": "^6.4.1",
    "@react-navigation/material-top-tabs": "^6.2.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "@ui-kitten/components": "5.1.2",
    "@ui-kitten/eva-icons": "5.1.2",
    "@ui-kitten/metro-config": "5.1.2",
    "formik": "^2.2.9",
    "immutability-helper": "^3.1.1",
    "lodash": "^4.17.21",
    "react": "17.0.1",
    "react-native": "0.64.1",
    "react-native-config": "^1.4.5",
    "react-native-gesture-handler": "^2.3.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-pager-view": "^5.4.15",
    "react-native-paper": "^4.12.0",
    "react-native-reanimated": "^2.6.0",
    "react-native-safe-area-context": "^4.2.4",
    "react-native-screens": "3.11.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.1.0",
    "react-redux": "^7.2.8",
    "redux-thunk": "^2.4.1",
    "superagent": "^6.1.0",
    "superagent-prefix": "^0.0.2",
    "superagent-retry-delay": "^2.6.2",
    "yup": "^0.32.11"
}
Dwigt
  • 375
  • 2
  • 13

0 Answers0