react-native : image import err : None of these files exist - react-native

I am trying to import an img.JPG photo in my React Native project using import image from './media/img.JPG';.
But I get an error saying the file doesn't exist
For reference, my files look like this:
It came out well on the screen when the external path was inserted.

In your question, you say the image name is img.PNG, but in the code it says img.JPG. Could that be the issue?

Related

【React Native】I want to use a function in __tests__ directory

I want to use function in tests directory, but it show me the error message that it is 'None of these files exist' when I import the file in _tests directory.
I use React Native and the directory structure is as follows.
enter image description here
Therefore, I am getting an error that the file exists but does not exist.
If. anyone knows anything, please contact me.

ReacNative: requireNativeComponent:"CKCameraManager" was not found in the UIManager

I want to open Camer by using the below npm package, but it is producing this error.
https://www.npmjs.com/package/react-native-camera-kit
import {CameraScreen} from 'react-native-camera-kit';
<CameraScreen
// Barcode props
scanBarcode={true}
onReadCode={(event) => Alert.alert('QR code found')} // optional
showFrame={true}
laserColor="red"
frameColor="white"
/>
I had the same issue. It's an issue with the import in the package itself. Go to CameraScreen.tsx file either by exploring the node modules folder manually or just Ctrl + Left Click on the class CameraScreen in your code. In there, scroll to top and look at the imports. There will be a red line (depends on your code editor) under the Camera import (as shown in the attached image). Just change it to ./Camera.android or ./Camera.ios depending on the platform you're developing for. Solved my issue.
Image or problematic code

Custom icon with fontello not working React Native

Hi I'm trying to implement custom icons following similar tutorials from online but keep running into the same problem with different approaches. First I uploaded the svg to the fontello service. Then I put the .ttf file into my assets/fonts folder. Then I placed the config.json file in my src base folder. Finally, I linked them and even checked build phase settings to make sure its there in xcode. However, the icon doesn't show up with the following code and it shows up instead a question mark inside a white box.What should i be doing?
import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from '../config.json';
const Icon = createIconSetFromFontello(fontelloConfig);
...
render(){
<Icon name="Icon_X" size={80} color="#000"/>
}

Getting the following error: Unable to resolve "../assets/icon.png" from "app\assets\screens\WelcomeScreen.js"

When I try to run my app I get the error
Unable to resolve "../assets/icon.png" from "app\assets\screens\WelcomeScreen.js"
Error: Problems validating asset fields in app.json. See https://docs.expo.io/
• Field: icon - cannot access file at './assets/icon.png'.
I created a screens folder and input my homescreen into it as I heard that the majority of the react native community does things that way. Attached is a picture of my filesenter image description here
I think that the image path is off, however I had changed it multiple times and am still getting the same error.
Any help would be appreciated.
try the following: ../icon.png
Cause that's what I can see from your file structure.
If you use visual studio code as dev tool, when you type path cue, correct path will be appeared. so you can avoid to make mistake in path of image.

Logging Current Directory/Filename in React Native

I was wondering if there is a way to log the current filename or directory in React Native. Similar to how NodeJS does it with __filename and __dirname.
No, it's not possible since all the source code gets bundled together into one big file, and then a source map is provided so that you can debug it in the original structure.
You can see that by calling this code snippet somewhere in your code:
console.log(new Error().stack);
In a regular javascript you would get the entire trace with files and line numbers, but in react-native you get somthing like:
Error
at Login (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:83009:9)
at instantiate (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:5712:18)
at new Login (eval at proxyClass (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:5730:16), <anonymous>:4:17)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:22051:19)
at ReactCompositeComponentWrapper._constructComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:22033:13)
at ReactCompositeComponentWrapper.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:21952:15)
at Object.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:20425:29)
at ReactCompositeComponentWrapper.performInitialMount (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:22134:28)
at ReactCompositeComponentWrapper.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:22015:13)
at Object.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:20425:29)"
which shows you the real files are gone.