I am trying to get file names in main directory of my react native project. I have used "react-native-fs" to do it.
Here is my code;
const getFileNames = () => {
const path = FS.DocumentDirectoryPath;
console.log(path);
};
And it doesn't give me App.js, index.js, ... It gives me this result;
/data/user/0/com.mrkennedy/files
Versions;
"react-native": "0.62.2",
"react-native-fs": "^2.16.6"
You've just got path, to read the dir's content use readDir: https://github.com/itinance/react-native-fs#readdirdirpath-string-promisereaddiritem which will return you array of objects, each describing file. See this example: https://github.com/itinance/react-native-fs#basic.
Moreover, you won't access App.js etc. using DocumentDirectoryPath, document directory is not equivalent to your project's root directory. I don't think it's possible to access project's root without special configuration as package server bundles all JavaScript files into single file.
Related
I know this is common errors but i tried the answers in stackoverflow but it doesnt work.
i am loading a gltf file from this tutorial : https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html
I am using nodejs express as my server and my directory structure is
where in public is set as the public folders like this
app.use(express.static('public'));
inside the public folder contains the necessary threejs library files and GLTF loader,
so since the public folder is already 'public' and exposed it also contains the assets or the gltf files
However, when loading the gltf file from this directory, it results to 404.
const loader = new GLTFLoader();
loader.load('assets/city/scene.gtlf',
(gltf) => {
const root = gltf.scene;
scene.add(root);
},
(xhr)=>{
},
(error)=>{
console.log(error);
});
What I am missing here?
I want to add a static xml asset to my react native project and access it just like accessing images.
I added
resolver: {
assetExts: ['png', 'xml'],
},
to metro.config.js and const asset = require('asset.xml') returns me a number. But how to get the file content from this number?
Below code gets me a URI in development mode that I can use axios to fetch it, but in release mode it only returns a filename like asset, how to read it in release mode?
Image.resolveAssetSource(asset).uri;
You can use expo-asset to get the localUri:
const [{ localUri }] = await Asset.loadAsync(require('path/to/your/asset.xml'))
Then you can use expo-file-system to get the contents of the file as string:
const xmlString = FileSystem.readAsStringAsync(localUri)
Then you can convert the xml string to a JS object with a package like fast-xml-parser.
In order for this to work, you should edit your metro.config.js just as you mentioned above, namely: assetExts array should contain xml.
Also, if you use Typescript, you should add a declaration file, like xml.d.ts with the content of:
declare module '*.xml' {
const moduleId: number; // the react-native import reference
export default moduleId;
}
and that declaration file should be in a folder, that's added to typeRoots property in tsconfig.json.
Just a quick reminder: you can use this solution without Expo in a bare react-native app, you just have to install unimodules, which is described in the above links.
Good luck! :)
I have a JSON file that I included in my vue app. But the problem is that when I build the app, the JSON file disappears and becomes a part from a js file.
How can I keep it as a JSON file after build, since I want to manipulate it?
If you are using Vue CLI 3, you can place your static files in public directory and reference them by absolute paths.
For more information you can visit the CLI documents.
Update
Place your JSON file in public directory
Import axios or any similar tools you use for AJAX calls.
You need a .env file in your project root. And store your base url in BASE_URL variable. (Read More!)
Add a data property containing your base URL:
data() {
return {
baseUrl: process.env.BASE_URL,
}
},
And then you can access you JSON value with an ajax call:
axios.get(this.baseUrl + 'test.json').then(response => {
console.log(response);
})
I think you want to configure the externals option.
I have a small Aurelia app built with Webpack. Under my src folder I have util folder with index.ts inside. In main.ts I turn the feature on like this:
import { Aurelia, PLATFORM } from "aurelia-framework";
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature(PLATFORM.moduleName("util"));
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("app")));
}
util/index.ts:
import { FrameworkConfiguration } from 'aurelia-framework';
export function configure(config: FrameworkConfiguration): void {
config.globalResources([
"./converters",
"./rest"
]);
}
converters and rest are Typescript modules under util.
I'm following the instructions from Aurelia Hub.
When I open the app in the browser I see the following error:
Uncaught (in promise) Error: Unable to find module with ID: util/index
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:187)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
at aurelia-loader-webpack.js:11
at Promise (<anonymous>)
at webpackJsonp.64.__awaiter (aurelia-loader-webpack.js:7)
at WebpackLoader.webpackJsonp.64.WebpackLoader._import (aurelia-loader-webpack.js:152)
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:252)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
If I reference the modules directly instead of the feature e.g.
import { Rest } from '../util/rest';
Then I get no errors and the app loads successfully. But I want to have these modules globally available.
Using aurelia-webpack-plugin version 2.0.0-rc.2
Would appreciate your advice.
Take a look at this:
https://github.com/aurelia/templating-resources/blob/master/src/aurelia-templating-resources.js
Edit:
I have gotten it working. The key is that you need to explicitly call PLATFORM.moduleName('./relative/path/to/file') on each path specifically and that the call needs to be made from the file (actually technically the same directory but still...) that calls config.globalResources().
In other words you can't shortcut the following code:
config.globalResources(
PLATFORM.moduleName('./resource1'),
PLATFORM.moduleName('./resource2')
);
Don't try to map the resources to PLATFORM.moduleName or to dynamically construct file names.
You should change your path PLATFORM.moduleName("util") into PLATFORM.moduleName("./util"). Then you can be able to use path relative to your util folder to register your globalResources. Also you can look into here for sample project structure. Also see this line of code, aurelia added /index to moduleName if it not included as it was based on convention.
If you already try using aurelia CLI, the created project under src/resources is registered as a feature.
I'm using https://github.com/zmxv/react-native-sound to play sounds on my iOS (and Android) app, and I'm trying to include sound files through React Native's asset system, but when I call:
var sound = require('./sound.mp3');
I get the error:
Unable to resolve module ./sound.mp3 from [project]/index.ios.js: Invalid directory [project]/sound.mp3
I have my MP3 file in the correct (root) directory of my project, the exact same file path that the error is printing. I've tried putting it in other directories as well.
According to this thread, it sounds like sound files should be able to be packaged using require() as well?
Just doing a test, requiring an image works perfectly:
var image = require('./image.png');
What worked for me was simply using the app name as root:
import myMP3File from '<appname>/assets/mymp3.mp3';
const Sound = require('react-native-sound');
Sound.setCategory('Playback');
// Do whatever you like with it.
Sound(myMP3File, () => console.log('soundfile loaded!'));
Edit:
We now use rn-fetch-blob and the following solution to access local files:
import RNFetchBlob from 'rn-fetch-blob';
const { fs } = RNFetchBlob;
filePathIos = `${fs.dirs.MainBundleDir}/yourFolder/yourMp3.mp3`;
filePathAndroid = fs.asset('yourFolder/yourMp3.mp3');
The corresponding path can then be used to copy the file using fs.cp().
The only thing that worked for us is to put the audio files we want to ship with the app in an assets directory and then have Xcode copy those files into the app bundle at build time. At that point, you can calculate the full path to the file using something like react-native-fs, and provide that to react-native-sound.
I had the same error message with managed Expo when trying to play a sound.ogg.
None of the trick I could find worked.
In the end, what solved it was to convert the ogg file to mp3, which is supported by Expo.
You need to use react-native-asset to put files to your project and access them with require keyword.
Example for file with path ./assets/audio/some-audio.mp3:
Add or modify react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
dependencies: {
},
assets: [
'./assets/audio'
],
};
Run npx react-native-asset
Use the file:
const someAudio = require('./assets/audio/some-audio.mp3')