Estoy tratando de usar una imagen en mi aplicación nativa de reacción.

Tengo muy poco código en este punto

Este es todo el código que tengo por ahora.

 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;

¿Dónde está ImageCircle?

 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;

No puedo ver mi imagen en el círculo (ni en ninguna parte).

En la consola, hay este registro

 Asset not found: /Users/varunb/Desktop/project-emma/src/assests/images/avatars/Allan%20Munger@2x.png for platform: ios

¿Alguien puede decirme por qué no puedo ver la imagen en mi iPhone y por qué recibo este error? ¿Y como arreglarlo?

PD: si elimino el espacio de la importación de imágenes (y cambio el nombre de la imagen también), entonces todo funciona bien, es decir

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

Esto es lo que puedo ver en iPhone (con espacios en importación)