URI not displayed in React Native using Image Element-CodePudding

I am working on an app in React-Native that displays NFTs. For some reason this single URI is not showing up in the emulator or on my phone when testing.

URI: https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076

The rest of my NFTs show up fine and I also check for errors before displaying the image and no error is returned. I am able to enter the URI into my browser and it shows up fine so I am at a loss for what could be causing the issue with this one URI.

Here is my relevant code:

<Image
   style={styles.NFTImage}
   resizeMode={'cover'}
   source={{'uri': "https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076"}}
/>


const styles = StyleSheet.create({
    NFTOverlay: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        borderRadius: 25,
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        zIndex: 98,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    NFTImage: {
        width: '100%',
        height: '100%',
        borderRadius: 25,
        aspectRatio: 1,
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
})

As mentioned above, I have other NFTs (3 others), and they all show up completely fine so I am wondering if certain URIs need to be handled in React-Native a different way.

CodePudding user response：

If you open your image link in a new browser tab and inspect the image, you will that it is actually a svg. In react-native-web the Image component can handle the svg file completely fine (see here). For ios/android you will have to do more.

Here's an attempt I made with react-native-svg-uri that just doesnt render the svg properly:

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  useWindowDimensions,
} from 'react-native';
import Constants from 'expo-constants';
import SvgUri from 'react-native-svg-uri';
//  you will need to find a way to know when you are dealing with a svg
// e.g. does  the other url in like jpg/png?
const urls = [
  'https://nft-cdn.alchemy.com/eth-mainnet/84a7775b94b3062ce8ece869dbf15076',
];

export default function App() {
  const [imageError, setImageError] = React.useState('');
  // limit image height to its parent container dimensions
  const [containerLayout, setContainerLayout] = React.useState({
    width: 400,
    height: 400,
  });
  const onContainerLayout = React.useCallback(({ nativeEvent }) => {
    setContainerLayout(nativeEvent.layout);
  }, []);
  // if you cant find a way to figure out if the image is svg before loading
  // then you will have to attempt to render it with the Image component,
  // and then on fails render it with SvgUri
  return (
    <View style={styles.container} onLayout={onContainerLayout}>
      {imageError && <Text>{imageError}</Text>}
      {imageError ? (
        <Image
          source={{
            uri: urls[0],
          }}
          style={styles.NFTImage}
          resizeMode="cover"
          one rror={(error) => {
            console.log(error.nativeEvent.error);
            setImageError(error.nativeEvent.error);
          }}
        />
      ) : (
        <SvgUri
          source={{ uri: urls[0] }}
          // I dont know if this component accepts percentages
          width={containerLayout.width || "100%"}
          height={containerLayout.height || "100%"}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  NFTImage: {
    width: '100%',
    height: '100%',
    borderRadius: 25,
    aspectRatio: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
});