Load Text file in react native locally - react-native

I am creating an application using react native expo cli, my application contains a lot of data which is in the text file.
So now i need to load the text file into my application. how can i do that?

After dig down a lot regarding this issue i manage to answer my own question.
To read text file in react-native we have to create bare react-native project.
Read this link about manage and bare project for react-native : expo-managed-vs-bare.
After eject expo project or creating bare react-native project you can use library react-native-fs, which have ability to read text file and display in Text component.
For Android,
Create an assets Folder inside your-project-file\android\app\src\main
To read this folder assets use this snippet,
import * as RNFS from 'react-native-fs';
RNFS.readFileAssets(path to your file inside assets folder).then(result => {
console.log(result);
}).catch(err => {
console.log(err);
});
This will help to read text file inside your project for android only.

As #james Liu,the simplest way is to organize your data as json an load it like this:
const data = require("./mydata.json");
By doing this you get an JS object you can easily handle in your code

Related

Is it possible to download a file to the directory folder and then import it?

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.

Expo/React Native: Can't find image file after ejecting to bare workflow

I have an Expo project with an <Image /> component sourced from an import:
import logoImage from './assets/logo-medium.png';
...
<Image source={logoImage} />
This works fine on my device when building with expo run:ios -d. However, when I build the project with XCode, the image isn't there, and I see this error:
[native] Could not find image file:///Users/username/Library/Developer/CoreSimulator/Devices/B76D59AF-9599-4174-991B-AE484575B79C/data/Containers/Data/Application/A57C6E10-3DF9-46E0-8B56-7760AF5199C6/Library/Application%20Support/.expo-internal/assets/assets/logo-medium.png
When I try to find that file manually, there is no ...Application Support/.expo-internal directory.
Is there a different way I should be specifying image location? Or a way for the image to be correctly bundled when building from XCode?
I had the same issue, make sure about two things:
One of the potential solutions found on the web -
https://forums.expo.dev/t/assets-missing-only-in-ios-release-build-after-ejecting/42759
Ok I found out the problem.
When ejecting, expo is supposed to generate a metro.config.js file that looks like that:
module.exports = {
transformer: {
assetPlugins: ['expo-asset/tools/hashAssetFiles']
}
};
Your metro.config.js file shuld has .js extensions not .ts

Capacitor 3 and VueJS, open saved file (or download)

I am struggling with something I thought will be simple.
Ideally I want to save my base64 file with prompt same as you get when downloading from browser, however that seems impossible with capacitor app.
So I used FileSystem, to save file on Documents directory, which went fine, I also can get uri file. But because there is no indicator that file was saved, I would like to at least try to open the file with native apps. I've noticed there is cordova plugin cordova-plugin-file-opener2 but I can't seem to make it work with capacitor 3 and VueJs, without cordova.
Maybe I am overthinking it ? is there any way download file or open file with Capacitor?
For web view (not native app) I am using hidden download button, but that does not work at all in capacitor app
here is my current code
Filesystem.writeFile({
data: pdf,
path: `${this.fileName}.pdf`,
directory: Directory.Documents,
}).then(() => {
Filesystem.getUri({
path: `${this.fileName}.pdf`,
directory: Directory.Documents,
}).then(res => {
// open file here with my res.uri ?
);
});
I had the exakt same problem. I solved/workarounded it by using the official capacitor "Share" plugin, so the user can choose what she wants to do with the file. https://capacitorjs.com/docs/apis/share
I did not find any other solution to show or download those privately stored files. FileOpener seems to have a lot of problems on Android and does not work either on iOS.

Get file path for image in main bundle in react-native

So I'm trying to find what the actual path to an image in my assets folder is during runtime.
I've used react-native-fs to get to the main bundle and can see my assets folder, but not sure how to actually get the path to the image inside the folder.
RNFS.readdir(RNFS.MainBundlePath + '/assets').then(response => {
// console.log(response)
})
• Is this something that's possible in react-native?
• I saw that Expo has an Assets package which makes this simple, but I'm not using Expo.
Thanks!

React Native: There is an exception using react-native-fs

This is an error when using React-native-fs. I am using expo to create my project without detach and tried not to detach as possible. I want to read the content:// image retrieved from getPhotos in CameraRoll from react-native module as a file path. Is it because i have not detach my application. Is there a way to use expo to retrieve the file path of the image.
You should link project
react-native link react-native-fs
or manual linking
android/settings.gradle
...
include ':react-native-fs'
project(':react-native-fs').projectDir = new File(settingsDir, '../node_modules/react-native-fs/android')
android/app/build.gradle
...
dependencies {
...
compile project(':react-native-fs')
}
add package .addPackage(new RNFSPackage())
then generate new build