I have a react-native project and in the assets folder there is a model.glb file that needs to be accessed by Model.js which is not in the assets folder. I thought
import newModel as ./assets/model.glb
would work but I get an error that it can't be found
Ensure the import line above, import newModel as NEW from '.assets/model.glb'
Related
I have a problem and I can't solve it! My App in React-Native has a bunch of screens. One screen uses a JSON file that right now is inside a the App Project Folder:
import test from "../test.json"
I want to replace this because obviously if I want to change the JSON I need to change the file inside the App Project Folder. So I wanted to download the file and then import it the same way. I successfully downloaded the file in a temporary directory but I could not import it because it was not inside the App Project Folder.
I'm using a React-Native library called react-native-blob-util. One function of the library (ReactNativeBlobUtil.fs.dirs) tells me all the directories:
{"ApplicationSupportDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Library/Application Support", "CacheDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Library/Caches", "DCIMDir": undefined, "DocumentDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Documents", "DownloadDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Downloads", "LibraryDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Library", "MainBundleDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Bundle/Application/C6148120-2378-44B7-BE2A-B4FFBDE6668D/TypeTest.app", "MovieDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Movies", "MusicDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Music", "PictureDir": "/Users/testuser/Library/Developer/CoreSimulator/Devices/2CDC9FD4-9CA6-4FDC-BBBA-12A17D7523C2/data/Containers/Data/Application/CF3BF7FD-CE84-439E-9BB9-EF318D685F81/Pictures", "SDCardApplicationDir": undefined, "SDCardDir": undefined}
Is it possible to download the JSON inside the project folder or some other directory when the user logs and then import the file in another screen?
You can not import a file that you downloaded to the device storage in runtime. You need to read it from the file system to use that file.
But depending on your setup there are easier ways to do what you want to accomplish.
I'd recommend you save your json file content to your application state (like redux or any other state management solution) and update your state after fetching the new json. If you want to persist the updated state between launches, you can use redux-persist so you wouldn't have to worry about the content being up to date.
I want to import some .cube files to use with FFmpeg to generate filters on my video.
Like images, I have them in a folder (LUT) in my src folder.
But when I try to import them the same way I would import an image, I am getting the following error:
Error: While resolving module `buds/src/LUT/Arabica-12.CUBE`, the Haste package `buds` was found. However the module `src/LUT/Arabica-12.CUBE` could not be found within the package. Indeed, none of these files exist:
The file does exist, I cant seem to import these files without running into this error.
Is it possible to load .cube files into React Native, I don't see why not...
I appreciate any help I can get with this.
Cheers.
I’ve a NuxtJS app and want to include a file called app.js (located in assets/js/app.js).
Contents of that file:
// imports from node_modules
import 'focus-visible';
import 'other-package';
…
What I am doing at the moment is to import that packages inside layouts/default.vue … but it doesn’t feel right.
How would you do it?
Importing the assets file is no different than importing any other JavaScript file from another src directory:
import '#/assets/js/app'
It's hard to say whether this usage is "right" without more context, but I don't see anything wrong with doing that.
In the docs directory (docusaurus project) I create markdown files and these MD files contain imports from external react project (it's a local project placed in other directory).
Everything works fine, but one tiny thing. Now I import files like this:
import Component from '../../../react-project/src/components/Component';
I don't know how to shorten the path. I'd like to write something like this:
import Component from '#components/Component';
How can I do this?
If you have your separate components within a git repository, you can reference that repository as an imported module.
npm install git+https://github.com/yourUser/yourRepositoryName
import {Component} from yourRepositoryName
How can I configure React Native to import files relative to the src directory? In other words, I want to write import Foo from 'components/foo' rather than import Foo from '../../components/foo'.
When using webpack it can be configured like this. With React Native packager I haven't found a way to do this.
I haven't found a solution that let's you import exactly the way you want, but there are several suggestions of how to configure import locations in this thread.
My favorite solution
(Works in any JavaScript project, not just React Native, and let's you write very short paths to reference files.)
Create a package.json in your src/ directory with the contents:
{
"name": "src"
}
What this does is say: This folder is a package, named src. Then you can import any file/directory inside that package by simply adding it's position (relative to the directory the package.json is in) after the name of the package:
import Foo from 'src/components/foo';
Another solution
In any React Native Project, you can do:
import Foo from 'MyApp/src/components/foo';
where MyApp is whatever name you registered in your index.ios.js and index.android.js files.
The app name is registered using one of the AppRegistry methods, such as
AppRegistry.registerComponent('MyApp', () => AppRootComponent);
A good solution is to make your babel resolve all the logical paths before it transpile. You can accomplish this by adding babel-plugin-root-import to you're node dependencies and changing you're .babelrc, similar to the code bellow:
"plugins": [
["babel-plugin-root-import", {
"rootPathSuffix": "src"
}]
]
Now you can refer to all your components inside src like this
import Component from '~/business/ComponentExample'