react-native images with space in name not loading

Question

I am trying to use an image in my react native app.

I have very little code at this point

This is all the code I have for now

import React from 'react';
import { ScrollView, View, Text } from 'react-native';
import Image from '@src/assests/images/avatars/Allan Munger.png';
import { ImageCircle } from '@src/components/elements';

const App = () => {
  const [active, setActive] = React.useState(0);
  return (
    <View>
      <ImageCircle uri={Image} active={false} />
    </View>
  );
};

export default App;

Where ImageCircle is this

import React from 'react';
import { View, Text, Image, ImageSourcePropType } from 'react-native';
import Styles from './styles';

const ImageCircle = ({ active, uri }) => {
  console.log('uri', uri);
  return (
    <View
      style={{
        width: 60,
        height: 60,
        borderRadius: 30,
        borderColor: 'red',
        borderWidth: 1,
      }}>
      <Image source={uri} width={60} height={60} />
    </View>
  );
};

export default ImageCircle;

I can't see my image in the circle (or anywhere).

In the console, there is this one log

Asset not found: /Users/varunb/Desktop/project-emma/src/assests/images/avatars/Allan%[email protected] for platform: ios

Can someone tell me why I can't see the image on my iPhone and why am I getting this error? and how to fix it?

Ps: If I remove space from image import (and rename image as well), then everything works fine i.e

import Image from '@src/assests/images/avatars/AllanMunger.png';

This is what I can see on iPhone (with spaces in import)

Answer 1

I hope this code helping you

wrong format:

<Image source={uri} width={60} height={60} />

There are two kind of render Image style

<Image  style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
<Image  style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />

In your case

<Image source = {{uri: uri} width: {60} height:{60}}

If you still not render image, you can use FastImage instead using Image

After npm install react-native-fast-image , you can use FastImage

Please check this url https://github.com/DylanVann/react-native-fast-image

It could be correctly working