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.
Related
I am trying to add a paintworklet to my application, but I am having a really hard time.
The worklet is a npm dependency, but worklets can't be inlined, they need to be registered like so:
CSS.paintWorklet.addModule('url/to/module.js');
I am having a hard time, because even though that currently works in my application, I am not sure if this is the right way to go about it, or if it will work in production. Currently, my url points to a file inside node_modules and I am not sure if nuxt will do anything with this.
I am currently doing this with a .client.js file inside the plugins folder. But they need an export default function(), but the worklet code does not have an export.
What I am currently trying to do, is tell nuxt somehow to grab certain files from node_modules and serve them as assets somehow, and then reference them some other way. But I cannot find any resources on this.
Any ideas would be appreciated.
If the file path is specified in a literal string, containing node_modules, the paint worklet might appear to work in development mode, but the worklet file will not be bundled in the build output:
CSS.paintWorklet.addModule('./node_modules/extra-scalloped-border/worklet.js')
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
❌ file not bundled in build output
Solution: Import the file
Importing a file enables the bundler to track the file, and include it in the build output. Nuxt 3 uses Vite by default, and the Vite docs describe how to import the file to use with paint worklets:
Explicit URL Imports
Assets that are not included in the internal list or in assetsInclude, can be explicitly imported as an URL using the ?url suffix. This is useful, for example, to import Houdini Paint Worklets.
import workletURL from 'extra-scalloped-border/worklet.js?url'
CSS.paintWorklet.addModule(workletURL)
Since the CSS.paintWorklet API is only available in the browser, make sure to use this in the mounted() hook, which only occurs client-side:
import workletURL from 'extra-scalloped-border/worklet.js?url'
export default {
mounted() {
CSS.paintWorklet.addModule(workletURL)
}
}
demo
I've been using the default create-react-native-app and would like to continue to do so as long as I can without ejecting.
The feature I need for the app is to download a file to the app cache using FileSystem.downloadAsync which stores the file to the local cache or temp directory. Next I need to share that file with any program that can open it. For example. if I download a word doc then open the word viewer, or if it's a pdf then open a pdf viewer.
Is it possible to open an app that can view those files and still use default create-react-native-app?
you can use this exaple is based in documentation:
https://snack.expo.io/BkT-AkAvm
How i can load translations json files in RN? In browser i can use fetch and XHR, but in application it must be some kind of file system acces with copy translations to ./android/app/src/main/assets/ folder?
We load the using the xhr-backend. Not yet had the need to cache those on asyncStorage but doing so would be rather easy - copy of the https://github.com/i18next/i18next-localStorage-cache using asyncStorage
Or add them using i18next.addResourceBundle: https://www.i18next.com/api.html#addresourcebundle
Or use a webpack bundler: https://github.com/atroo/i18next-resource-store-loader
But a loader from filesystem of phone would be great too, not yet know if someone built that.
Our environment has setup a private git repository and configured jspm to install packages from this repository. The repo has a .js, .html, and .css file. Jspm brings all the files down into a folder with #master appended to the name to reflect the branch and stores it all in the pre-configured jspm_packages location on my machine. It also adds a second #master.js file next to the folder with export statements inside (I didn't create this file myself).
These files represent custom elements I want to use in my aurelia application. There is a .js for the viewmodel and a .html for the view (and a .css file). When I go to use the custom element I get a 404, file not found, because system.js is looking for a #master.html file, which doesn't exist.
Jspm seems to be referencing the #master.js file in config.js and somehow that's assuming a #master.html file in Aurelia? Only a #master.js file was created when I installed the package using jspm. The original .html file does exist and lives inside the folder I mention above, but that #master.html file does not and I'm not sure 1) what that file would be for and 2) why it's being referenced. There no reference to #master.html in my code.
I'm not really even sure if this is a JSPM issue, Aurelia issue, System.js issue, or some combination of them?
Anyone else have a similar experience with these technologies?
Thanks,
Chris
Essentially, Aurelia believes you are importing your repo as a custom element, so when you are importing the #master.js it is looking for the matching "view" of what it assumes is a viewmodel.
It sounds like you need to structure your repository as a plugin. Add an index.js file at the top level and make that responsible for running the configure function, which should make the components you want global resources. Ensure your package.json points to your index.js as the 'main'. After that, you would need to add a .plugin('your-package-name') in the main.js file, just like any other plugin.
An example index.js is like so:
import {Options, GLOBAL_OPTIONS, DIRECTION} from './options';
import {Dragula} from './dragula';
import {moveBefore} from './move-before';
export {Dragula, Options, DIRECTION, moveBefore};
export function configure(config, callback) {
let defaults = new Options();
config.container.registerInstance(GLOBAL_OPTIONS, defaults);
if (callback !== undefined && typeof callback === 'function') {
callback(defaults);
}
config.globalResources(['./dragula-and-drop']);
}
(taken from here)
just wondering if it's possible to include some files (one txt file in this case) in the app package that I need in the application folder. The thing is that I might use a piece of code that requires the license to be included in the app as a text file, and I think this would be one way to do it.
Thanks in advance.
Absolutely, it's really no different than including images for instance. And if you need to process the file within your app you can access it via its local path or explicitly use the ms-appx:/// protocol.
See How to reference content and How to load file resources for more details.
Just include the file in your project with Build Action set to Content. You can put it in any folder you like.
The file can then be accessed from the app either using the ms-appx: protocol or using the StorageFolder API:
var license = await Package.Current.InstalledLocation.GetFileAsync("license.txt");